@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Source+Sans+Pro&display=swap');

/* Variables for the whole css */
:root{
    /* COLORS PALATTE*/
    --COLOR1:#022B3A;
    --COLOR2:#1F7A8C;
    --COLOR3:#BFDBF7;
    --COLOR4:#E1E5F2;
    --COLOR5: #FFFFFF;
    --HOVER_COLOR:hsl(210, 78%, 86%,0.5);
    --HEADING_FONT:'Montserrat', sans-serif;
    --BODY_FONT:'Source Sans Pro', sans-serif;
    --FONT_SIZE_X:1em;
    --FONT_SIZE_XL:2em;
    --FONT_SIZE_XXL:3em;
    --PADDING:0.3em;
    --BOX_SHADOW:3px 3px 2px 1px rgba(0, 0, 0, 0.2);
}

/* Overriding the defaults */
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    font-family: var(--BODY_FONT);
}
h1, h2, h3,h4, h5, h6{
    font-family: var(--HEADING_FONT);
}

/* Change the text color to theme */
/* For single properties  */
.inner_style{
    color:var(--COLOR2);
}
.bold{
    font-weight: bold;
}
.align_center{
    text-align: center;
}


/* CSS for the topbar where name dipslayed as "First Semester" */
.topbar{
    display: grid;
    grid-template-columns: 1fr 2fr;
    justify-items: center;
    margin: 3em;
    margin-bottom:2em;
    background:url("/Resources/images/main_landingmain_landing.jpg");
    background-size: cover;
}

.topbar img{
    width: 30%;
    margin-left: 10em;
}

.display_name h1{
    font-size: var(--FONT_SIZE_XXL);
}
.display_name h2{
    font-size: var(--FONT_SIZE_XL);
}
.display_name p{
    font-size: var(--FONT_SIZE_XL);
    opacity: 0.8;
}

/* ---Main body of the page where the menu is shown ---*/
.main_menu{
    background:url("../Resources/images/background3.jpg");
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas: 
    "null mn mn mn mn nul sb sb nu";
    gap:1em;
    margin-bottom: 2em;
    height: fit-content;
}

/* Menu that displays the available notes */
.notes_menu{
    grid-area: mn;
    box-shadow: var(--BOX_SHADOW);
    border:2px solid var(--COLOR2);
    border-radius: 10px;
    padding:20px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "hd hd"
    "bd bd"
    ;
    width: fit-content;
    
}
.notes_menu h2{
    grid-area: hd;
}
/* Cards for the subjects  */
.notes_menu .cards{
    border: 2px solid var(--COLOR2);
    margin:0.8em;
    padding: 1em;
    box-shadow: var(--BOX_SHADOW);
    border-radius: 10px;
}  

/* Download notes menu button  */
.notes_menu button{
    background-color: hsl(190, 64%, 34%);
    border-radius: 1em;
    border:none;
    color:#fff;
    font-family: inherit;
    font-size: 0.8em;
    padding: 0.3em 1em;
    width:70%;
}
.notes_menu button:hover{
    background-color: hsl(190, 64%, 34%,0.8);
    color:white;
}
/* Managing the paddings for the items */
.cards h4, .cards h5{
    padding-bottom:0.5em;
}

.cards a{
    text-decoration:none;
    color: white;
}


/* The side selection panel  */
.sidebar{
    grid-area: sb;
    box-shadow: var(--BOX_SHADOW);
    border:2px solid var(--COLOR2);
    border-radius: 10px;
    padding:20px;
    height: fit-content;
}
.sidebar p{
    padding-top:1em;
}
.sidebar a{
    text-decoration: none;
    color: black;
}
.sidebar a:hover{
    color:var(--COLOR2);
    text-decoration: underline;
    transition:all 0.2s ease 0.02s;
}

.sidebar h4{
    margin-top: 1.5em;
    font-weight: bold;
    
}




/* FOr mobile devices  */
@media screen and (max-width: 600px) {
    .topbar{
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }
    .topbar img{
        display: none;
    };

    .main_menu{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "sb sb mn mn mn mn sb1 sb1";
    }
    .sidebar{
        display: none;
    }

    .notes_menu{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "hd"
        "bd";
        justify-content: center;
        align-items: center;
        margin-left: 2.5em;
        border: none;
        box-shadow: none;
    }

}