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

body {
    margin: 0;
    padding: 0;
}

header {
    background-color: #2db8d4;
    display: flex;  /* set elements side-by-side */
    font-size: 2rem;
    padding: 0.5rem;
}
div {
    position: relative;
    top: 0.2rem ;
    color: #000000;
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 900;
    font-style: normal;
}
#logo {
    height: 3.5rem;
    width: auto;
    flex: 1;  
}

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

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 SVG Links =========== */

body {
    margin: 0;
    padding: 0;
}

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: 100%;  /* fits in 320px mobile */
    margin: 0 auto;  /* centered */
    height: 60px;
    padding: 0;
    background-color: rgba(37 37 37 / 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;
}

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

a:visited {color: #9f9f9f;}

a:hover {text-decoration: underline;}

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




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

a:link svg {
    fill: #b8b0ff;
}

a:visited svg {fill: #9f9f9f;}


@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(55 255 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 fill="%23ff5757" height="200px" width="200px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 297 297" xml:space="preserve" stroke="%23ff5757"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path d="M148.5,0C87.431,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.975,183.645 c1.938,1.705,4.357,2.559,6.778,2.559s4.841-0.853,6.778-2.559c4.244-3.739,103.975-92.618,103.975-183.645 C259.253,49.703,209.569,0,148.5,0z M148.5,272.689c-22.049-21.366-90.243-93.029-90.243-161.892 c0-49.784,40.483-90.287,90.243-90.287s90.243,40.503,90.243,90.287C238.743,179.659,170.549,251.322,148.5,272.689z"></path><path d="M215.744,86.502c-1.207-3.709-4.414-6.412-8.273-6.975l-34.386-5.009L157.7,43.267c-1.726-3.506-5.293-5.726-9.2-5.726 s-7.475,2.22-9.2,5.726l-15.385,31.252l-34.386,5.009c-3.859,0.563-7.066,3.266-8.273,6.975c-1.208,3.709-0.205,7.782,2.584,10.508 l24.9,24.333l-5.88,34.36c-0.658,3.849,0.926,7.737,4.086,10.031c3.161,2.292,7.349,2.593,10.804,0.77l30.75-16.208l30.75,16.208 c1.503,0.792,3.145,1.183,4.78,1.183c2.125,0,4.237-0.658,6.023-1.953c3.16-2.294,4.744-6.183,4.086-10.031l-5.88-34.36 l24.9-24.333C215.949,94.284,216.951,90.211,215.744,86.502z M170.077,110.434c-2.409,2.355-3.509,5.743-2.94,9.064l3.279,19.167 l-17.134-9.032c-1.496-0.788-3.14-1.183-4.782-1.183s-3.286,0.395-4.782,1.183l-17.134,9.032l3.278-19.167 c0.569-3.321-0.53-6.709-2.939-9.064l-13.918-13.6l19.206-2.798c3.343-0.487,6.231-2.589,7.723-5.618l8.566-17.402l8.566,17.402 c1.491,3.029,4.38,5.131,7.723,5.618l19.206,2.798L170.077,110.434z"></path></g></g></svg>');    
}

body {
    margin: 0;
    padding: 0;
    background-image: url(../img/denys-nevozhai-guNIjIuUcgY-unsplash.jpg);
    background-color: #2db8d4;
    background-size: 200%;
    background-repeat: no-repeat;
}

h1{
    color: #ffffff;
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0.5rem;
}