html {
  margin: 0 auto;
  padding: 0 auto;
  height: auto;
  
  font-family: 'Eczar', serif;
}

a{ 
    text-decoration: none; 
    color: #E0FFF9;
}

h1{
    margin: 0;
    /*font-size: 2.5em; /* 40px/16=2.5em */
    color: #00F0C3;
    font-size: 6.8vw;
}

h2{
    margin-top: -4%;
    color: #E0FFF9;
    font-size: 2.3vw;
}

h3{
    margin-top: 0%;
    margin-left: 2%;
    margin-right: 2%;
    color: #E0FFF9;
    font-size: 2.3vw;
}

h4{
    margin: 0;
    color: #E0FFF9;
    font-size: 2vw;
}

img {
    border-radius: 12%;
}

.topheader {
    display: flex;
}

.leftheader {
    width: 50%;
    margin-left: 2%;
}

.rightheader {
    width: 50%;
    margin-top: 2.5%;
    margin-right: 2%;
    text-align: right;
}

.navigation{
    margin-top: 7%;
    height: 700px;
    width: auto;
    text-align: center;
}

body{  
    margin: 0;
    background-image:
    linear-gradient( #001F37, 30%, #00F0C3);
    background-repeat: no-repeat;
    min-height: 235vh; /*Makes the element take up at least 100% of the viewport height. But it can go bigger if more content is added.*/
    display: flex;
    flex-direction: column;
}

.darkbox {
    aspect-ratio: 4.5 / 1.5;
    height: auto;
    width: 70%;
    background: #001F37;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3%;
  }

footer {
margin-top: auto;
background-color: #435763;
text-align: center;
text-decoration: none;
}

/* {
    border-style:solid;
    border-color:red;
}