html {
    font-size: 16px;
}
body {
    width: 100%;
    height: 900px;
    font-size: 18px;
    overflow-x: hidden;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
a {
    color: white;
    text-decoration: none;
}
header {
    height: 12.5vh;
    background-color: #A06535;
    display: flex;
    justify-content: center;
    align-items: center;
}
nav {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 55%;
    justify-content: center;
    align-items: center;
}
footer {
    width:100%;
    height: 200px;
    margin-top: 60px;
    background-color: #A06535;
    display: flex;
    justify-content: center;
    align-items: center;
}
div {
    width: 100%;
}

/* nav classes ---------------------------------------------------------------------------------- */
.hamburger-icon {
    cursor: pointer;
}
.hamburger-menu {
    width: 50vw;
    height: 100vh;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    background-color: #A06535;
    position: absolute;
    top: 12vh;
    right: 100vw;
    transform: translateX(0vh);
    z-index: 1;

    a {
        transition: all 0.25s ease-in-out;

        &:hover {
            color: #FFFFAE;
        }
    }
}
.nav-item {
    border-bottom: white 2.5px solid;
    margin: 10px 0 0 10px;
    font-size: 1.6em;
}
.logo {
    width: 15%;
    height: 90%;
    background: url(../images/pieces_logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.btn {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #E6B363;
    filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.322));
    transition: all 0.15s ease-in-out;

    &:hover {
        background-color: #E69517;
    }
}

/* home flex ------------------------------------------------------------------------- */
.home-flex {
    width: 90%;
    margin: 0 5% 0 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wordmark {
    width: 100%;
    height: 300px;
    margin-bottom: 15px;
    background: url(../images/pieces_wordmark.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.paragraph-image {
    justify-content: space-between;
    margin-bottom: 5px;
    
    @media (max-width: 768px) {
        flex-direction: column;
    }
}
.home-image1 {
    height: 300px;
    margin-bottom: 15px;
    border-radius: 5px;
    display: inline-block;
    background: url(../images/1.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.home-image2 {
    height: 300px;
    margin-bottom: 15px;
    border-radius: 5px;
    display: inline-block;
    background: url(../images/2.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.home-image3 {
    height: 300px;
    margin-bottom: 15px;
    border-radius: 5px;
    display: inline-block;
    background: url(../images/3.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.home-image4 {
    height: 300px;
    margin-bottom: 15px;
    border-radius: 5px;
    display: inline-block;
    background: url(../images/4.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* shop ----------------------------------------------------------------------------- */
.shop-flex {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.product {
    min-width: 100%;
    min-height: 40vh;
    padding-left: 5%;
    margin-bottom: 30px;
    display: flex;
    align-items: end;
}
.product-description {
    width: 50%;
    padding: 10px 20px;
    margin-bottom: 6%;
    border-radius: 30px;
    background-color: white;
    color: black;

    .btn {
        display: inline-block;
    }
}
.product:nth-of-type(1) {
    background: url(../images/classic.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.product:nth-of-type(2) {
    background: url(../images/glass.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.product:nth-of-type(3) {
    background: url(../images/wood.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* puzzles -------------------------------------------------------------------------- */
.puzzle-flex {
    width: 90%;
    margin: 0 5% 0 5%;
    display: flex;
    flex-direction: column;
    align-items: center;

    h2 {
        text-align: center;
    }
}

/* puzzle page ------------------------------------------------------ */
.puzzlepage-flex {
    width: 90%;
    margin: 0 5% 0 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.puzzlepage-flexchild {
    text-align: center;
}
.puzzle-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.puzzle1 {
    width: 50vh;
    height: 50vh;
    margin-bottom: 20px;

    div {
        display: grid;
        grid-template-columns: 6.25vh 6.25vh 6.25vh 6.25vh 6.25vh 6.25vh 6.25vh 6.25vh;
        grid-template-rows: 6.25vh;
        border-radius: 5px;

        div {
            position: relative;

            p {
                position: absolute;
                bottom: 0.5vh;
                right: 1vh;
                color: rgb(44, 44, 44);
            }
        }

        div:nth-of-type(even) {
            background-color: #FFFFAE;
        }
        div:nth-of-type(odd) {
            background-color: #A06535;
        }
        &:nth-of-type(odd) {
            div:nth-of-type(odd) {
                background-color: #FFFFAE;
            }
            div:nth-of-type(even) {
                background-color: #A06535;
            }
        }
    }
    div::after {
        background-position: center;
        background-repeat: no-repeat;
    }
    .pawn::after {
        content: "";
        margin: 1.5vh;
        background-image: url("../svg/pawn.svg");
    }
    .bishop::after {
        content: "";
        margin: 1vh;
        background-image: url("../svg/bishop.svg");
    }
    .rook::after {
        content: "";
        margin: 1vh;
        background-image: url("../svg/rook.svg");
    }
    .queen::after {
        content: "";
        margin: 1vh;
        background-image: url("../svg/queen.svg");
    }
    .king::after {
        content: "";
        margin: 1vh;
        background-image: url("../svg/king.svg");
    }
    .black::after {
        filter: invert();
    }
    .white {
        cursor: pointer;
    }
    .played-from::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #ffe865;
    }
    .played-to::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #ffca38;
    }
    .legal-move::before {
        content: "";
        position: absolute;
        z-index: 99;
        width: 40%;
        height: 40%;
        align-self: center;
        justify-self: center;
        border-radius: 100px;
        background-color: grey;
    }
}

/* openings --------------------------------------------------------------------------------- */
.openings-flex {
    width: 90%;
    margin: 0 5% 0 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.search-bar {
    height: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.search-bar input {
    height: 50%;
    width: 40%;
}
.openings-slide1 {
    width: 100%;
    height: fit-content;
    margin: 30px;
    display: flex;
    gap: 5%;
    overflow-x: scroll;
}
.openings-slide2 {
    width: 100%;
    height: fit-content;
    margin: 30px;
    display: flex;
    gap: 5%;
    overflow-x: scroll;
}
.variant-flex {
    width: 246px;
    height: 459px;
    display: flex;
    flex-direction: column;
}

.openings-slide1 .variant-flex:nth-child(1) .variant {
    min-width: 258px;
    min-height: 258px;
    margin-bottom: 15px;
    background: url(../images/d4.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.openings-slide1 .variant-flex:nth-child(2) .variant {
    min-width: 258px;
    min-height: 258px;
    margin-bottom: 15px;
    background: url(../images/d5.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.openings-slide1 .variant-flex:nth-child(3) .variant {
    min-width: 258px;
    min-height: 258px;
    margin-bottom: 15px;
    background: url(../images/bxf4.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.openings-slide2 .variant-flex:nth-child(1) .variant {
    min-width: 258px;
    min-height: 258px;
    margin-bottom: 15px;
    background: url(../images/e4.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.openings-slide2 .variant-flex:nth-child(2) .variant {
    min-width: 258px;
    min-height: 258px;
    margin-bottom: 15px;
    background: url(../images/d6.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.openings-slide2 .variant-flex:nth-child(3) .variant {
    min-width: 258px;
    min-height: 258px;
    margin-bottom: 15px;
    background: url(../images/e4xd4.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.openings-slide2 .variant-flex:nth-child(4) .variant {
    min-width: 258px;
    min-height: 258px;
    margin-bottom: 15px;
    background: url(../images/nxf6.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.openings-slide2 .variant-flex:nth-child(5) .variant {
    min-width: 258px;
    min-height: 258px;
    margin-bottom: 15px;
    background: url(../images/nxc3.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.openings-slide2 .variant-flex:nth-child(6) .variant {
    min-width: 258px;
    min-height: 258px;
    margin-bottom: 15px;
    background: url(../images/g6.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.openings-slide2 .variant-flex:nth-child(7) .variant {
    min-width: 258px;
    min-height: 258px;
    margin-bottom: 15px;
    background: url(../images/f4.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
/* contact ----------------------------------------------------------------------------- */
.contact-flex {
    width: 90%;
    height: 900px;
    margin: 0 5% 0 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contact-section {
    display: flex;
    flex-direction: column;
}
.user-message {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
}
.email-input {
    height: 1.4em;
    font-size: 1.11em;
    border-radius: 0;
    border: #A06535 solid 3px;
    border-bottom: 0px;
}
.subject-input {
    height: 1.4em;
    font-size: 1.11em;
    border-radius: 0;
    border: #A06535 solid 3px;
    border-bottom: 0px;
}
.content-input {
    height: 20vh;
    font-size: 1.11em;
    border-radius: 0;
    border: #A06535 solid 3px;
}
.company-info h3 {
    margin-bottom: 15px;
}
.company-info p {
    text-decoration: underline;
    margin-bottom: 30px;
}

/* font sizes ---------------------------------------------------------------- */
h1 {
    font-weight: 700;
    font-size: 3.56em;
    margin-bottom: 30px;
    margin-top: 12px;
}
h2 {
    font-weight: 700;
    font-size: 2.67em;
    margin-bottom: 15px;
}
h3 {
    font-weight: 700;
    font-size: 1.33em;
    margin-bottom: 5px;
}
p {
    margin-bottom: 10px;
    font-size: 1.11em;
}
.paragraph-image div {
    font-size: 1.11em;
    margin-bottom: 15px;
    margin-right: 2.5%;
}

/* tablet ----------------------------------------------------------------------------------------------- */
@media (min-width: 768px) {
    nav {
        width: 100%;
        height: 100%;
        display: flex;
        gap: 5%;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
    }
    footer {
        width:100%;
        height: 200px;
        background-color: #A06535;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* nav classes ---------------------------------------------------------------------------------- */
    .hamburger-icon {
        cursor: pointer;
        display: none;
    }
    .hamburger-menu {
        width: fit-content;
        height: fit-content;
        padding-top: 0;
        display: flex;
        flex-direction: row;
        background-color: #a0653500;
        position:relative;
        top: 0;
        right: 0;
    }
    .nav-item {
        border-bottom: 0px;
        margin: 0 20px 0 0;
        font-size: 1.33em;
    }
    .nav-item:nth-child(5) {
        margin: 0 0 0 0;
        font-size: 1.33em;
    }
    .logo {
        width: 30%;
        height: 90%;
        margin-left: 0;
        background: url(../images/pieces_wordmark.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    
    /* home flex ------------------------------------------------------------------------- */
    .home-flex {
        width: 90%;
        margin: 0 5% 0 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .wordmark {
        width: 100%;
        height: 300px;
        margin-bottom: 15px;
        background: url(../images/pieces_wordmark.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .paragraph-image {
        justify-content: space-between;
        width: 100%;
        height: 20%;
        display: flex;
        flex-direction: row;
    }
    .home-image1 {
        height: 300px;
        width: 50%;
        border-radius: 5px;
        display: inline-block;
        background: url(../images/1.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .home-image2 {
        height: 300px;
        width: 50%;
        border-radius: 5px;
        display: inline-block;
        background: url(../images/2.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .home-image3 {
        height: 300px;
        width: 50%;
        border-radius: 5px;
        display: inline-block;
        background: url(../images/3.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .home-image4 {
        height: 300px;
        width: 50%;
        border-radius: 5px;
        display: inline-block;
        background: url(../images/4.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    /* shop ----------------------------------------------------------------------------- */
    .shop-flex {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .product {
        min-width: 100%;
        min-height: 45vh;
        padding-left: 5%;
        margin-bottom: 30px;
        display: flex;
        align-items: end;
        background-color: #A06535;
    }
    .product-description {
        width: 37.5%;
        margin-bottom: 6%;
    }

    /* puzzles -------------------------------------------------------------------------- */
    .puzzle-flex {
        width: 90%;
        margin: 0 5% 0 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* puzzle page ---------------------------------- */
    .puzzlepage-flex {
        width: 90%;
        margin: 0 5% 0 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .puzzle1 {
        width: 60vh;
        height: 60vh;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-bottom: 20px;

        div {
            display: grid;
            grid-template-columns: 7.5vh 7.5vh 7.5vh 7.5vh 7.5vh 7.5vh 7.5vh 7.5vh;
            grid-template-rows: 7.5vh;
        }
    }

    /* openings --------------------------------------------------------------------------------- */
    .openings-flex {
        width: 90%;
        margin: 0 5% 0 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .openings-slide {
        width: 105%;
        height: fit-content;
        margin: 30px;
        display: flex;
        gap: 5%;
        overflow-x: scroll;
    }
    .variant-flex {
        display: flex;
        flex-direction: column;
    }
    
    .openings-slide1 .variant-flex:nth-child(1) .variant {
        min-width: 246px;
        min-height: 246px;
        margin-bottom: 15px;
        background: url(../images/d4.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide1 .variant-flex:nth-child(2) .variant {
       min-width: 246px;
        min-height: 246px;
        margin-bottom: 15px;
        background: url(../images/d5.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide1 .variant-flex:nth-child(3) .variant {
        min-width: 246px;
        min-height: 246px;
        margin-bottom: 15px;
        background: url(../images/bxf4.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    
    .openings-slide2 .variant-flex:nth-child(1) .variant {
       min-width: 246px;
        min-height: 246px;
        margin-bottom: 15px;
        background: url(../images/e4.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide2 .variant-flex:nth-child(2) .variant {
        min-width: 246px;
        min-height: 246px;
        margin-bottom: 15px;
        background: url(../images/d6.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide2 .variant-flex:nth-child(3) .variant {
        min-width: 246px;
        min-height: 246px;
        margin-bottom: 15px;
        background: url(../images/e4xd4.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide2 .variant-flex:nth-child(4) .variant {
        min-width: 246px;
        min-height: 246px;
        margin-bottom: 15px;
        background: url(../images/nxf6.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide2 .variant-flex:nth-child(5) .variant {
        min-width: 246px;
        min-height: 246px;
        margin-bottom: 15px;
        background: url(../images/nxc3.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide2 .variant-flex:nth-child(6) .variant {
        min-width: 246px;
        min-height: 246px;
        margin-bottom: 15px;
        background: url(../images/g6.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide2 .variant-flex:nth-child(7) .variant {
        min-width: 246px;
        min-height: 246px;
        margin-bottom: 15px;
        background: url(../images/f4.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* contact ----------------------------------------------------------------------------- */
    .contact-flex {
        width: 90%;
        margin: 0 5% 0 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .contact-section {
        display: flex;
        flex-direction: row;
        gap: 5%;
    }
    .user-message {
        width: 60%;
        display: flex;
        flex-direction: column;
        margin-bottom: 50px;
    }
    .email-input {
        height: 1.4em;
        font-size: 1.11em;
        border-radius: 0;
        border: #A06535 solid 3px;
        border-bottom: 0px;
    }
    .subject-input {
        height: 1.4em;
        font-size: 1.11em;
        border-radius: 0;
        border: #A06535 solid 3px;
        border-bottom: 0px;
    }
    .content-input {
        height: 40vh;
        font-size: 1.11em;
        border-radius: 0;
        border: #A06535 solid 3px;
    }
    .company-info {
        width: 35%;
    }
    .company-info h3 {
        margin-bottom: 15px;
    }
    .company-info p {
        text-decoration: underline;
        margin-bottom: 30px;
    }

    /* font sizes ---------------------------------------------------------------- */
    h1 {
        font-weight: 700;
        font-size: 3.56em;
        margin-bottom: 30px;
        margin-top: 12px;
    }
    h2 {
        font-weight: 700;
        font-size: 2.67em;
        margin-bottom: 15px;
    }
    h3 {
        font-weight: 700;
        font-size: 1.33em;
        margin-bottom: 5px;
    }
    p {
        font-size: 1.11em;
    }
    .paragraph-image div {
        width: 50%;
        font-size: 1.11em;
        margin-bottom: 15px;
        margin-right: 2.5%;

        p {
            margin-bottom: 30px;
        }
    }
}

/* Desktop ---------------------------------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    nav {
        width: 100%;
        height: 100%;
        display: flex;
        gap: 20%;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
    }
    footer {
        width:100%;
        height: 200px;
        background-color: #A06535;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* nav classes ---------------------------------------------------------------------------------- */
    .hamburger-icon {
        cursor: pointer;
        display: none;
    }
    .hamburger-menu {
        width: fit-content;
        height: fit-content;
        padding-top: 0;
        display: flex;
        flex-direction: row;
        background-color: #a0653500;
        position:relative;
        top: 0;
        right: 0;
    }
    .nav-item {
        border-bottom: white 0px solid;
        margin: 0 20px 0 0;
        font-size: 1.33em;
    }
    .nav-item:nth-child(5) {
        margin: 0 0 0 0;
        font-size: 1.33em;
    }
    .logo {
        width: 30%;
        height: 90%;
        margin-left: 0;
        background: url(../images/pieces_wordmark.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    
    /* home flex ------------------------------------------------------------------------- */
    .home-flex {
        width: 75%;
        margin: 0 5% 0 5%;
        padding: 0 7.5% 0 7.5%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .wordmark {
        width: 100%;
        height: 300px;
        margin-bottom: 15px;
        background: url(../images/pieces_wordmark.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .paragraph-image {
        justify-content: space-between;
        width: 100%;
        height: 20%;
        display: flex;
        flex-direction: row;
    }
    .home-image1 {
        height: 300px;
        width: 50%;
        border-radius: 5px;
        display: inline-block;
        background: url(../images/1.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .home-image2 {
        height: 300px;
        width: 50%;
        border-radius: 5px;
        background: url(../images/2.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .home-image3 {
        height: 300px;
        width: 50%;
        border-radius: 5px;
        background: url(../images/3.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .home-image4 {
        height: 300px;
        width: 50%;
        border-radius: 5px;
        background: url(../images/4.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    /* shop ----------------------------------------------------------------------------- */
    .shop-flex {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .product {
        min-width: 100%;
        min-height: 60vh;
        padding-left: 5%;
        margin-bottom: 30px;
        display: flex;
        align-items: end;
        background-color: #A06535;
    }
    .product-description {
        width: 25%;
        margin-bottom: 6%;
    }

    /* puzzles -------------------------------------------------------------------------- */
    .puzzle-flex {
        width: 90%;
        margin: 0 5% 0 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* puzzle page ---------------------------------- */
    .puzzlepage-flex {
        width: 90%;
        margin: 0 5% 0 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .puzzle1 {
        width: 75vh;
        height: 75vh;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-bottom: 20px;

        div {
            display: grid;
            grid-template-columns: 9.375vh 9.375vh 9.375vh 9.375vh 9.375vh 9.375vh 9.375vh 9.375vh;
            grid-template-rows: 9.375vh;
        }
    }

    /* openings --------------------------------------------------------------------------------- */
    .openings-flex {
        width: 90%;
        margin: 0 5% 0 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .openings-slide {
        width: 105%;
        height: fit-content;
        margin: 30px;
        display: flex;
        gap: 5%;
        overflow-x: scroll;
    }
    .variant-flex {
        display: flex;
        flex-direction: column;
    }
    .openings-slide1 .variant-flex:nth-child(1) .variant {
        min-width: 255px;
        min-height: 255px;
        margin-bottom: 15px;
        background: url(../images/d4.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide1 .variant-flex:nth-child(2) .variant {
        min-width: 255px;
        min-height: 255px;
        margin-bottom: 15px;
        background: url(../images/d5.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide1 .variant-flex:nth-child(3) .variant {
        min-width: 255px;
        min-height: 255px;
        margin-bottom: 15px;
        background: url(../images/bxf4.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    
    .openings-slide2 .variant-flex:nth-child(1) .variant {
        min-width: 255px;
        min-height: 255px;
        margin-bottom: 15px;
        background: url(../images/e4.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide2 .variant-flex:nth-child(2) .variant {
        min-width: 255px;
        min-height: 255px;
        margin-bottom: 15px;
        background: url(../images/d6.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide2 .variant-flex:nth-child(3) .variant {
        min-width: 255px;
        min-height: 255px;
        margin-bottom: 15px;
        background: url(../images/e4xd4.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide2 .variant-flex:nth-child(4) .variant {
        min-width: 255px;
        min-height: 255px;
        margin-bottom: 15px;
        background: url(../images/nxf6.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide2 .variant-flex:nth-child(5) .variant {
        min-width: 255px;
        min-height: 255px;
        margin-bottom: 15px;
        background: url(../images/nxc3.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide2 .variant-flex:nth-child(6) .variant {
        min-width: 255px;
        min-height: 255px;
        margin-bottom: 15px;
        background: url(../images/g6.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .openings-slide2 .variant-flex:nth-child(7) .variant {
        min-width: 255px;
        min-height: 255px;
        margin-bottom: 15px;
        background: url(../images/f4.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* font sizes ---------------------------------------------------------------- */
    h1 {
        font-weight: 700;
        font-size: 3.56em;
        margin-bottom: 30px;
        margin-top: 12px;
    }
    h2 {
        font-weight: 700;
        font-size: 2.67em;
        margin-bottom: 15px;
    }
    h3 {
        font-weight: 700;
        font-size: 1.33em;
        margin-bottom: 5px;
    }
    p {
        font-size: 1.11em;
    }
    .paragraph-image div {
        width: 50%;
        font-size: 1.11em;
        margin-bottom: 15px;
        margin-right: 2.5%;

        p {
            margin-bottom: 30px;
        }
    }
}