*{
    margin: 0;
    padding: 0;
    font-family: 'Spectral', serif;
}



@keyframes fadin {
    10%{
        opacity: 0;
    }
    15%{
        opacity: .4;
    }
    30%{
        opacity: .8;
    }
    45%{
        opacity: 1;
    }
    60%{
        opacity: .4;
    }
    75%{
        opacity: .6;
    }
    80%{
        opacity: .8;
    }
    95%{
        opacity: 1;
    }
}

@keyframes truth {
    10%{
        opacity: .03;
    }
    25%{
        opacity: .2;
    }
    40%{
        opacity: .4;
    }
    50%{
        opacity: .5;
    }
    70%{
        opacity: .7;
    }
    100%{
        opacity: .85;
    }
}

.burger{
    opacity: .1;
    animation: truth 7s;
    animation-fill-mode: forwards;
}
.burger:hover{
    animation: none;
    opacity: 1;
}


#background-video2{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

h1{
    color: black;
}

@keyframes spark {
    20%{
        color: white;
    }
    40%{
        color:palegoldenrod;
    }
    70%{
        color: paleturquoise;

    }
    90%{
        color: palegreen;
    }
}

.burger div:hover{
    background-color: white;
}
.elam{
    animation: spark 12s infinite;
    opacity: .8;
}
.ahpla{
    animation: spark 85s infinite;
    opacity: .8;
}
.ahpla:hover{
    cursor:none;
}

nav{
    display: flex;
    justify-content: space-around;
    background-color: rgba(0, 0, 0, 0.288);
    padding: 1vw;
}
.description{
    color: whitesmoke;
    opacity: .04;
    animation: fadin 20s infinite;
}
.description:hover{
    animation: none;
    cursor: none;
    opacity: 1;
}

.super{
    display: none;
}

.burger div{
    background-color: rgb(177, 165, 165);
    width: 34px;
    height: 6px;
    margin: 5px;
}
.special{
    position: absolute;
    bottom: 5vw;
}
li{
    height: 50px;
    list-style: none;
}
h2{
    color: rgb(100, 99, 99);
    font-size: xx-large;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h2:hover{
    color: white;
}
a{
    text-decoration: none;
    color: rgba(177, 196, 231, 0.959);
    font-style: italic;
}
a:hover{
    cursor: none;
    animation: spark 7s infinite;
}
.tiny{
    max-width: 40px;
    opacity: .5;
}
.megaphone{
    opacity: .04;
    animation: fadin 20s infinite;
}
.megaphone:hover{
    animation: none;
    cursor: pointer;
    opacity: 1;
}

#background-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
  }


  /* .blue{
        max-width: 100%;
        object-fit: cover;
        object-position: 80% 0;
}

.red{
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
} */

@media only screen and (max-width: 600px) {
    .blue {
        max-width: 100%;
        object-fit: cover;
        object-position: 80% 0;
      }
  }

  .letter:hover{
    color: white;
  }