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

body {
    margin: 0;
    padding: 0;
background-image:url(/img/ibrahim-asad-ZEfzyduAyJU-unsplash-2.jpg)}

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



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

header div {flex: 3;}  /* 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: #FFFFFF;
}



.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;
}


a {
    position: relative;
}

a:link {
    color: #009fff;
    text-decoration: none;
}

a:visited {color: #2db8d4;}

a:hover {text-decoration: underline;}

a:active {color: rgb(0 0 0);}


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

a:visited svg {fill: #4BF3FF;}


@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(0 0 0);}


li.currentPage::before {
    position: absolute;
    content: " ";
    top: 2px;
    left: 0px;
    display: block;
    z-index: -1;
    height: 1rem;
    width: 1rem;
    background-size: contain;
    background-image: url('data:image/svg+xml,<svg height="800" viewBox="0 0 297 297" width="800" xmlns="http://www.w3.org/2000/svg"><path d="m148.5 0c-62.854 0-113.989 51.136-113.989 113.989 0 25.11 8.008 48.926 23.157 68.873 13.604 17.914 32.512 31.588 53.658 38.904l27.464 68.659c1.589 3.971 5.434 6.574 9.71 6.574s8.121-2.603 9.71-6.574l27.464-68.659c21.146-7.316 40.054-20.99 53.658-38.904 15.149-19.947 23.157-43.763 23.157-68.873-0-62.853-51.135-113.989-113.989-113.989zm26.339 203.279c-3.075.906-5.565 3.172-6.756 6.148l-19.583 48.957-19.583-48.956c-1.19-2.977-3.681-5.242-6.756-6.148-39.293-11.57-66.735-48.288-66.735-89.29 0-51.321 41.753-93.073 93.074-93.073s93.074 41.752 93.074 93.073c0 41.001-27.442 77.719-66.735 89.289z"/><path d="m148.5 51.766c-34.311 0-62.224 27.913-62.224 62.224s27.913 62.224 62.224 62.224 62.224-27.913 62.224-62.224-27.913-62.224-62.224-62.224zm0 103.532c-22.777 0-41.308-18.531-41.308-41.309 0-22.777 18.53-41.308 41.308-41.308 22.777 0 41.308 18.53 41.308 41.308s-18.531 41.309-41.308 41.309z"/></svg>');
}

div {
 font-family: "Caveat", cursive;
  font-weight:600;
  font-style: normal;
margin-top: auto;
margin-bottom: 0.5rem;
font-size: 33px;
color: #FFFFFF;
}

h1{
    font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight:400;
  font-style: normal;
 margin-left: 0.7rem;
    font-size: x-large;
}