h1 {
    color: rgb(7, 7, 242);
    font-size: 40px;
    font-family: monospace;
    text-align: center;
}

html {
    height: 100vh;
}

body {
    min-height: 100vh;
}

h1,
h2,
h3,
p,
strong {
    font-family: 'Libre Franklin', sans-serif;
    font-style: normal;
    font-weight: 800;
}

figure {
    margin: 0;
    padding: 0;
}

.figcaption {
    font-size: 1.2 rem;
    padding: 0.5rem;
    background-color: rgb(240, 248, 255);
    position: absolute;
    bottom: 2rem;
    right: 2rem;
}

img {
    width: 90%;
    height: auto;
    display: block;
}

img-boexli {
    width: 100%;
    height: auto;
    display: block;
}

.container {
    background: rgb(203, 198, 189);
    width: 90%;
    height: 100vh;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
}

.article8_sidebar {
    background-color: rgb(238, 255, 255);
    width: 20%;
    flex: 1 1 100%;
    padding: 10px;
    box-sizing: border-box;
    margin-right: 20px;
    align-self: stretch;
    hyphens: auto;
    word-break: break-all;
}

.article8a_header {
    background-color: rgb(255, 244, 255);
    width: auto;
    height: 10%;
    flex: 1 1 auto;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}


.article8a_header figure {
    width: 150px;
}

article {
    width: 33%
}

h3 {
    width: 100%
}

.wrapper {
    background-color: rgb(234, 247, 180);
    width: 75%;
    height: 80%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.boexli2 {
    background-color: rgb(229, 224, 105);
    width: 30%;
    height: 90%;
    padding: 5px;
}

.boexli3 {
    background-color: rgb(242, 212, 144);
    width: 30%;
    height: auto;
    padding: 5px;
}

.boexli4 {
    background-color: rgb(216, 151, 63);
    width: 30%;
    height: auto;
    padding: 5px;
}

.article8c_footer {
    background-color: rgb(222, 248, 217);
    height: 10%;
    flex: 1 1 auto;
    padding: 10px;
    box-sizing: border-box;
    width: 75%
}

@media (max-width: 840px) {

    .container {
        flex-wrap: nowrap;
        height: auto;
    }

    .article8_sidebar,
    article8a_header {
        width: 100%;
        box-sizing: border-box;
    }

    .wrapper {
        width: 100%;
        height: 50% display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .boexli2,
    .boexli3,
    .boexli4 {
        flex-basis: 40%;
        flex-grow: 1;
        flex-shrink: 1;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .article8c_footer {
        width: 100%
    }

    .article8a_header {
        order: 1;
    }

    .article8_sidebar {
        order: 2;
    }

    .wrapper {
        order: 3;
    }

    .boexli2 {
        order: 4;
    }

    .boexli3 {
        order: 5;
    }

    .boexli4 {
        order: 6;
    }

    .article8c_footer {
        order: 7;
    }
}

@media (max-width: 400px) {

    .container {
        flex-wrap: nowrap;
        height: auto;
    }

    .article8_sidebar,
    article8a_header {
        width: 100%;
        box-sizing: border-box;
    }

    .wrapper {
        flex-direction: column;
        height: auto;
        justify-content: space-between;
    }

    .boexli2,
    .boexli3,
    .boexli4 {
        width: 97%;
        margin-bottom: 10px;
    }


    .article8a_header {
        order: 1;
    }

    .article8_sidebar {
        order: 2;
    }

    .wrapper {
        order: 3;
    }

    .boexli2 {
        order: 4;
    }

    .boexli3 {
        order: 5;
    }

    .boexli4 {
        order: 6;
    }

    .article8c_footer {
        order: 7;
    }