html

body{
background-color: mediumseagreen;
margin: 0;
padding: 0;
background-image: url();
background-size: 200%;
background-repeat: no-repeat;
}
form{
    border: 1px solid red;
    left:-0.2rem;
    
}

fieldset {
    border: 1px solid #444;
    margin: 5rem 0.5rem 2rem 0.5rem;
    padding: 1rem;
}


.tell{
    position: relative;
    left:-0.2rem;
}

legend {
position: relative;
height: 3rem;
right:-2rem;
}

div {
font-size: x-large;
position: relative;
top: 0.1rem;

}

label,input {
    display: block;
}

input[type="text"] {
    margin: 0.125rem 0 2rem 0;
}
textarea {
   width: 100%;
   margin: 0.125rem 0 1.2rem 0;
}

.button {
    width: 5rem;
    color: white;
    border-radius: 0.5rem;
}

.button:hover {
    filter: opacity(0.5);
}

.align-right {
display: flex;
justify-content: end;
}

input[type="submit"] {
    margin: 0 0.55rem;
    background-color: green;
}

input[type="reset"] {
    margin: 0 0.55rem;
    background-color: red;
}


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

h1 {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.5rem;
    top: 0.6rem;
    position: relative;
    height:4rem;
  }

h2 {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.4rem;
    top: 3.8rem;
    position: relative;  
    height:7rem;
    left:-0.1rem;
}

h3{
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.5rem;
    top: 9rem;
    position: relative;
    height:11rem;    
}

h4{
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.2rem;
    top: 0.6rem;
    position: relative;
}

h5{
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.2rem;
    top: 0.6rem;
    position: relative;
}


h6{
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.2rem;
    top: 0.6rem;
    position: relative;
}

p{
    position: relative;
    font-size: 1.4rem;
    margin: auto; 
    font-style:italic; 
    left:-0.2rem;
    padding:1rem; 
}

.index2{
    position: relative;
    top:5rem;
    left:0.8rem;
    font-size:1.5rem;
}

.index3{
    position: relative;
    top:5.1rem;
    left:0.8rem;
    font-size:1.5rem;
}

.first1{
    position: relative;
    top:-3rem;
    left:0rem;
    font-size:1.1rem;
}

.first{
    position: relative;
    top:0.4rem;
    left:1.3rem;
    font-size:1.1rem;
}

.first2 {
    position: relative;
    top:6.3rem;
    left:0.4rem;
    font-size:1.2rem
}

.p1 {
    margin:1rem;
    font-style:italic;
    padding:0rem;
}

main{
font-family:arial;
margin-left:0.4rem;
padding:0.5rem;
}

.homepage {
    position: relative;
    top: 1.5rem;
    left: 1.6rem;
    height:6rem;
  }

  .homepage2 {
    position: relative;
    top: 4.9rem;
    left: 0.9rem;
    font-size:1.5rem;
  }

.navigation{
    height: 11rem;
    top: 4rem;
    right:-0.4rem;
    position: relative;
}

.copyright {
    top: 4rem;
    left:0.3rem;
    }

.evolution1 {
    position: relative;
    top: 0.5rem;
    left: 1.6rem;
    font-size:1.5rem;
    height:6rem;
}

.evolution2 {
    position: relative;
    top: 2.6rem;
    left: 0.9rem;
    font-size:1.1rem;
  }


.evolution4 {
  position: relative;
  font-size: 1.4rem;
  margin: auto;
  height:12rem;
  top:9.6rem;
  left:-0.1rem;
}

.benefits1{
    position: relative;
    font-size: 1.5rem;
    margin: auto;
    height:13rem;
    top:0.6rem;
    left:0.8rem;
}

.benefits2{
    position: relative;
    font-size: 1.4rem;
    margin: auto;
    height:0rem;
    top:-4.3rem;
    left:1.4rem;
}

.benefits3 {
  position: relative;
  font-size: 1.4rem;
  margin: auto;
  height:9.2rem;
  top:7.5rem;
  left:0.9rem;
}

#logo {
    height: 2.5rem;
    width: auto;
    flex: 1;  
    position: relative;
    right: -0.6rem;
    top: 0.4rem;
}

.img1{
     max-width: 100%;
    position:relative;
    left:-0.3rem;
    top:1.3rem;
}

.img2{
    max-width: 100%;
    position:relative;
    left:-0.3rem;
    top:5.3rem;
}

.img3{
    max-width: 100%;
    position:relative;
    left:-0.3rem;
    top:5.3rem;
}

.img4{
    max-width: 100%;
    position:relative;
    left:-0.2rem;
    top:2.3rem;
}

