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

body {
    margin: 0;
    padding: 0;
}

h1 {
    color:white;
    position:absolute;
    left: 10px;
    text-shadow: 2px 4px 4px rgba(79 85 96 / 0.6);
   
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
      
}

header {
    background-color: #2db8d4;
    display: flex; 
    height: 3rem; /* set elements side-by-side */
}

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

header div {
    flex: 3;
 font-size:160%;
 color:white;
  
        font-family: "Kanit", sans-serif;
        font-weight: 550;
        font-style: normal;

        position: relative;
        top: 0.7rem;
        left: 65px;
    
      
}  /* 3 times more space for div than logo */
li.currentPage::before {
    position: absolute;
    content: "";
    top: 45px;
    left: 9px;
    display: block;
    z-index: -1;
    height: 1.5rem;
    width: 2rem;
    background-size: contain;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="iso-8859-1"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="0 0 290.658 290.658" xml:space="preserve"><g><g><rect y="139.474" style="fill:%23030303;" width="290.658" height="11.711"/></g></g></svg>');
}

li.currentpage1::before {
    position: absolute;
    content: "";
    top: 40px;
    left: 4px;
    display: block;
    z-index: -1;
    height: 1.5rem;
    width: 2.2rem;
    background-size: contain;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="iso-8859-1"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="0 0 290.658 290.658" xml:space="preserve"><g><g><rect y="139.474" style="fill:%23030303;" width="290.658" height="11.711"/></g></g></svg>');
}

nav {
    width: 320px;  /* fits in 320px mobile */
    margin: 0 auto;  /* centered */
    height: 60px;
    padding: 0;
}

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

a:visited {color: #444;}

a:hover {text-decoration: underline;}

a:active {color: magenta;}

/* =========== 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: magenta;}