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

body {
	margin: 0;
	padding: 0;
	background-image: url(../img/sean-oulashin-KMn4VEeEPR8-unsplash.jpg);
	background-size: 305%;
	background-repeat: no-repeat;
	background-position-x: 38%;
}

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

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

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

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

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

.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: #C7D500;
}

a:visited svg {fill: #18B300;}


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

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

a:active svg {fill: rgb(255 0 0);}


li.currentPage::before {
    position: absolute;
    content: " ";
    top: 1px;
    left: 1px;
    display: block;
    z-index: 1;
    height: 1rem;
    width: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg height="800" viewBox="88 100 300 350" width="800" xmlns="http://www.w3.org/2000/svg"><path d="M406.3,233.3c-13.1-14.6-40.1-45.2-56.8-75.8-1.5-1.5-21.1-33.5-43-57.6v-18.9c0-40.1-32.8-72.9-72.9-72.9h-72.9c-31.3,0-64.1,26.2-71.4,57.6-1.5,8-4.4,14.6-7.3,17.5-7.3,8.7-16,29.1-16,56.1v116.6c0,20.4,16,36.4,36.4,36.4s16-2.9,21.9-7.3v7.3c0,20.4,16,36.4,36.4,36.4s16-2.9,21.9-7.3c0,20.4,16,36.4,36.4,36.4s16-2.9,21.9-7.3v58.3c0,20.4,16,36.4,36.4,36.4s36.4-16,37.2-36.4v-165.4c16,27.7,53.2,41.5,81.6,31.3,4.4-1.5,8-3.6,10.2-5.1,10.9-7.3,10.2-16.8,10.2-19.7.7-4.4,0-5.1-10.2-16.8ZM396.8,257.4c-2.9,1.5-5.1,2.9-7.3,3.6-18.9,6.6-50.3-2.2-64.1-26.2l-13.1-19.7c-.3-.6-.7-1.1-1.1-1.5l-6.2-12.4c-1.5-2.9-5.8-4.4-9.5-2.9-2.9,1.5-4.4,5.8-2.9,9.5l6.6,13.1v188c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-204c0-4.4-2.9-7.3-7.3-7.3s-7.3,2.9-7.3,7.3v116.6c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-109.3c0-4.4-2.9-7.3-7.3-7.3s-7.3,2.9-7.3,7.3v80.2c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-87.4c0-4.4-2.9-7.3-7.3-7.3s-7.3,2.9-7.3,7.3v51c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-116.6c0-13.6,2.4-24.5,5.4-32.5.4-.5.8-1.1,1.1-1.8,2.9-9.5,11.7-11.7,27.7-16l4.4-.7c3.6-1.5,6.6-5.8,5.1-9.5-1.5-3.6-5.1-5.8-9.5-5.1l-3.6.7c-3.3.9-6.6,1.8-9.7,2.7.8-2.7,1.6-5.5,2.5-8.5,5.1-24.8,32.1-45.9,56.8-45.9h72.9c32.1,0,58.3,26.2,58.3,58.3v6.6c-1.4-1-2.9-2-4.4-3-4.4-3.6-8-5.8-12.4-9.5-2.9-2.9-7.3-2.2-10.2.7-2.9,2.9-2.2,7.3.7,10.2,4.4,4.4,8.7,7.3,13.1,10.2,4.7,3.4,9.4,6.7,14.1,10.6.2.4.3.7.5,1,21.9,22.6,43,56.8,43,56.8,17.5,31.3,45.2,62.7,58.3,78,2.2,2.9,5.1,6.6,6.6,8,0,2.2-.7,4.4-4.4,6.6Z"/></svg>');
}


li.currentPage1::before {
    position: absolute;
    content: " ";
    top: -4px;
    left: -10px;
    display: block;
    z-index: 1;
    height: 1rem;
    width: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg height="800" viewBox="88 100 300 350" width="800" xmlns="http://www.w3.org/2000/svg"><path d="M406.3,233.3c-13.1-14.6-40.1-45.2-56.8-75.8-1.5-1.5-21.1-33.5-43-57.6v-18.9c0-40.1-32.8-72.9-72.9-72.9h-72.9c-31.3,0-64.1,26.2-71.4,57.6-1.5,8-4.4,14.6-7.3,17.5-7.3,8.7-16,29.1-16,56.1v116.6c0,20.4,16,36.4,36.4,36.4s16-2.9,21.9-7.3v7.3c0,20.4,16,36.4,36.4,36.4s16-2.9,21.9-7.3c0,20.4,16,36.4,36.4,36.4s16-2.9,21.9-7.3v58.3c0,20.4,16,36.4,36.4,36.4s36.4-16,37.2-36.4v-165.4c16,27.7,53.2,41.5,81.6,31.3,4.4-1.5,8-3.6,10.2-5.1,10.9-7.3,10.2-16.8,10.2-19.7.7-4.4,0-5.1-10.2-16.8ZM396.8,257.4c-2.9,1.5-5.1,2.9-7.3,3.6-18.9,6.6-50.3-2.2-64.1-26.2l-13.1-19.7c-.3-.6-.7-1.1-1.1-1.5l-6.2-12.4c-1.5-2.9-5.8-4.4-9.5-2.9-2.9,1.5-4.4,5.8-2.9,9.5l6.6,13.1v188c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-204c0-4.4-2.9-7.3-7.3-7.3s-7.3,2.9-7.3,7.3v116.6c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-109.3c0-4.4-2.9-7.3-7.3-7.3s-7.3,2.9-7.3,7.3v80.2c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-87.4c0-4.4-2.9-7.3-7.3-7.3s-7.3,2.9-7.3,7.3v51c0,12.4-9.5,21.9-21.9,21.9s-21.9-9.5-21.9-21.9v-116.6c0-13.6,2.4-24.5,5.4-32.5.4-.5.8-1.1,1.1-1.8,2.9-9.5,11.7-11.7,27.7-16l4.4-.7c3.6-1.5,6.6-5.8,5.1-9.5-1.5-3.6-5.1-5.8-9.5-5.1l-3.6.7c-3.3.9-6.6,1.8-9.7,2.7.8-2.7,1.6-5.5,2.5-8.5,5.1-24.8,32.1-45.9,56.8-45.9h72.9c32.1,0,58.3,26.2,58.3,58.3v6.6c-1.4-1-2.9-2-4.4-3-4.4-3.6-8-5.8-12.4-9.5-2.9-2.9-7.3-2.2-10.2.7-2.9,2.9-2.2,7.3.7,10.2,4.4,4.4,8.7,7.3,13.1,10.2,4.7,3.4,9.4,6.7,14.1,10.6.2.4.3.7.5,1,21.9,22.6,43,56.8,43,56.8,17.5,31.3,45.2,62.7,58.3,78,2.2,2.9,5.1,6.6,6.6,8,0,2.2-.7,4.4-4.4,6.6Z"/></svg>');
}

h1 {

font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: #b6e4d4;
text-shadow: 2px 2px 5px #444;

}

div {
font-size: 1.6rem;
color: white;
font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
margin-top: 0.75rem;
}