*,
*::before
*::after{
    box-sizing: border-box;
}


*{
    margin: 0;
    padding: 0;
    line-height: 1.5;
}


body{
    height: 100vh;
    background-color:#A9BCB0;
    /* background-color:transparent; */
    /* background-image: url('https://cdn.discordapp.com/attachments/1050807431225167872/1152957480884768798/image.png'); */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2.5px;
    margin: 0;
   
}

li{
    list-style: none;
    
}

.nav_a{
    font-weight: 500;
    color:#ffffff;
    font-size: 1rem;
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 10px;
}


.nav_a:hover{
    color: rgb(255, 255, 255);
    background-color: seagreen;
    box-shadow: 4px 4px white;

}

/* Header */

header{
   
    position: relative;
    /* padding: 0 2rem; */
}

.navbar{
    background-color:#24949a;
    /* background-color:transparent; */
    
    height: 60px;
    padding: 1rem 1rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
     
}

.navbar .logo {
    font-family: 'Croissant One', cursive;
    font-size: 1.5rem;
    font-weight: 600;
    text-shadow: 2px 2px #ff5e00;
    color:#fffb00;
    /* padding: 1rem 1rem; */
    border-radius: 10px;
   

}

/* .logo:hover{
    background-color: seagreen;
    box-shadow: 4px 4px white;
} */

.navbar .links{
   
    display: flex;
    gap: 2rem;
}

.navbar .toggle_btn{
    
    color: rgb(255, 255, 255);
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
}

.action_btn{
    background-color: seagreen;
    box-shadow: 4px 4px white;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold; 
    cursor: pointer;
    transition: scale 0.2 ease;
    color:#ffffff;
   
}

.action_btn:hover{

    scale: 1.05;
    color: rgb(255, 255, 255);

}

.action_btn:active{
    scale: 0.95;
}

/* drop down menu */
.dropdown_menu{
    display: none;
    position: absolute;
    right: 2rem;
    top: 60px;
    height: 0;
    width: 300px;
    background: rgb(42, 42, 43);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    overflow: hidden;
    transition: height .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
    
}

.dropdown_menu.open{
    height: 240px;
}

.dropdown_menu li{

    padding: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown_menu .action_btn{

    width: 100%;
    display: flex;
    justify-content: center;

}


/* HERO */


.hero_h1{
    text-shadow:6px 6px #ff5e00;
    font-family: 'Croissant One', cursive;
    font-size: 7rem;
    color:#fffb00;
    font-weight: 300;
    margin-bottom: 1rem;
    /* text-shadow: 1px 0px #ffffff; */

}

.title_container{
    display: flex;
    margin: 2rem auto;
    color: #f04c24;
}

.date{
    margin-inline: auto;
}


section#hero_index{
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color:#000000;
    font-weight: 200;
    background-image: url('https://cdn.discordapp.com/attachments/746973511129759765/1152958531583082637/image.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.hero_desc{
    color:#000000;
    /* text-shadow: 3px 3px #ffffff,6px 6px #426250; */
    font-weight: 800;
}

/* Under head content */


.underhead_content{
    border: red 1px solid;
}


/* hero links */

section#hero_links{
    margin: 1rem 0rem;
    /* height: calc(100vh - 60px); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    text-align: center;
    color: rgb(0, 0, 0);
    /* border: #000000 1px solid; */
}

#hero_links h1{
    font-size: 3rem;
    margin-bottom: 1rem;
}

table{
    max-width: 100%;
    color: rgb(0, 0, 0);
    background-color:rgba(250, 250, 250, 0.1);
    border-collapse: collapse;
    font-size: 2rem;
    margin: 3rem auto;
    backdrop-filter: blur(15px);
    z-index: -1;
    /* position: absolute; */
    
}

#sched th{
    background-color:rgba(42, 42, 43, 1);
}

#sched td,th{

padding: 1rem 2rem;
border: 1px solid #ffffff;

}

.tablemain{
    display: flex;
    max-width: 100%;
    justify-content: center;
    /* overflow-x: scroll; */
    /* justify-content: center;
    align-items: center; */

}


/* Links */

#mth_container{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    
}

#mth_container div{
    
    border-radius: 20px;
    padding: 1rem 2rem;
    margin: 2rem;
    width: 30%;
    color: rgb(0, 0, 0);
    height: auto;
    backdrop-filter: blur(15px);
    background-color:rgba(250, 250, 250, 0.1);
    text-align: center;
}







#mth_container h1{
text-align: center;
}


.link__button{
    background-color: seagreen;
    box-shadow: 4px 4px white;
    padding: 1rem 2rem;
    border: none;
    outline: none;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold; 
    cursor: pointer;
    transition: scale 0.2 ease;
    
}

.link_a{
    text-decoration: none;
    color: white;
}

.link__button:hover{

    scale: 1.05;
    color: white;

}


/* Utility classes */


.fancy{
    font-family: 'Croissant One', cursive;
    font-size: 2rem;
    font-weight: 600;
    text-shadow: 3px 3px #ff5e00;
    color:#fffb00;
    /* padding: 1rem 1rem; */
    border-radius: 10px;
    margin-inline: auto;
}

/* .def_shadow{
    text-shadow: 1px 1px black,1px 1px black;
} */





/* responsive */

@media(max-width: 950px){
    .navbar .links,
    .navbar .action_btn{
        display: none;
    }

    .navbar .toggle_btn{
        display: block;
    }

    .dropdown_menu{
        display: block;
        
    }

    th{
        display: none;
    }

    td{
        display: block;
    }

    .subject{
        background-color:rgba(0, 103, 134,0.5);
    }

    table{
        margin: 1rem 1rem;
    }

    #mth_container div{
    
        border-radius: 20px;
        padding: 1em 2em;
        margin: 2rem;
        width: 100%;
        color: rgb(255, 255, 255);
        height: auto;
        backdrop-filter: blur(15px);
        background-color:rgba(250, 250, 250, 0.1);
    }

    .hero_h1{
        font-size: 3rem;
    }

    .fancy{
        font-size: 1rem;
    }



}

@media(max-width: 550px){

    .dropdown_menu {
        left: 2rem;
        width: unset;
        
    }



}