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


body {
    margin: 0;
    padding: 0;
    
      
}



h1 {
    text-align: center;
    color: #fff;
    text-shadow: 1.5px 1.5px 0.5px #444;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

header {
    background-color: #2db8d4;
    display: flex;  /* set elements side-by-side */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    height: 4rem;
    width: 336px;
}

#logo {
    height: 3.5rem;
    width: auto;
    flex: 1; 
    position:absolute;
    top: 4px;
    left: 10px; 
}

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

nav {
    width: 320px;  /* fits in 320px mobile */
    margin: 0 auto;  /* centered */
    height: 60px;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1;
    position: relative;

}

nav ul.navigation {

    position: relative;  /* absolute positioning calculated from top/left of this box */
    margin: 0 auto;
    padding: 0;
    list-style: none;
    
}

nav ul {

    list-style: none;
    list-style-type: none;
    display: flex;
    justify-content: space-between
}

.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: #009fff;
    text-decoration: none;
}

a:visited {color: #444;}

a:hover {text-decoration: underline;}

a:active {color: cyan;}




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

a:link svg {
    fill: #009fff;
}

a:visited svg {fill: #444;}


@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: cyan;}


li.currentPage::before {
    position: absolute;
    content: " ";
    top: 9px;
    left: -24px;
    height: 8rem;
    width: 6rem;
    background-size: contain;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><!-- Generator: Adobe Illustrator 28.7.2, SVG Export Plug-In . SVG Version: 1.2.0 Build 154) --><g><g id="Layer_1"><path d="M20.79,16.54h.59s0,.02,0,.03h-10.47c-.03-.13-.05-.23-.07-.37.15-.02.29-.06.44-.06.46,0,.93.04,1.39.04,1.22,0,2.44-.03,3.66-.04,1.87,0,3.74,0,5.61,0,.11,0,.31-.07.28.14-.02.12-.08.33-.31.28-.16-.04-.31-.11-.47-.11-.22-.01-.43.02-.65.03,0,.03,0,.05,0,.08Z"/></g></g></svg>');
    background-repeat: no-repeat;
}

li.currentPage1::before {
    position: absolute;
    content: " ";
    top: 5px;
    left: -28px;
    height: 8rem;
    width: 6rem;
    background-size: contain;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><!-- Generator: Adobe Illustrator 28.7.2, SVG Export Plug-In . SVG Version: 1.2.0 Build 154) --><g><g id="Layer_1"><path d="M20.79,16.54h.59s0,.02,0,.03h-10.47c-.03-.13-.05-.23-.07-.37.15-.02.29-.06.44-.06.46,0,.93.04,1.39.04,1.22,0,2.44-.03,3.66-.04,1.87,0,3.74,0,5.61,0,.11,0,.31-.07.28.14-.02.12-.08.33-.31.28-.16-.04-.31-.11-.47-.11-.22-.01-.43.02-.65.03,0,.03,0,.05,0,.08Z"/></g></g></svg>');
    background-repeat: no-repeat;
}



  
  div {

    text-align: right;
    position: relative;
    right: 30px;
    margin-top: 1.25rem;
    margin-bottom: 0.0625rem
    font-size 2.25rem;
    color: #fff;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 25px;
      
      }