* {
        box-sizing: border-box;
    }

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;

    gap: 8px;
}

/* MAIN BOX */
    .main {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;

        height: 100vh;
        padding: 2vh 0px 2vh 2vh;
        max-width: 1180px;

        gap: 8px;

    }

    /* MAIN CONTENT */
    .sidebar {
        width: 18%;
    }

    .sidebar-embed {
        height: 96vh;
        width: 100%;
    }

    .content {
        width: 80%;
        height: 96vh;
        overflow: auto;
        scroll-snap-type: y mandatory;
        scroll-padding: 0px;
    }

    .content-item {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;

        gap: 8px;

        height: 96vh;
        scroll-snap-align: start;
    }

/* SIDE BOX */

    .side {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        padding: 2vh 2vh 2vh 0px;
        width: auto;

        gap: 8px;

    }

/* WRAPPERS */
    .wrapper-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        gap: 8px;
    }

    .wrapper-content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        width: 100%;

        gap: 16px;
    }

    .flex-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        justify-content: space-between;

    }

    .flex-column {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;

        gap: 8px;

    }

/* BOX SIZES */
    .s15 {
        width: 10%;
        flex-grow: 1;
    }

    .s20 {
        width: 15%;
        flex-grow: 1;
    }

    .s25 {
        width: 20%;
        flex-grow: 1;
    }

    .s30 {
        width: 25%;
        flex-grow: 1;
    }

    .s35 {
        width: 30%;
        flex-grow: 1;
    }

    .s40 {
        width: 35%;
        flex-grow: 1;
    }

    .s45 {
        width: 40%;
        flex-grow: 1;
    }

    .s50 {
        display: flex;
        align-content: stretch;
        flex-wrap: wrap;

        gap: 8px;

        width: 45%;
        flex-grow: 1;
    }

    .s55 {
        width: 50%;
        flex-grow: 1;
    }

    .s60 {
        width: 55%;
        flex-grow: 1;
    }

    .s65 {
        width: 60%;
        flex-grow: 1;
    }

    .s70 {
        width: 65%;
        flex-grow: 1;
    }

    .s75 {
        width: 70%;
        flex-grow: 1;
    }

    .s80 {
        width: 75%;
        flex-grow: 1;
    }

    .s85 {
        width: 80%;
        flex-grow: 1;
    }

    .s100 {
        width: 100%;
    }

@media screen and (max-width: 850px) {

    .container {
        height: auto;
        width: 100%;
        padding: 0;
    }

    .main {
        height: auto;
        width: 100%;
        padding: 1vh;
    }

    .side {
        width: 100%;
        padding: 1vh;
    }

    .sidebar {
        width: 100%;
    }

    .sidebar-embed {

        height: 200px
    }

    .content {
        width: 100%;
    }

    .content-item {
        height: auto;
    }

    .flex-column {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

       justify-content: space-between;
       align-content: space-between;

    }

    .s15 {
        width: 100%;
    }

    .s20 {
        width: 100%;
    }

    .s25 {
        width: 100%;
    }

    .s30 {
        width: 100%;
    }

    .s35 {
        width: 100%;
    }

    .s40 {
        width: 100%;
    }

    .s45 {
        width: 100%;
    }

    .s50 {
        width: 100%;
    }

    .s55 {
        width: 100%;
    }

    .s60 {
        width: 100%;
    }

    .s65 {
        width: 100%;
    }

    .s70 {
        width: 100%;
    }

    .s75 {
        width: 100%;
    }

    .s80 {
        width: 100%;
    }

    .s85 {
        width: 100%;
    }


}