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

body {
    margin: 0;
    padding: 0;
    background-image: url(../img/sidhra-ibrahim-lRq0kAQ_qr4-unsplash.jpg);
    background-size: cover; /*contain or %*/
    background-repeat: no-repeat;
}

header {
    background-color: #2db8d4;
    padding: 0.3rem;
    color: white;
    padding: 3.4%;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: larger;
}

h1 {
	margin-left: 1.5rem;
}


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

    header div {
      display: inline;
      position: relative;
      top: -1.5rem;
    }
   /* 3 times more space for div than logo */

nav {
    width: 300px;  /* 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;}


li.currentPage::before {
    position: absolute;
    content: " ";
    top: 2px;
    left: 1px;
    display: block;
    z-index: 1;
    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" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800"><defs><style> .cls-1 { fill: none; } .cls-1, .cls-2 { stroke: %23231f20; stroke-miterlimit: 10; } .cls-2 { fill: %23231f20; } .cls-3 { fill: %23fff; stroke-width: 0px; } </style></defs><path class="cls-2" d="M519,601h-192c-9.6,0-16-6.4-16-16,0-24-11.2-38.4-28.8-60.8-9.6-11.2-20.8-25.6-32-43.2-30.4-48-57.6-105.6-64-126.4s-1.6-35.2,4.8-43.2c6.4-9.6,19.2-14.4,33.6-14.4s38.4,16,56,36.8v-164.8c0-27.2,20.8-48,48-48s48,20.8,48,48v67.2c4.8-1.6,9.6-3.2,16-3.2,17.6,0,32,9.6,40,22.4,6.4-4.8,14.4-6.4,22.4-6.4,22.4,0,40,14.4,46.4,35.2,4.8-1.6,11.2-3.2,17.6-3.2,27.2,0,48,20.8,48,48v48c0,41.6-8,75.2-16,107.2s-16,62.4-16,100.8-6.4,16-16,16Z"/><g><path class="cls-3" d="M535,329v48c0,36.8-8,67.2-16,99.2-6.4,28.8-14.4,57.6-16,92.8h-161.6c-3.2-27.2-19.2-44.8-36.8-64-9.6-12.8-19.2-24-28.8-40-32-51.2-56-102.4-60.8-120-1.6-8-1.6-12.8,0-14.4s4.8-1.6,8-1.6c11.2,0,41.6,30.4,56,67.2v12.8c0,9.6,6.4,16,16,16s16-6.4,16-16v-240c0-9.6,6.4-16,16-16s16,6.4,16,16v144c0,9.6,6.4,16,16,16s16-6.4,16-16v-32c0-9.6,6.4-16,16-16s16,6.4,16,16v48c0,9.6,6.4,16,16,16s16-6.4,16-16v-32c0-9.6,6.4-16,16-16s16,6.4,16,16v48c0,9.6,6.4,16,16,16s16-6.4,16-16v-16c0-9.6,6.4-16,16-16s16,6.4,16,16Z"/><path class="cls-1" d="M341.4,569h161.6c1.6-35.2,9.6-64,16-92.8,8-32,16-62.4,16-99.2v-48c0-9.6-6.4-16-16-16s-16,6.4-16,16v16c0,9.6-6.4,16-16,16s-16-6.4-16-16v-48c0-9.6-6.4-16-16-16s-16,6.4-16,16v32c0,9.6-6.4,16-16,16s-16-6.4-16-16v-48c0-9.6-6.4-16-16-16s-16,6.4-16,16v32c0,9.6-6.4,16-16,16s-16-6.4-16-16v-144c0-9.6-6.4-16-16-16s-16,6.4-16,16v240c0,9.6-6.4,16-16,16s-16-6.4-16-16v-12.8c-14.4-36.8-44.8-67.2-56-67.2s-6.4,0-8,1.6-1.6,6.4,0,14.4c4.8,17.6,28.8,68.8,60.8,120,9.6,16,19.2,27.2,28.8,40,17.6,19.2,33.6,36.8,36.8,64Z"/></g></svg>');


    transform: rotate(155deg);



  }
  

  
  li.currentPage::before {
    /* z-index: -1; */
    z-index: 1;
  }

  li.support.currentPage::before {
	top: -8px;
	left: -10px;
}


li.download.currentPage::before, li.upload.currentPage::before {
	top: 3px;
	left: -10px;
}

li.faq.currentPage::before {
	top: 3px;
	left: -10px;
}