figcaption{
    position:relative;
  top: 63.6rem;
  left: 6.4rem;
  font-size: 0.6rem;
}

.source1 {
    position: relative;
    top: 1.3rem;
    left: 5rem;
}

.source {
    position: relative;
    top: 5.3rem;
    left: 5rem;
  }

  .source2 {
    position: relative;
    top: 2.1rem;
    left: 3.7rem;
  }


header div {flex: 3;  /* 3 times more space for div than logo */
font-size: 1.75rem;
margin-top: 2.1rem;

    font-family: "Futura PT", sans-serif;
    font-weight: 700;
    font-style: normal;
    right:1.2rem;
    top:-1rem;
}


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: 11px;
}

.contact {
    left: 71px;
    top:0.3rem;
}

.evolution {
    left: 135px;
    top:0.3rem
}

.first-to-use {
    left: 198px;
    top: 0.325rem;
    width:3rem;
}

.benefits{
    left: 260px;
    top: 0.325rem;
    width:3rem;
}

.benefits span {
    top: -0.6rem;
    left: -0.25rem;
}

.faq {
    left: 259px;
}




.home span {
    display: block;
    width: 100%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.55rem;
    position: relative;
    top: -0.1rem;
    right: 0.1rem;
}

.contact span{
    display: block;
    width: 100%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.55rem;
    position: relative;
    top: -0.1rem;
}

.evolution span {
    display: block;
    width: 100%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.55rem;
    position: relative;
    top: 0.2rem;
}


.first-to-use span {
    display: block;
    width: 100%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.65rem;
    position: relative;
    top: 0.1rem;
}

.benefits span {
    display: block;
    width: 100%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.65rem;
    position: relative;
    top: 0rem;
    left:-0.1rem;
}

/* =========== 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: 0px;
    display: block;
    z-index: 5;
    height: 1rem;
    width: 1rem;
    background-size: contain;
    background-image: url()}


    li.currentPage.contact::before {
        position: absolute;
        content: " ";
        top: 3px;
        left: -2px;
        display: block;
        z-index: 5;
        height: 1rem;
        width: 1rem;
        background-size: contain;
        background-image: url();
}

li.currentPage.evolution::before {
    position: absolute;
    content: " ";
    top: 5px;
    left: -7px;
    display: block;
    z-index: 5;
    height: 1rem;
    width: 1rem;
    background-size: contain;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 3V6H4L4 10H10L10 13L11 13L16 8L11 3L10 3Z" fill="%23000000"/><path d="M0 2L1.38281e-06 14H2L2 2L0 2Z" fill="%23000000"/></svg>'); }

    li.currentPage.benefits:before {
        position: absolute;
        content: " ";
        top: -3px;
        left: -10px;
        display: block;
        z-index: 5;
        height: 1rem;
        width: 1rem;
        background-size: contain;
        background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 3V6H4L4 10H10L10 13L11 13L16 8L11 3L10 3Z" fill="%23000000"/><path d="M0 2L1.38281e-06 14H2L2 2L0 2Z" fill="%23000000"/></svg>'); }

        li.currentPage.faq::before {
            position: absolute;
            content: " ";
            top: 2px;
            left: -7px;
            display: block;
            z-index: 5;
            height: 1rem;
            width: 1rem;
            background-size: contain;
            background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 3V6H4L4 10H10L10 13L11 13L16 8L11 3L10 3Z" fill="%23000000"/><path d="M0 2L1.38281e-06 14H2L2 2L0 2Z" fill="%23000000"/></svg>'); }

            button#menu-button {
                height: 2rem;
                width: 2rem;
                display: block;
                border: none;
                background-image: url(../img/ham-burger.svg);
                background-repeat: no-repeat;
                background-size: cover;
            }
            #menu {
                display: none;
            }
            #menu.show-nav {
                display: block;
            } 

            #menu.show-nav {
                position: relative;  /* position the menu */
                z-index: 100;
                top: -8px;
                right: 0.2rem;
                
                background-color: rgb(255, 255, 237);  /* style the dropdown menu */
                padding: 1rem;
                width: 103%;
                margin: 2px auto;
                border: 1px solid #444;
            }  

            #menu-button {
                position: absolute;
                right: 0.5rem;
                top: 0.5rem;
                padding: 0;
                background-color: transparent;
                z-index: 10;
            }

            #menu-button:hover {
                cursor: pointer;
                }

                .hide-text {
                    text-indent: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    padding: 0;
                }
                .icon a img {
                    width: 2rem;
                    height: auto;
                }

               

                @media only screen and (min-width: 64em) {
                    button#menu-button {
                        display: none;
                    }
            
                    #menu {
                        display: flex;
                    }
                }