html { font-size: 100%; margin: 0; padding: 0; }

body {
    margin: 0;
    background-size: 105%;
    background-position-y: 67px;
    padding: 0;
background-repeat: no-repeat;

}
body.body-home {
background-image: url(../img/carlos-bastias-ppTg1dOdbwA-unsplash.jpg);
}

body.body-download {
background-image: url(../img/gaddafi-rusli-2ueUnL4CkV8-unsplash.jpg);
}

body.body-upload{
background-image: url(../img/katie-polansky-23ZfEr2z8FM-unsplash.jpg);

}
body.body-support{
background-image: url(../img/eryka-ragna-mBndpK6E2mQ-unsplash.jpg);

}

body.body-faq{
background-image: url(../img/eryka-ragna-pYdFNN76gDI-unsplash.jpg);

}



 


header {
    background-color: #2db8d4;
    display: flex;  /* set elements side-by-side */
    padding: 6px;
    color: white;
    font-family: 'Times New Roman', Times, serif;
    text-shadow: 2px 2px 2px #444;
    font-size: 24px;
}
h1{
color: white;
text-shadow: 2px 2px 2px #444;
padding-left:3.4%;


}


#logo {
    height: 3.5rem;
    width: auto;
    flex: 1;  
}

header div {flex: 3;
padding: 5%;
}  /* 3 times more space for div than logo */

nav {
      /* fits in 320px mobile */
    margin: 10px auto;  /* centered */
    width: 300px;
    height: 60px;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.828);
}

nav ul.navigation {
    list-style-type: none;
    position: relative;  /* absolute positioning calculated from top/left of this box */
    margin: 0 auto;
    padding: 0;
   

}

.icon {
    height: 50px;
    width: 50px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 1px;
}

.icon svg {
    display: block;
    width: 100%;
    height: auto;
    fill: #009fff;
}

.home { 
    left: 5px;
}

.download {
    left: 65px;
}

.upload {
    left: 125px;
}

.support {
    left: 185px;
    top: 0.325rem;
}

.support span {
    top: -0.6rem;
    left: -0.25rem;
}

.faq {
    left: 245px;
}


a span {
    display: block;
    width: 100%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.55rem;
    position: relative;
    top: -0.3rem;
}





/* =========== LoVeHA Rule for Text Links =========== */

a {
    position: relative;
}

a:link {
    color: #2db8d4;
    text-decoration: none;
}

a:visited {color: #716d6d;}

a:hover {text-decoration: underline;}

a:active {color: #2db8d4;}




/* =========== LoVeHA Rule for SVG Links =========== */

a:link svg {
    fill: #2db8d4;
}

a:visited svg {fill: #989494;}


@keyframes wiggle {
    0% { transform: rotate(0deg); }
    40% { transform: rotate(4deg); }
    95% { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
}

a:hover svg  {
    animation: wiggle 0.5s infinite;
}

a:active svg {fill: rgb(16, 96, 225);}


li.currentPage::before {
    position: absolute;
    content: " ";
    top: 2px;
    left: 0px;
    display: block;
    z-index: 0;
    height: 1rem;
    width: 1rem;
    background-size: contain;
    background-color: #2db8d4;
    
}
li.currentPage::after {
    position: absolute;
    content: " ";
    top: 2px;
    left: 0px;
    display: block;
    z-index: 0;
    height: 1rem;
    width: 1rem;
    background-size: contain;
 background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800"><!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --><defs><style> .st0 { fill: %2343c7dd; fill-rule: evenodd; } </style></defs><path class="st0" d="M414.2,510.9c-7.8,11.4-20.5,11.4-28.4,0l-146.3-212.4c-7.8-11.4-3-20.6,10.8-20.6h299.3c13.8,0,18.6,9.2,10.8,20.6l-146.3,212.4Z"/></svg>')
}

li.support.currentPage::before {
top: 7px;
left: 6px;
height: 1.6rem;
width: 2rem;}

li.support.currentPage::after{
    top: -5px;
    left: -8px;
}
li.upload.currentPage::before {
    top: 16px;
    left: 9px;
    height: 1.5rem;
    width: 1.6rem;}

    li.download.currentPage::before {
        top: 16px;
        left: 9px;
        height: 1.5rem;
        width: 1.6rem;}

        li.faq.currentPage::before {
            top: 10.2px;
            left: 10px;
            height: 1.8rem;
            width: 1.7rem;}

        li.faq.currentPage::after {
            top: 1.5px;
            left: -5px;
        }

            li.home.currentPage::before {
                top: 16px;
                left: 14px;
                height: 1.5rem;
                width: 1.3rem;}