/* ----------------------------------------------------------------------- Container section ---------------------------- */
#container {
    grid-column: 1/11;
    grid-row: 3/11;

    padding: 25px 25px 15px;
    
    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);
}

#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);
}

#container .link {
    padding-left: 20px;
}

#container .link a {
    font-size: var(--font_l);
    color: var(--green_light);
}





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

    border-radius: 40px;
}

#container .information h2 {
    margin-bottom: 20px;

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

#container .information div {
    padding: 0 40px;
}

#container .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) {
    main {
        overflow: hidden;
    }

    #container .files {
        padding: 20px;
    }

    #container .notifi {
        padding: 15px;
    }

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

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

    #container .link a {
        font-size: var(--font_m);
    }



    #container .information {
        padding: 30px 15px;
    }

    #container .information h2 {
        margin-bottom: 30px;
        font-size: var(--font_l);
    }

    #container .information div {
        padding: 0;
    }

    #container .information p {
        font-size: calc(var(--font_s) + 2px);
        line-height: 140%;
    }
}

@media screen and (min-width: 951px) and (max-width: 1368px) and (orientation: landscape) {
    #container .files {
        padding: 30px;
    }

    #container .notifi {
        padding: 5px;
    }

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

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

    #container .link a {
        font-size: var(--font_m);
    }



    #container .information {
        padding: 30px 15px;
    }

    #container .information h2 {
        margin-bottom: 30px;
        font-size: var(--font_l);
    }

    #container .information div {
        padding: 0;
    }

    #container .information p {
        font-size: calc(var(--font_s) + 2px);
        line-height: 140%;
    }
}




/* ------------------------------------------------------------------------ Mobile --------------------------- */
@media screen and (max-width: 800px) and (orientation: portrait) {
    main {
        overflow: hidden;
    }

    #container .files {
        padding: 20px;
    }

    #container .notifi {
        padding: 10px;
    }

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

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

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

    #container .link {
        padding-left: 0;
    }

    #container .link a {
        font-size: var(--font_m);
    }





    #container .information {
        padding: 40px 5px;
    }

    #container .information h2 {
        margin-bottom: 30px;
        font-size: var(--font_l);
    }

    #container .information div {
        padding: 0;
    }

    #container .information p {
        font-size: calc(var(--font_s) + 2px);
        line-height: 140%;
    }
}

@media screen and (max-width: 950px) and (orientation: landscape) {
    #container .files {
        padding: 20px;
    }

    #container .notifi {
        padding: 5px;
    }

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

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

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

    #container .link {
        padding-left: 10px;
    }

    #container .link a {
        font-size: var(--font_s);
    }




    #container .information {
        padding: 20px 20px;
    }

    #container .information h2 {
        margin-bottom: 30px;
        font-size: var(--font_l);
    }

    #container .information div {
        padding: 0;
    }

    #container .information p {
        font-size: calc(var(--font_s) + 2px);
        line-height: 140%;
    }
}