* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

::-webkit-scrollbar {
    display: none;
  }

a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
}

button:focus { outline: none; }

body {
    background-color: rgb(16, 16, 16);
    height: 150vh;
}

.colors {
    bottom: 100px;
    left: -40px;
    position:fixed;
    transform: rotate(-90deg);
}

.colors ul li{
    display: inline-block; 
    padding-right: 10px;
}

.button {
    background-color: rgb(16, 16, 16);
    cursor: pointer;
    font-family: Roboto;
    color: #ececec;
    font-weight: bold;
}


#body_border {
    border: 1px solid #858585;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    height: 93vh;
    width: 95vw;
    background-image: url(../images/earth.gif);
    background-size:cover;
    background-position: -300px -300px;
    background-repeat: no-repeat;
}

.header {
    padding-top: 20px; padding-left: 30px;
    width: 70%; height: 420px;
}

h1 {
    padding-top: 10px;
    color: #ececec;
    font-size: clamp(35px,3.5vw,3.5vw);
    font-family: Roboto;
    font-weight: 95;
    letter-spacing: 2px;
    word-spacing: 6px;
    
}

h2 {
    padding-top: 3px;
    font-size: 16px;
    color: #ececec;
    font-family: Roboto;
    font-weight: 75;
}

.header ul {
    padding-top: 50px;
    color: #ececec;
    list-style: none;
}

.header li {
    margin-bottom: 10px;
    font-family: Roboto Mono;
    font-size: 13px;
    font-weight: bold;
}

.header li:hover {
    color: #858585;
    cursor: pointer;
}

.nav {
    position:absolute;
    height: 150vh; width: 40vw;
    color: #ececec; 
    right: 0;
    text-align: right;
    font-weight:lighter;
    overflow: hidden;
    overflow-y: scroll;
}

.nav ul {
    padding-right: 4vw;
    list-style: none;
    padding-top: 300px;
}

.nav ul li {
    margin-top:15px;
    font-family: Roboto;
    font-size: 5vw;

}

.nav ul li:hover {
    cursor: pointer;
    color: #85858573;
    animation-name: navhover;
    animation-duration: .5s;
}

@keyframes navhover {
    from {transform: skewX(10deg);}
    to {transform: skewX(-10deg);}

    from {color: #ececec;}
    to {color: #858585;}
}

.nav ul li:nth-child(1) {
    font-size: 2.5vw;
    transform: skewX(0deg);
    color: #858585;
}