body {
    background-color: black; 
    text-align: center;
    
    /*google font */
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    
    color: #fff;
    margin: 0;
    padding: 0;
    height: 100%;
}
#logo {
    margin-bottom: 100px;
    max-width:500px;
    width: 100%;
    height: auto;
}

a:link, a:visited {color: white; text-decoration: none;}
.cta, .cta a, .cta a:visited {text-decoration: underline;}
header {height: 20%;}
main {height: 74%;}
footer {
    height: 5%;
    display: flex; 
    flex-direction: column;
    font-size: xx-small;
    color: #666;
    background-color: #333;
}
footer p {margin-top: auto;}
nav {text-align: right; margin-top: 20px;}
nav ul li {display: inline; padding: 10px 20px 5px 0;}
.headline {
  letter-spacing: 0.3em;
}
.realized {
    background-image: linear-gradient(-270deg, #d3e7f8, #b6daf9, #70bbfa);
    color: transparent;
    background-clip: text;
    text-transform: uppercase;
}

/*animated div */
#overlay {color: black; position: absolute; top: 20%; right: 0;overflow: hidden;
}
  div {
    width: 0;
    height: 0;
    background-color: black;
    transition: all 1000ms linear;
  }
  .didLoad {
    width: 100%;
    height: 50%;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: 10% 10%;
    transition: all 1000ms linear;
  }