@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;
    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;
    margin:0;
    padding:0;
    background-color:#6ac2ff;
    animation: bg-shift 1s ease-in-out 2s 1 forwards;
}

.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:#6ac2ff;
}

.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:#6ac2ff;
    animation: bg-shift 1s ease-in-out 2s 1 forwards;
}
@keyframes bg-shift{
    from{
        background-color:#6ac2ff;
    }
    to{background-color:#eee8e8;}
}
.bahay-box{
    margin-top:37.5vh;
    display:flex;
    justify-content: center;
    align-content: center;
}
.bahay-img{
    height:25vh;
    animation: rotate15 1s ease-in-out 2s 1 forwards;
        user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
@keyframes rotate15{
    to{
        rotate:15deg;
    }
}

.title{
    margin-top:-40vh;
    width: 100%;
    text-align: center;
    display:flex;
    justify-content:center;
}
.letter{
    text-align: center;
    margin-left:2.5%;
    margin-right:2.5%;
    color:black;
    font-family: "Fjalla One";
    font-size: 17.5vw;
}
.subtitle{
    margin-top:10vh;
    width: 100%;
    text-align: center;
    display:flex;
    justify-content:center;
    flex-flow: column nowrap;
}
.title-pillar{
    font-family: "Fjalla One";
    margin-left:2%;
    margin-right:2%;
    font-size:5vh;
}

.dash{
    display:none;
}

.content{
    display:flex;
    width:100vw;
    display:flex;
    flex-flow: column wrap;

}

.grid{
    margin-top:125vh;
    display:flex;
    flex-direction:row;
    align-self: center;
    justify-content: space-between;
    z-index:2;
        user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    z-index:1000;
}

.col{
    display:flex;
    align-self: center;
    justify-self: center;
    align-content:space-between;
    flex-direction:column;
    width:45vw;
    height:150vh;
    
}

.col2{
    display:none;
}

.picture{
    margin-top:7.5vh;
    margin-bottom:5vh;
}

.picture2{
    margin-top:-2.5vh;
}

.content2{
    width:100vw;
    height:107vh;
    background-color:white;
    display:flex;
    flex-flow: column nowrap;
    align-content: center;
    z-index:2
}

.join{
    width:95vw;
    height:18vh;
    margin-top:8vh;
    left:50%;
    background-color: rgb(86, 88, 161);
    border-radius:1.5vh;
    display:flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    align-self:center;
}
.definition{
    margin-left:2vw;
    color:white;
    font-family: "Fjalla One";
    font-size:1.75vh;
    align-self:center;
    justify-self:center;
}
.membership-link{
    height:75%;
    margin-right:2vw;
    aspect-ratio:1/1;
    color:white;
    display:flex;
    justify-content:center;
    align-content:center;
    background-color:white;
    border-radius:1vh;
    align-self:center;
}
.membership-btn{
    color:rgb(86, 88, 161);
    align-self:center;
    justify-self:center;
    font-size:3.5vh;
    font-family:"Fjalla One";
    text-align:center;
}

.latest{
    margin-left:2.5%;
    margin-right:2.5%;
    margin-top:2vh;
    font-family: "Fjalla One";
    font-size:2.5vh;
}
.updates{
    position:relative;
    width:100%;
    margin-top:2vh;
}
.updates-wrapper{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;

    scroll-snap-type: x mandatory;
    list-style: none;
    overflow-x: scroll;

    scrollbar-width:none;
    -ms-overflow-style: none;
}
.update{
    flex-shrink: 0;
    margin-left:1vw;
    margin-right:1vw;
    width:90vw;
    height:60vh;
    display:flex;
    justify-content: center;
    align-content: center;
    
    border-style:solid;
    border-color:black;
    border-width:1px;
}
.update-content{
    margin-top:1%;
    width:98%;
    height:95%;
    display:flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
    
}
.update-text{
    text-align: center;
    font-size: 3.5vw;
    display:flex;
    justify-content: center;
    align-content: center;
}

.button{
    position:absolute;
    top:50%;
    width:7vw;
    aspect-ratio: 1/1;
    background-color:rgb(86, 88, 161);
    border-style:none;
    font-size: 2vh;
    color:white;
    border-radius:0.75vh;


    transform:translateY(-50%);
}

.button--previous{
    left:2vw;

    transform:rotate(180deg);
}

.button--previous:active{
    left:2vw;
    background-color:rgb(56, 58, 131);
    transform:rotate(180deg);
}

.button--next{
    right: 2vw;
}
.button--next:active{
    right:2vw;
    background-color:rgb(56, 58, 131);
}

}

/* 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:#6ac2ff;
}

.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:#6ac2ff;
    animation: bg-shift 1s ease-in-out 2s 1 forwards;
}
@keyframes bg-shift{
    from{
        background-color:#6ac2ff;
    }
    to{background-color:#eee8e8;}
}
.bahay-box{
    margin-top:40vh;
    display:flex;
    justify-content: center;
    align-content: center;
}
.bahay-img{
    height:25vh;
    animation: rotate15 1s ease-in-out 2s 1 forwards;
        user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
@keyframes rotate15{
    to{
        rotate:15deg;
    }
}

.title{
    margin-top:-15vh;
    width: 100%;
    text-align: center;
    display:flex;
    justify-content:center;
}
.letter{
    text-align: center;
    margin-left:2.5%;
    margin-right:2.5%;
    color:black;
    font-family: "Fjalla One";
    font-size: 12vh;
}
.subtitle{
    margin-top:40vh;
    width: 100%;
    text-align: center;
    display:flex;
    justify-content:center;
    flex-flow: column nowrap;
}
.title-pillar{
    font-family: "Fjalla One";
    margin-left:2%;
    margin-right:2%;
    font-size:5vh;
}

.dash{
    display:none;
}

.content{
    display:flex;
    width:100vw;
    display:flex;
    flex-flow: column wrap;

}

.grid{
    margin-top:125vh;
    display:flex;
    flex-direction:row;
    align-self: center;
    justify-content: space-between;
    z-index:2;
        user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    z-index:1000;
}

.col{
    display:flex;
    align-self: center;
    justify-self: center;
    align-content:space-between;
    flex-direction:column;
    width:45vw;
    height:150vh;
    
}

.col2{
    display:none;
}

.picture{
    margin-top:7.5vh;
    margin-bottom:5vh;
}

.picture2{
    margin-top:-2.5vh;
}

.content2{
    width:100vw;
    height:106vh;
    background-color:white;
    display:flex;
    flex-flow: column nowrap;
    align-content: center;
    z-index:2
}

.join{
    width:90vw;
    height:12.5vh;
    margin-top:7vh;
    margin-left:5vw;
    left:50%;
    background-color: rgb(86, 88, 161);
    border-radius:50px;
    display:flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-content: center;
    justify-content:center;
}

.definition{
    height:100%;
    margin-left:5%;
    color:white;
    font-family: "Fjalla One";
    font-size:18px;
    display:flex;
    flex-wrap: wrap;
    align-content:center;
}

.membership{
    height:100%;
    display:flex;
    justify-content: center;
    align-content: center;
}
.membership-link{
    height:50%;
    aspect-ratio: 1.5/1;
    background-color:white;
    border-radius:25px;
}

.latest{
    margin:5%;
    font-family: "Fjalla One";
    font-size:24px;
}

.updates{
    margin-top:5%;
    height:100px;
    display:flex;
    justify-content:space-between;
}

.update{
    font-size:18px;
    width:33%;
    border-style: solid;
}

}

/* 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;
}

.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:#6ac2ff;
    position:fixed;
    display:flex;
    justify-content: center;
    align-content: center;
    flex-flow: column nowrap;
    line-height:0;
    animation: bg-shift 1s ease-in-out 2s 1 forwards;
        user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
@keyframes bg-shift{
    from{
        background-color:#6ac2ff;
    }
    to{background-color:#eee8e8;}
}
.bahay-box{ 
    display:flex;
    justify-content: center;
    align-content: center;
}
.bahay-img{
    display:flex;
    justify-content: center;
    align-content: center;
    height:20vh;
    animation: logo-rotate 1s ease-in-out 2s 1 forwards;
}
@keyframes logo-rotate
{
    to{rotate:15deg;}
}
.title{
    width: 100%;
    text-align: center;
    display:flex;
    justify-content:center;
    transform:translateX(-0.25vw);
}
.letter{
    margin-left:2.5%;
    margin-right:2.5%;
    color:black;
    font-family: "Fjalla One";
    font-size: 15vh;
}
.subtitle{
    width: 100%;
    display:flex;
    justify-content:center;
    transform:translateY(20vh);
}
.title-pillar{
    font-family: "Fjalla One";
    margin-left:2%;
    margin-right:2%;
    font-size:4vh;
}

.content{
    display:flex;
    width:100vw;
    display:flex;
    flex-flow: column wrap;

}

.grid{
    margin-top:125vh;
    display:flex;
    flex-direction:row;
    align-self: center;
    justify-content: space-around;
    z-index:2;
        user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.col{
    display:flex;
    align-self: center;
    justify-self: center;
    align-content:space-between;
    flex-direction:column;
    width:17.5vw;
    height:150vh;
    
}

.picture{
    margin-top:7.5vh;
    margin-bottom:5vh;
}

.content2{
    width:100vw;
    height:100vh;
    background-color:white;
    display:flex;
    flex-flow: column nowrap;
    align-content: center;
    z-index:2
}

.join{
    width:60vw;
    height:18vh;
    margin-top:8vh;
    left:50%;
    background-color: rgb(86, 88, 161);
    border-radius:50px;
    display:flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    align-self:center;
}
.definition{
    margin-left:2vw;
    color:white;
    font-family: "Fjalla One";
    font-size:2vh;
    align-self:center;
    justify-self:center;
}
.membership-link{
    height:75%;
    margin-right:2vw;
    aspect-ratio:1/1;
    color:white;
    display:flex;
    justify-content:center;
    align-content:center;
    background-color:white;
    border-radius:2vh;
    align-self:center;
}
.membership-btn{
    color:rgb(86, 88, 161);
    align-self:center;
    justify-self:center;
    font-size:3.5vh;
    font-family:"Fjalla One";
    text-align:center;
}

.latest{
    margin-left:2.5%;
    margin-right:2.5%;
    margin-top:2vh;
    font-family: "Fjalla One";
    font-size:2.5vh;
}
.updates{
    position:relative;
    width:100%;
    margin-top:2vh;
}
.updates-wrapper{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;

    gap:1vw;

    scroll-snap-type: x mandatory;
    list-style: none;
    overflow-x: scroll;

    scrollbar-width:none;
    -ms-overflow-style: none;
}
.update{
    flex-shrink: 0;
    width:31vw;
    height:61.5vh;
    border-style:solid;
    border-width:0.1vw;
    padding:1%;
    display:flex;
    justify-content: center;
    align-content:center;
}
.update-content{
    width:75%;
    height:100%;
    display:flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
    
}
.update-text{
    margin: 2%;
    text-align: center;
    font-size: 1vw;
    display:flex;
    justify-content: center;
    align-content: center;
}

.button{
    position:absolute;
    top:50%;
    width:2vw;
    aspect-ratio: 1/1;
    background-color:rgb(86, 88, 161);
    border-style:none;
    font-size: 2vh;
    color:white;
    border-radius:1vh;


    transform:translateY(-50%);
}

.button--previous{
    left:1.5vw;

    transform:rotate(180deg);
}

.button--previous:active{
    left:1.5vw;
    background-color:rgb(56, 58, 131);
    transform:rotate(180deg);
}

.button--next{
    right: 1.5vw;
}
.button--next:active{
    right:1.5vw;
    background-color:rgb(56, 58, 131);
}
}