/* ----------------------------------------------------------------------- Information section ---------------------------- */
#container {
    grid-column: 2/11;

    padding-right: 50px;
    
    overflow: hidden;
}

#container > div {
    overflow: auto;

    border-radius: 40px;
}

#container .files {
    width: 100%;
    height: auto;
    padding: 40px max(30%, 360px) 20px 40px;

    border-radius: 40px;
    background-color: var(--green);

    overflow: auto;
}

#container .files:nth-child(3) {
    background-color: var(--green_light);
}

#container .files h2 {
    color: var(--white);
    font-size: var(--font_xl);
    font-weight: 500;
    letter-spacing: 8px;

    margin-bottom: max(1.5vh, 15px);
}

#container .files:nth-child(3) h2 {
    color: var(--green_darker);
}

#container .notifi {
    display: flex;
    align-items: center;

    margin-bottom: 20px;

    background-color: var(--green_light);
    border-radius: 20px;
    cursor: pointer;
}

#container .notifi div:first-child {
    width: 8%;
}

#container .notifi h3 {
    line-height: 120%;
    color: var(--black);
}











/* -------------------------------------------------------------------- Design of calendar section -------------------------- */
.event_box {
    display: flex;

    width: 100%;
    padding-top: max(2vh, 20px);
    padding-left: max(2vw, 25px);
    margin-bottom: max(3vh, 30px);
}

.event {
    width: 80px;
    height: 90px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: var(--green_darker);
    border-radius: 20px;
}

.event span {
    font-weight: 400;
    font-size: var(--font_m);
    color: var(--white);
}

.event span:first-child {
    font-weight: 800;
    font-size: var(--font_l);

    margin-left: -4px;
}

.event_box .text {
    padding-left: 50px;
}

.event_box h3 {
    color: var(--green_darker);
    font-size: var(--font_l);

    margin-top: 5px;
    margin-bottom: 10px;
}

.event_box p {
    color: var(--black);
}

.event_box .text p:first-of-type {
    margin-bottom: 5px;
}










.information {
    width: 100%;
    height: auto;
    padding: 80px;

    border-radius: 40px;
}

.information h2 {
    margin-bottom: 20px;

    font-size: var(--font_xl);
    color: var(--green_darker);
}

.information div {
    padding: 0 40px;
    margin-bottom: max(4vh, 50px);
}

.information p {
    font-size: var(--font_m);
    line-height: 130%;

    margin-bottom: max(1.5vh, 15px);
}







/* ------------------------------------------------------------------------ Tablets --------------------------- */
@media screen and (min-width: 801px)  and (max-width: 1024px) and (orientation: portrait) {
    #container .files {
        width: 100%;
        padding: 20px;
    }

    #information_text_vertical :is(h1, h2, h3) {
        font-size: 6vh;
        letter-spacing: 8px;
    }

    #container h2, #container .files h2 {
        font-size: var(--font_xl);
        letter-spacing: 2px;
        line-height: 130%;
    }



    .information {
        padding: 20px;
    }

    .information div {
        padding: 0;
    }

    .information p {
        font-size: var(--font_s);
        line-height: 120%;
    }
}




/* ------------------------------------------------------------------------ Mobile --------------------------- */
@media screen and (max-width: 800px) and (orientation: portrait) {
    main {
        grid-template-columns: 15% 5% repeat(8, 10%);
    }

    #information_text_vertical {
        height: 90%;
    }

    #information_text_vertical :is(h1, h2, h3) {
        font-size: 4vh;
        letter-spacing: 4px;
    }

    #container {
        grid-column: 2/11;
        height: 100%;

        padding-right: 10px;
    }

    #container h2, #container .files h2 {
        font-size: var(--font_l);
        letter-spacing: 2px;
        line-height: 130%;
    }

    #container .files {
        width: 100%;
        padding: 20px;
    }

    #container .notifi {
        width: 100%;
    }

    #container .notifi div:first-child {
        width: 20%;
    }

    #container .notifi div:last-child {
        width: 80%;
    }

    #container .notifi h3 {
        font-size: var(--font_s);
    }




    .information {
        padding: 20px;
    }

    .information div {
        padding: 0;
    }

    .information p {
        font-size: var(--font_s);
        line-height: 120%;
    }





    .event_box {
        padding-top: 5px;
        padding-left: 5px;
        margin-bottom: 30px;
    }

    .event {
        width: 120px;
        height: 80px;
    }

    .event span {
        font-size: var(--font_s);
    }

    .event span:first-child {
        font-size: var(--font_m);
        margin-bottom: 2px;
    }

    .event_box .text {
        padding-left: 20px;
    }

    .event_box p {
        font-size: var(--font_s);
    }
}


@media screen and (max-width: 950px) and (orientation: landscape) {
    main {
        grid-template-columns: 5% 15% repeat(8, 10%);
    }

    #information_text_vertical {
        height: 100%;
    }

    #information_text_vertical :is(h1, h2, h3) {
        font-size: 6vh;
        letter-spacing: 2px;
    }

    #container {
        grid-column: 2/11;
        height: 100%;

        padding-right: 10px;
    }

    #container h2, #container .files h2 {
        font-size: var(--font_l);
        letter-spacing: 2px;
        line-height: 130%;
    }

    #container .files {
        width: 100%;
        padding: 20px;
    }

    #container .notifi {
        width: 100%;
    }

    #container .notifi div:first-child {
        width: 10%;
    }

    #container .notifi div:last-child {
        width: 90%;
    }

    #container .notifi h3 {
        font-size: var(--font_s);
    }





    .information {
        padding: 20px;
        padding-right: 40px;
    }

    .information div {
        padding: 0;
    }

    .information p {
        font-size: var(--font_s);
        line-height: 120%;
    }
}