@media only screen and (min-width:320px) and (max-width:480px){
    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.menu{
    display:none;
}

.letters{
    opacity: 0;
    height:4vh;
}

html, body{
    width: 100%;
    height: 100vh;
    margin:0;
    padding:0;
    background-color:#eee8e8;
}

.container{
    width:100vw;
    display:flex;
    flex-flow: column nowrap;
}

.dropdown-menu{
    width:100%;
    display:flex;
    flex-flow: column nowrap;
    align-content: center;
    z-index:99;
}

.btn-drop{
    margin-top:1em;
    border:none;
    background:rgba(0,0,0,0);
    z-index:999;
    transform:translateX(-5px);
}

.dropdown-bg{
    display:none;
    position:fixed;
    align-self:center;
    width:100vh;
    height:110vh;
    background-color:rgba(0,0,0,0.75);
}
.dropdown-content{
    display:none;
    position:fixed;
    margin-top:10%;
    width:80%;
    height:50%;
    font-family: "Rubik Mono One";
    font-size:32px;
    text-align:center;
    line-height:1.35em;
    background-color:#ffcc33;
}

.link{
    color:white;
    text-decoration:none;
}
.link:visited{
    color:white;
    text-decoration:none;
}
.link:hover{
    color:#eee8e8;
    text-decoration:none;
}
.link:active{
    color:#eee8e8;
    text-decoration:none;
}

.linktree{
    height:32px;
    width:32px;
    filter:brightness(100);
}
.linktree:hover{
    height:32px;
    filter:brightness(1);
}

.yt:hover{
    color:red;
}

.ig:hover{
    color:hotpink;
}

.show {
    display:flex;
    flex-flow:column nowrap;
    justify-content:center;
    align-items: center;
}

.bg{
    position:fixed;
    width:100%;
    height:100vh;
    z-index:0;
    background-color:#eee8e8;
}

}

/* Phone/Tablet CSS*/
@media
only screen and (min-width: 481px) and (max-width: 767px),
only screen and (min-width: 768px) and (max-width: 1024px),
only screen and (min-width: 1025px) and (max-width: 1280px){
    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.menu{
    display:none;
}

.letters{
    opacity: 0;
    height:4vh;
    animation: ltr-fade 1s ease-in-out 2s 1 forwards;
}
@keyframes ltr-fade{
    from{opacity:0;}
    to{opacity:1;}
}

html, body{
    width: 100%;
    height: 100vh;
    background-color:#eee8e8;
    margin:0;
    padding:0;
}

.container{
    width:100vw;
    display:flex;
    flex-flow: column nowrap;
}

.dropdown-menu{
    width:100%;
    display:flex;
    flex-flow: column nowrap;
    align-content: center;
    z-index:99;
}

.btn-drop{
    margin-top:1em;
    border:none;
    background:rgba(0,0,0,0);
    z-index:999;
    transform:translateX(-5px);
}

.dropdown-bg{
    display:none;
    position:fixed;
    align-self:center;
    width:100vh;
    height:110vh;
    background-color:rgba(0,0,0,0.75);
}
.dropdown-content{
    display:none;
    position:fixed;
    margin-top:10%;
    width:80%;
    height:50%;
    font-family: "Rubik Mono One";
    font-size:32px;
    text-align:center;
    line-height:1.35em;
    background-color:#ffcc33;
}

.link{
    color:white;
    text-decoration:none;
}
.link:visited{
    color:white;
    text-decoration:none;
}
.link:hover{
    color:#eee8e8;
    text-decoration:none;
}
.link:active{
    color:#eee8e8;
    text-decoration:none;
}

.linktree{
    height:32px;
    width:32px;
    filter:brightness(100);
}
.linktree:hover{
    height:32px;
    filter:brightness(1);
}

.yt:hover{
    color:red;
}

.ig:hover{
    color:hotpink;
}

.show {
    display:flex;
    flex-flow:column nowrap;
    justify-content:center;
    align-items: center;
}

.bg{
    position:fixed;
    width:100%;
    height:100vh;
    z-index:0;
    background-color:#eee8e8;
}

}

/* Desktop CSS */
@media screen and (min-width: 1281px){
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body{
    width: 100%;
    height: 100vh;
    background-color:#eee8e8;
    margin:0;
    padding:0;
}

.container{
    display:flex;
    flex-flow: column;
}

.dropdown-menu{
    display:none;
}

nav{
    position:fixed;
    width: 100%;
    height: 8vh;
    margin: 0px auto;
    display: flex;
    flex-flow: row wrap;
    justify-content:flex-start;
    align-items:center;
    text-transform:uppercase;
    font-family: "Rubik Mono One", monospace;
    font-weight: 400;
    font-style: normal;
    z-index:1;
        user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    background-color: #eee8e8;
}

.menu-item{
    flex:1;
}

.letters{
    height:4vh;
    transform:translateX(-0.1vw);
}

.menu-left{
    font-size:1.5vh;
text-align: left;
margin-left: 3vh;
    display:flex;
    justify-content: space-between;
    font-family: "Rubik Mono One", monospace;
    font-weight: 400;
    font-style: normal;
}

.menu-center{
    display: flex;
    justify-content: center;
    height: 50%;
}

.menu-right{
    font-size:1.75vh;
    text-align: right;
    margin-right: 3vh;
    display:flex;
    justify-content: space-between;
}

.menu-link-right{
    font-size:1.5vh;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.menu-link-left{
    padding: 0 3vh;
    color:black;
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none;
}
.link{
    color:black;
    text-decoration:none;
}
.link:visited{
    color:black;
    text-decoration:none;
}
.link:hover{
    color:darkslategray;
    text-decoration:underline;
}
.link:active{
    color:darkslategray;
    text-decoration:none;
}

.linktree{
    height:1.75vh;
    filter:brightness(0);
          user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.linktree:hover{
    height:1.75vh;
    filter:brightness(0.3);
}

.bg{
    width:100vw;
    height:100vh;
    background-color:#eee8e8;
    position:fixed;
    display:flex;
    justify-content: center;
    flex-flow: column nowrap;
    line-height:0;
        user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    z-index:-1;
}

.title-about{
    font-family:"Fjalla One";
    font-size:3vw;
    margin-left:17.5vw;
    margin-top:8vh;
    margin-bottom:2vh;
}

.video{
    display:flex;
    justify-content:center;
    align-content:center;
}

.video-window{
    width:65vw;
    aspect-ratio:16/9;
    margin-bottom:2vh;
}

.description{
    width:65vw; 
    display:flex;
    justify-content:center;
    margin-left:17.5vw;
    font-family:"Montserrat", sans-serif;
    font-optical-sizing: none;
    font-weight:300;
    font-style:normal;
}

.title-mission{
        font-family:"Fjalla One";
    font-size:3vw;
    margin-left:17.5vw;
    margin-top:4vh;
    margin-bottom:2vh;
}

.resource-link{
    font-family:"Fjalla One";
    font-size:2vw;
    margin-left:17.5vw;
    margin-top:2vh;
    color:#6ac2ff;
    text-decoration:none;
    margin-bottom:2vh;
}



}