/*background image*/
body{
    background-image: url("../images/indexBG.jpg"); /*init*/
    background-size: cover; /*cover the whole screen*/
    background-repeat: no-repeat; /* prevents tiling for any size*/
    background-position: 50% 10%;
}


/*svg overlay*/
svg {
    position: fixed;
    top: 0;
    left: 0;
}
/*text styles*/
#mainText {
    position: fixed;
    top: 20vh;
    left: 18vw;
    z-index: 1;
    font-family: 'Arial', sans-serif;
}
#yellowH {
    color: #FFD700; /*golden yellow*/
    font-size: 12vw;
    margin: 0;
    padding: 0;
}
#whiteH {
    color: #FFFFFF; /*white*/
    font-size: 12vw;
    margin: 0;
    padding: 0;
}
button {
    margin-top: 2vh;
    padding: 1vh 2vw;
    font-size: 2vw;
    color: #FFFFFF; /*dark blue*/
    border-radius: 40px;
    cursor: pointer;
    background-color: transparent;
    margin-left: 18vw;;

}


/*mobile view*/
@media (max-width: 767px) {
    /*background image*/
    body {
        background-image: url("../images/indexBG.jpg"); /*init*/
        background-position: 25% 0%; /*fit image to mobile*/
        /*background-color: red; /*debugging*/
        background-size: 150vh; /*cover the whole screen*/
        background-repeat: no-repeat;
    }
    /*text styles*/
#mainText {
    position: fixed;
    top: 20vh;
    left: 18vw;
    z-index: 1;
    font-family: 'Arial', sans-serif;
}
#yellowH {
    color: #FFD700; /*golden yellow*/
    font-size: 25vw;
    margin: 0;
    padding: 0;
}
#whiteH {
    position:relative;
    color: #FFFFFF; /*white*/
    font-size: 18vw;
    right: 10vw;
    padding: 0;
}
button {
    margin-top: 2vh;
    padding: 1vh 2vw;
    font-size: 5vw;
    color: #FFFFFF; /*dark blue*/
    border-radius: 40px;
    cursor: pointer;
    background-color: transparent;
    margin-left: 2vw;;

}
}

/*tablet view*/
@media (min-width: 768px) and (max-width: 1024px) {
    /*background image*/
    body {
        background-image: url("../images/indexBG.jpg"); /*init*/
        background-position: 15% 0%; /*fit image to tablet*/
        /*background-color: blue; /*debugging*/
        background-size: 150vh; /*cover the whole screen*/
        background-repeat: no-repeat;
    }
       /*text styles*/
#mainText {
    position: fixed;
    top: 20vh;
    left: 18vw;
    z-index: 1;
    font-family: 'Arial', sans-serif;
}
#yellowH {
    color: #FFD700; /*golden yellow*/
    font-size: 25vw;
    margin: 0;
    padding: 0;
}
#whiteH {
    position:relative;
    color: #FFFFFF; /*white*/
    font-size: 18vw;
    right: 10vw;
    padding: 0;
}
button {
    margin-top: 2vh;
    padding: 1vh 2vw;
    font-size: 5vw;
    color: #FFFFFF; /*dark blue*/
    border-radius: 40px;
    cursor: pointer;
    background-color: transparent;
    margin-left: 2vw;;

}
}