@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');



/* ------- VARIABLES ------- */
:root {
    --clr_base_000: #ffffff;
    --clr_base_100: #F8F7F7;
    --clr_base_200: #F0EEEA;
    --clr_base_300: #DCDAD6;
    --clr_base_400: #B6B3AC;
    --clr_base_500: #1259A1;
    --clr_base_700: #042649;
    --clr_base_800: #132639;
    --clr_base_900: #04121F;



    --clr_acad_car: #535353;
    --clr_acad_cer: #7B6E65;
    --clr_acad_eba: #9D5143;
    --clr_acad_esm: #517A50;
    --clr_acad_est: #625B84;
    --clr_acad_joy: #836740;
    --clr_acad_met: #606B76;
    --clr_acad_tex: #913D75;
    --clr_acad_vit: #507679;



    --clr_acad_car_100: #B3B3B3;
    --clr_acad_cer_100: #BAB1AB;
    --clr_acad_eba_100: #D19D94;
    --clr_acad_esm_100: #A4C3A2;
    --clr_acad_est_100: #A9A4C1;
    --clr_acad_joy_100: #CDB798;
    --clr_acad_met_100: #ABB3BA;
    --clr_acad_tex_100: #D293BD;
    --clr_acad_vit_100: #A3C0C2;



    --clr_acad_car_500: #919191;
    --clr_acad_cer_500: #977B68;
    --clr_acad_eba_500: #B4402C;
    --clr_acad_esm_500: #47AD43;
    --clr_acad_est_500: #6355B3;
    --clr_acad_joy_500: #C88C37;
    --clr_acad_met_500: #8E98A3;
    --clr_acad_tex_500: #BD308E;
    --clr_acad_vit_500: #3BA2AA;



    --rad: 0.5rem;

    --schedule_height: 10rem;
}









/* ------- NORMALIZATION ------- */
/* Global style normalization */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
*, *::after, *::before {box-sizing: border-box;}

/* Browser specific normalizations */
/* IE */
main {display: block;}


/* Spacing, padding and margin normalization */
body, nav, header, footer, div, section, img, button, a, p, h1, h2, h3, h4, h5, h6, li, ul, ol,
label, input, optgroup, select, textarea, small, hr {
    margin: 0rem;
    padding: 0rem;
}

/* Color and decoration normalization */
a {background-color: transparent;}
img {border-style: none;}
button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button; appearance: button;}
button, label {
    border-width: 0;
    border-style: none;
    cursor: pointer;
    background-color: transparent;
}

/* Font normalization */
b, strong {font-weight: bolder;}
small {font-size: 80%;}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
body, nav, header, footer, div, section, img, button, a, p, h1, h2, h3, h4, h5, h6, li, ul, ol,
label, input, optgroup, select, textarea {
    font-weight: 400;
    line-height: 130%;
}
body, nav, header, footer, div, section, img, button, a, p, li, ul, ol, label, input, optgroup, select, textarea {
    font-size: 1rem;
}









/* ------- CORE STYLING ------- */
body, nav, header, footer, div, section, img, button, a, p, h1, h2, h3, h4, h5, h6, li, ul, ol,
label, input, optgroup, select, textarea, small {
    font-family: "Noto Sans", Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, li, ol, ul, small, a, img, button {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body, nav, header, footer, div, section, img, button, a, p, h1, h2, h3, h4, h5, h6, li, ul, ol,
label, input, optgroup, select, textarea {
    color: var(--clr_base_800);
}

body {background-color: var(--clr_base_100)}

h1 {
    font-size: 2.75rem;
    font-weight: 300;
    padding-bottom: 1rem;
}

h2 {
    font-size: 1.7rem;
    font-weight: 300;
    padding-bottom: 1rem;
}

a {text-decoration: none;}

b {font-weight: 600;}

small {font-size: 0.85rem;}
strong {font-weight: 700;}

span {color: var(--clr_base_500);}









/* ------- CONTAINER STYLING ------- */
.cont_root {
    width: min(90%, 115rem);
    margin-inline: auto;
}

.cont_half {
    max-width: 50%;
}

.cont_grid_2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.cont_grid_3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.cont_flex_end {
    display: flex;
    align-items: end;
    justify-content: end;
}









/* ------- BUTTONS STYLING ------- */
.btn_main {
    display: flex;
    align-items: center;

    height: 3rem;
    padding-inline: 1rem;

    background-color: var(--clr_base_500);
    color: var(--clr_base_100);

    border-radius: var(--rad);
}









/* ------- UTILITY STYLING ------- */
.utils_spacer {
    margin-bottom: 7rem;
}

.grad_vert_car {
    background-image: linear-gradient(#53535300, #535353);
}

.grad_vert_cer {
    background-image: linear-gradient(#7B6E6500, #7B6E65);
}

.grad_vert_eba {
    background-image: linear-gradient(#9D514300, #9D5143);
}

.grad_vert_esm {
    background-image: linear-gradient(#517A5000, #517A50);
}

.grad_vert_est {
    background-image: linear-gradient(#625B8400, #625B84);
}

.grad_vert_joy {
    background-image: linear-gradient(#83674000, #836740);
}

.grad_vert_met {
    background-image: linear-gradient(#606B7600, #606B76);
}

.grad_vert_tex {
    background-image: linear-gradient(#913D7500, #913D75);
}

.grad_vert_vit {
    background-image: linear-gradient(#50767900, #507679);
}









/* ------- NAVBAR STYLING ------- */
nav {
    position: fixed;
    z-index: 10;

    background-color: var(--clr_base_900);

    height: 4rem;
    width: 100%;
    top: 0rem;
}









/* ------- TABLE VIEW STYLING ------- */
.table_view > div {
    display: grid;
    grid-template-columns: 2fr 5fr 5fr;
}

.table_view .table_header {
    margin-bottom: 1rem;
}

.table_view .table_header p {
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--clr_base_500);
}

.table_view .table_clear,
.table_view .table_shaded {
    padding-inline: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.table_view .table_clear > p:nth-child(1),
.table_view .table_shaded > p:nth-child(1) {
    color: var(--clr_base_500);
}

.table_view .table_shaded {
    background-color: var(--clr_base_300);
}









/* ------- LINER VIEW STYLING ------- */
.liner_view {
    position: relative;
    overflow: hidden;
}

.liner_view > img {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 0;
}

.liner_view .cont_root {
    position: relative;
    z-index: 2;
}

.liner_view .data_pod {
    margin-top: 5rem;
    margin-bottom: 5rem;
    margin-inline: auto;
    
    width: 50%;

    padding: 2rem;

    background-color: var(--clr_base_100);

    text-align: center;

    border-radius: 3rem;
}

.liner_view .data_pod p {
    margin-top: 1rem;
    margin-bottom: 2rem;
    margin-inline: auto;
    line-height: 150%;

    max-width: 80%;
}

.liner_view .data_pod .btn_main {
    display: inline-flex;
    margin-inline: 0.5rem;
}