::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #2a4872;
    background: linear-gradient(180deg, #315e9e, #2a3647);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #3971c0, #293d58);
    cursor: pointer;
}

/*############*/
/*## MOBILE ##*/
/*############*/

body {
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    max-width: 1440px;
    margin: 0 auto;
}

#headerContainer {
    grid-row: 1 / 2;
}

#menuContainer {
    grid-row: 3 / 4;
}

#contentContainer {
    grid-row: 2 / 3;
    overflow-y: auto;
    box-shadow: var(--shadow-top-inset);
}

/*#############*/
/*## DESKTOP ##*/
/*#############*/

/* @media (768px < width) { */
@media (1010px < width) {
    body {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto 1fr;
    }

    #headerContainer {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    
    #menuContainer {
        grid-column: 1 / 2;;
        grid-row: 1 / 3;
    }
    
    #contentContainer {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

}