@font-face {
    font-family: "Snell Roundhand W01 Script";
    src: url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.eot");
    src:
        url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.eot?#iefix")
            format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.woff2")
            format("woff2"),
        url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.woff")
            format("woff"),
        url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.ttf")
            format("truetype"),
        url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.svg#Snell Roundhand W01 Script")
            format("svg");
}

@font-face {
    font-family: "lulo-one", sans-serif;
    font-weight: 700;
    font-style: normal;
    src: url(https://use.typekit.net/znp3hac.css);
}

:root {
    --color-bg-light: rgb(247, 246, 240); /* alabaster */
    --color-text-light: #0a7b5fff; /* viridian */
    --color-accent-light: #f3a3c6ff; /* carnation pink */
    --color-bg-dark: rgb(208, 191, 168); /* khaki */
    --color-text-dark: #264e43ff; /* brunswick green */
    --color-accent-dark: #ee343dff; /* imperial red */
    --title-font: "Snell Roundhand W01 Script", cursive;
    --logo-font: "lulo-one", sans-serif;
    --body-font: "Poppins", sans-serif;
}

@media only screen and (max-width: 368px) {
    * {
        background-color: var(--color-bg-light);
        scrollbar-width: none;
        cursor: default;
    }

    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 50px 1fr 50px;
        justify-content: center;
        align-items: center;
        grid-area: "header" "main" "footer";
        background-color: var(--color-bg-light);
        padding: 0;
        margin: 0;
    }

    .container {
        grid-area: main;
        height: 70vh;
        margin: 0 auto;
        background-image: url(/images/galbo-socks.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 10px 15px 10px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 0.75em;
    }

    .titel {
        font-size: 1.5em;
        background-color: transparent;
        color: var(--color-text-dark);
        text-align: center;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.5em;
    }

    h1 {
        font-family: var(--title-font);
        color: var(--color-bg-light);
        font-weight: 200;
        background-color: transparent;
        text-align: center;
        padding: 10px 0;
        margin: 0 0 10px 0;
    }

    .tekst {
        background-color: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1em;
        text-align: center;
    }

    .hptxt {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 0.5em;
        font-family: var(--logo-font);
        padding: 10px 0;
        margin: 0;
        font-weight: normal;
        text-align: center;
    }

    #btn {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 0.75em;
        font-family: var(--logo-font);
        text-decoration: none;
        font-weight: 400;
        padding: 0 3em;
        overflow: hidden;
        border-radius: 50px;
    }

    #btnhome {
        background: transparent;
        position: relative;
        padding: 4px 0 2px 0;
        display: flex;
        align-items: center;
        font-size: 0.8em;
        cursor: pointer;
        border: 1px solid var(--color-bg-light);
        border-radius: 50px;
        transition: color 0.3s 0.1s ease-out;
        text-align: center;
        margin: 10px 0 0 0;
    }

    #btnhome:hover {
        border: 1px solid var(--color-bg-light);
        background-color: var(--color-bg-light);
        opacity: 75%;
    }

    #btn:hover {
        color: var(--color-text-dark);
        opacity: 100%;
    }

    .collections {
        text-align: center;
        margin: 30px 10px;
        padding: 0;
    }

    .collection-gallery img {
        object-fit: cover;
        height: auto;
        width: 100%;
    }

    .pp-txt-products {
        font-size: 2em;
        font-weight: bold;
        font-family: var(--title-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .pptxt-products {
        font-size: 0.75em;
        font-weight: 200;
        font-family: var(--body-font);
        color: var(--color-text-dark);
        text-align: justify;
        text-justify: newspaper;
        padding: 0 55px;
        margin: 0;
        line-height: 1.5em;
    }

    .products {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30px 0 35px 0;
        margin: 0 0 0 0;
        gap: 25px;
    }

    h2 {
        font-size: 1em;
        font-weight: bold;
        font-family: var(--logo-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 25px;
        margin: 0;
        letter-spacing: 0.5em;
        border: none;
        word-wrap: break-word;
    }

    h3 {
        font-size: 0.85em;
        font-weight: 700;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-text-dark);
        letter-spacing: -1px;
        padding: 0 0 5px 0;
        margin: 0 10px;
        cursor: pointer;
        word-wrap: normal;
    }

    h5 {
        font-size: 0.9em;
        font-weight: 700;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-text-dark);
        letter-spacing: -2px;
        padding: 0 0 5px 0;
        margin: 0 10px;
        cursor: pointer;
        word-wrap: normal;
    }

    .gllr-txt {
        font-size: 0.75em;
        font-weight: 300;
        font-family: var(--body-font);
        text-wrap: wrap;
        color: var(--color-text-dark);
        padding: 0 10px 25px 10px;
        text-align: justify;
        text-justify: kashida;
    }

    .gllr-price {
        font-size: 0.75em;
        font-weight: 400;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-text-dark);
        margin: 0;
        padding: 0;
    }

    form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 25px 0 50px 0;
    }

    input {
        height: 3em;
        margin: 5px 0 10px 0;
        width: 75%;
        border: none;
        border-bottom: solid 2px var(--color-text-dark);
        font-family: var(--body-font);
        font-size: 0.85em;
        color: var(--color-text-dark);
        background-color: var(--color-bg-light);
        border-radius: 0;
    }

    input::placeholder {
        color: var(--color-text-dark);
        opacity: 50%;
        font-size: 0.85em;
    }

    select {
        height: 3em;
        margin: 5px 0 10px 0;
        width: 76%;
        border: none;
        font-size: 0.85em;
        color: var(--color-text-dark);
        border-radius: 0;
        border-bottom: solid 2px var(--color-text-dark);
        font-family: var(--body-font);
    }

    textarea {
        padding: 5px;
        margin: 15px 0 10px 0;
        width: 72.5%;
        height: 150px;
        font-size: 0.85em;
        font-family: var(--body-font);
        border: solid 2px var(--color-text-dark);
        border-radius: 2.5px;
        color: var(--color-text-dark);
    }

    textarea::placeholder {
        color: var(--color-text-dark);
        opacity: 50%;
        font-size: 0.85em;
    }

    #form_button {
        font-family: var(--logo-font);
        color: var(--color-text-dark);
        font-size: 0.75em;
        font-weight: 600;
        text-transform: uppercase;
        padding: 10px 0 20px 0;
        margin: 15px 0 10px 0;
        border-radius: 0;
    }

    #form_button:hover {
        background-color: var(--color-text-dark);
        color: var(--color-bg-light);
    }

    #form_button:active {
        opacity: 75%;
    }

    select:focus {
        outline: solid 2px var(--color-text-dark);
        border-bottom: none;
        border-radius: 2.5px;
    }

    input[text] {
        padding: 10px;
    }

    textarea:focus {
        outline: solid 2px var(--color-text-dark);
        border: none;
        border-radius: 2.5px;
    }

    input:focus {
        outline: solid 2px var(--color-text-dark);
        border-bottom: none;
        border-radius: 2.5px;
    }

    #error {
        font-size: 12px;
        font-weight: 400;
        margin-bottom: 10px;
        color: var(--color-accent-dark);
        font-family: var(--body-font);
    }
}

/* phone -> two grid */
@media only screen and (min-width: 368px) {
    * {
        background-color: var(--color-bg-light);
        scrollbar-width: none;
        scrollbar-color: var(--color-accent-light) var(--color-bg-light);
        cursor: default;
    }

    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 50px 1fr 50px;
        justify-content: center;
        align-items: center;
        grid-area: "header" "main" "footer";
        background-color: var(--color-bg-light);
        padding: 0;
        margin: 0;
    }

    .container {
        grid-area: main;
        height: 80vh;
        margin: 0 auto;
        background-image: url(/images/galbo-socks.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 10px 25px 10px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 0.75em;
    }

    .titel {
        font-size: 2.25em;
        background-color: transparent;
        color: var(--color-text-dark);
        text-align: center;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.75em;
    }

    h1 {
        font-family: var(--title-font);
        color: var(--color-bg-light);
        font-weight: 200;
        background-color: transparent;
        text-align: center;
        padding: 10px 0;
        margin: 0 0 10px 0;
    }

    .tekst {
        background-color: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.5em;
        text-align: center;
    }

    .hptxt {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 0.75em;
        font-family: var(--logo-font);
        padding: 10px 0;
        margin: 0;
        font-weight: normal;
        text-align: center;
    }

    #btn {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 0.75em;
        font-family: var(--logo-font);
        text-decoration: none;
        font-weight: 400;
        padding: 0 3em;
        overflow: hidden;
        border-radius: 50px;
    }

    #btnhome {
        background: transparent;
        position: relative;
        padding: 4px 0 2px 0;
        display: flex;
        align-items: center;
        font-size: 0.8em;
        cursor: pointer;
        border: 1px solid var(--color-bg-light);
        border-radius: 50px;
        transition: color 0.3s 0.1s ease-out;
        text-align: center;
        margin: 10px 0 0 0;
    }

    #btnhome:hover {
        border: 1px solid var(--color-bg-light);
        background-color: var(--color-bg-light);
        opacity: 75%;
    }

    #btn:hover {
        color: var(--color-text-dark);
        opacity: 100%;
    }

    .collections,
    .shop {
        text-align: center;
        margin: 50px 10px;
        padding: 0;
    }

    .collection-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
        gap: 20px 10px;
        margin: 30px 10px 50px 10px;
        /* display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
        margin: 30px 55px 75px 55px;
        padding: 0; */
    }

    .collection-gallery img {
        object-fit: cover;
        height: auto;
        width: 100%;
    }

    .pp-txt-products {
        font-size: 2.5em;
        font-weight: bold;
        font-family: var(--title-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .pptxt-products {
        font-size: 0.85em;
        font-weight: 200;
        font-family: var(--body-font);
        color: var(--color-text-dark);
        text-align: justify;
        text-justify: newspaper;
        padding: 0 55px;
        margin: 0;
        line-height: 1.25em;
    }

    .products {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 50px 0 35px 0;
        margin: 0;
        gap: 25px;
    }

    h2 {
        font-size: 1em;
        font-weight: bold;
        font-family: var(--logo-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 25px 0;
        margin: 0;
        letter-spacing: 0.5em;
        border: none;
    }

    h3 {
        font-size: 0.75em;
        font-weight: 700;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-text-dark);
        letter-spacing: -1px;
        padding: 0 0 5px 0;
        margin: 0 10px;
        cursor: pointer;
        word-wrap: normal;
    }

    h5 {
        font-size: 0.8em;
        font-weight: 700;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-text-dark);
        letter-spacing: -2px;
        padding: 0 0 5px 0;
        margin: 0 10px;
        cursor: pointer;
        word-wrap: normal;
    }

    .gllr-txt {
        font-size: 0.7em;
        font-weight: 300;
        font-family: var(--body-font);
        text-wrap: wrap;
        color: var(--color-text-dark);
        padding: 0 10px 25px 10px;
        text-align: justify;
        text-justify: kashida;
    }

    .gllr-price {
        font-size: 0.75em;
        font-weight: 400;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-text-dark);
        margin: 0;
        padding: 0;
    }

    form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 25px 0 50px 0;
    }

    input {
        height: 3em;
        margin: 5px 0 10px 0;
        width: 75%;
        border: none;
        border-bottom: solid 2px var(--color-text-dark);
        font-family: var(--body-font);
        font-size: 0.9em;
        color: var(--color-text-dark);
        background-color: var(--color-bg-light);
        border-radius: 0;
    }

    input::placeholder {
        color: var(--color-text-dark);
        opacity: 50%;
        font-size: 0.9em;
    }

    select {
        height: 3em;
        margin: 5px 0 10px 0;
        width: 76%;
        border: none;
        font-size: 0.9em;
        color: var(--color-text-dark);
        border-radius: 0;
        border-bottom: solid 2px var(--color-text-dark);
        font-family: var(--body-font);
    }

    textarea {
        padding: 5px;
        margin: 15px 0 10px 0;
        width: 74%;
        height: 150px;
        font-size: 0.9em;
        font-family: var(--body-font);
        border: solid 2px var(--color-text-dark);
        border-radius: 2.5px;
        color: var(--color-text-dark);
    }

    textarea::placeholder {
        color: var(--color-text-dark);
        opacity: 50%;
        font-size: 0.9em;
    }

    #form_button {
        font-family: var(--logo-font);
        color: var(--color-text-dark);
        font-size: 0.75em;
        font-weight: 600;
        text-transform: uppercase;
        padding: 10px 0 20px 0;
        margin: 15px 0 10px 0;
        border-radius: 0;
    }

    #form_button:hover {
        background-color: var(--color-text-dark);
        color: var(--color-bg-light);
    }

    #form_button:active {
        opacity: 75%;
    }

    select:focus {
        outline: solid 2px var(--color-text-dark);
        border-bottom: none;
        border-radius: 2.5px;
    }

    input[text] {
        padding: 10px;
    }

    textarea:focus {
        outline: solid 2px var(--color-text-dark);
        border: none;
        border-radius: 2.5px;
    }

    input:focus {
        outline: solid 2px var(--color-text-dark);
        border-bottom: none;
        border-radius: 2.5px;
    }

    #error {
        font-size: 13px;
        font-weight: 400;
        margin-bottom: 10px;
        color: var(--color-accent-dark);
        font-family: var(--body-font);
    }
}

/* tablet -> three grid */
@media only screen and (min-width: 521px) {
    * {
        background-color: var(--color-bg-light);
        scrollbar-width: none;
        scrollbar-color: var(--color-accent-light) var(--color-bg-light);
        cursor: default;
    }

    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 75px 1fr 75px;
        justify-content: center;
        align-items: center;
        grid-area: "header" "main" "footer";
        background-color: var(--color-bg-light);
        padding: 0;
        margin: 0;
    }

    .container {
        grid-area: main;
        height: 90vh;
        margin: 0 auto;
        background-image: url(/images/galbo-socks.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 10px 20px 10px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 0.75em;
    }

    .titel {
        font-size: 2.75em;
        background-color: transparent;
        color: var(--color-text-dark);
        text-align: center;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 2em;
    }

    h1 {
        font-family: var(--title-font);
        color: var(--color-bg-light);
        font-weight: 200;
        background-color: transparent;
        text-align: center;
        padding: 10px 0;
        margin: 0 0 10px 0;
    }

    .tekst {
        background-color: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 2em;
        text-align: center;
    }

    .hptxt {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 1em;
        font-family: var(--logo-font);
        padding: 10px 0;
        margin: 0;
        font-weight: normal;
        text-align: center;
    }

    #btn {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 0.9em;
        font-family: var(--logo-font);
        text-decoration: none;
        font-weight: 400;
        padding: 0 3em;
        overflow: hidden;
        border-radius: 50px;
    }

    #btnhome {
        background: transparent;
        position: relative;
        padding: 4px 0 2px 0;
        display: flex;
        align-items: center;
        font-size: 0.9em;
        cursor: pointer;
        border: 1px solid var(--color-bg-light);
        border-radius: 50px;
        transition: color 0.3s 0.1s ease-out;
        text-align: center;
        margin: 15px 0 0 0;
    }

    #btnhome:hover {
        border: 1px solid var(--color-bg-light);
        background-color: var(--color-bg-light);
        opacity: 75%;
    }

    #btn:hover {
        color: var(--color-text-dark);
        opacity: 100%;
    }

    .collections,
    .shop {
        text-align: center;
        margin: 50px 10px;
        padding: 0;
    }

    .collection-gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 0;
        gap: 20px 10px;
        margin: 30px 10px 50px 10px;
    }

    .collection-gallery img {
        object-fit: cover;
        height: auto;
        width: 100%;
    }

    .pp-txt-products {
        font-size: 2.5em;
        font-weight: bold;
        font-family: var(--title-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .pptxt-products {
        font-size: 0.85em;
        font-weight: 200;
        font-family: var(--body-font);
        color: var(--color-text-dark);
        text-align: justify;
        text-justify: newspaper;
        padding: 0 55px;
        margin: 0;
        line-height: 1.25em;
    }

    .products {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 50px 0 35px 0;
        margin: 0;
        gap: 25px;
    }

    h2 {
        font-size: 1em;
        font-weight: bold;
        font-family: var(--logo-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 25px 0;
        margin: 0;
        letter-spacing: 0.5em;
        border: none;
    }

    h3 {
        font-size: 0.75em;
        font-weight: 700;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-text-dark);
        letter-spacing: -1px;
        padding: 0 0 5px 0;
        margin: 0 10px;
        cursor: pointer;
        word-wrap: normal;
    }

    h5 {
        font-size: 0.8em;
        font-weight: 700;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-text-dark);
        letter-spacing: -2px;
        padding: 0 0 5px 0;
        margin: 0 10px;
        cursor: pointer;
        word-wrap: normal;
    }

    .gllr-txt {
        font-size: 0.75em;
        font-weight: 300;
        font-family: var(--body-font);
        text-wrap: wrap;
        color: var(--color-text-dark);
        padding: 0 10px 25px 10px;
        text-align: justify;
        text-justify: kashida;
    }

    .gllr-price {
        font-size: 0.75em;
        font-weight: 400;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-text-dark);
        margin: 0;
        padding: 0;
    }

    form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 25px 0 50px 0;
    }

    input {
        height: 3em;
        margin: 5px 0 10px 0;
        width: 75%;
        border: none;
        border-bottom: solid 2px var(--color-text-dark);
        font-family: var(--body-font);
        font-size: 0.9em;
        color: var(--color-text-dark);
        background-color: var(--color-bg-light);
        border-radius: 0;
    }

    input::placeholder {
        color: var(--color-text-dark);
        opacity: 50%;
        font-size: 0.9em;
    }

    select {
        height: 3em;
        margin: 5px 0 10px 0;
        width: 75.5%;
        border: none;
        font-size: 0.9em;
        color: var(--color-text-dark);
        border-radius: 0;
        border-bottom: solid 2px var(--color-text-dark);
        font-family: var(--body-font);
    }

    textarea {
        padding: 5px;
        margin: 15px 0 10px 0;
        width: 74%;
        height: 150px;
        font-size: 0.9em;
        font-family: var(--body-font);
        border: solid 2px var(--color-text-dark);
        border-radius: 2.5px;
        color: var(--color-text-dark);
    }

    textarea::placeholder {
        color: var(--color-text-dark);
        opacity: 50%;
        font-size: 0.9em;
    }

    #form_button {
        font-family: var(--logo-font);
        color: var(--color-text-dark);
        font-size: 0.75em;
        font-weight: 600;
        text-transform: uppercase;
        padding: 10px 0 20px 0;
        margin: 15px 0 10px 0;
        border-radius: 0;
    }

    #form_button:hover {
        background-color: var(--color-text-dark);
        color: var(--color-bg-light);
    }

    #form_button:active {
        opacity: 75%;
    }

    select:focus {
        outline: solid 2px var(--color-text-dark);
        border-bottom: none;
        border-radius: 2.5px;
    }

    input[text] {
        padding: 10px;
    }

    textarea:focus {
        outline: solid 2px var(--color-text-dark);
        border: none;
        border-radius: 2.5px;
    }

    input:focus {
        outline: solid 2px var(--color-text-dark);
        border-bottom: none;
        border-radius: 2.5px;
    }

    #error {
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 10px;
        color: var(--color-accent-dark);
        font-family: var(--body-font);
    }
}

/* laptop -> four grid */
@media only screen and (min-width: 690px) {
    * {
        background-color: var(--color-bg-light);
        scrollbar-width: none;
        scrollbar-color: var(--color-accent-light) var(--color-bg-light);
        cursor: default;
    }

    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 100px 1fr 100px;
        justify-content: center;
        align-items: center;
        grid-area: "header" "main" "footer";
        background-color: var(--color-bg-light);
        padding: 0;
        margin: 0;
    }

    .container {
        grid-area: main;
        height: 100vh;
        margin: 0 auto;
        background-image: url(/images/bg.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 10px 30px 10px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 0.75em;
    }

    .titel {
        font-size: 3.25em;
        background-color: transparent;
        color: var(--color-text-dark);
        text-align: center;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 2.25em;
    }

    h1 {
        font-family: var(--title-font);
        color: var(--color-bg-light);
        font-weight: 200;
        background-color: transparent;
        text-align: center;
        padding: 10px 0;
        margin: 0 0 10px 0;
    }

    .tekst {
        background-color: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 2em;
        text-align: center;
    }

    .hptxt {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 1.25em;
        font-family: var(--logo-font);
        padding: 10px 0;
        margin: 0;
        font-weight: normal;
        text-align: center;
    }

    #btn {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 0.9em;
        font-family: var(--logo-font);
        text-decoration: none;
        font-weight: 400;
        padding: 0 3em;
        overflow: hidden;
        border-radius: 50px;
    }

    #btnhome {
        background: transparent;
        position: relative;
        padding: 4px 0 2px 0;
        display: flex;
        align-items: center;
        font-size: 0.9em;
        cursor: pointer;
        border: 1px solid var(--color-bg-light);
        border-radius: 50px;
        transition: color 0.3s 0.1s ease-out;
        text-align: center;
        margin: 15px 0 0 0;
    }

    #btnhome:hover {
        border: 1px solid var(--color-bg-light);
        background-color: var(--color-bg-light);
        opacity: 75%;
    }

    #btn:hover {
        color: var(--color-text-dark);
        opacity: 100%;
    }

    .collections,
    .shop {
        text-align: center;
        margin: 50px 10px;
        padding: 0;
    }

    .collection-gallery {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 0;
        gap: 20px 10px;
        margin: 30px 10px 50px 10px;
    }

    .collection-gallery img {
        object-fit: cover;
        height: auto;
        width: 100%;
    }

    .pp-txt-products {
        font-size: 2.5em;
        font-weight: bold;
        font-family: var(--title-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .pptxt-products {
        font-size: 0.85em;
        font-weight: 200;
        font-family: var(--body-font);
        color: var(--color-text-dark);
        text-align: justify;
        text-justify: newspaper;
        padding: 0 55px;
        margin: 0;
        line-height: 1.25em;
    }

    .products {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 50px 0 35px 0;
        margin: 0;
        gap: 25px;
    }

    h2 {
        font-size: 1.75em;
        font-weight: bold;
        font-family: var(--logo-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 25px 0;
        margin: 0;
        letter-spacing: 0.5em;
        border: none;
    }

    h3 {
        font-size: 0.75em;
        font-weight: 700;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-text-dark);
        letter-spacing: -1px;
        padding: 0 0 5px 0;
        margin: 0 10px;
        cursor: pointer;
        word-wrap: normal;
    }

    h5 {
        font-size: 0.85em;
        font-weight: 700;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-text-dark);
        letter-spacing: -2px;
        padding: 0 0 5px 0;
        margin: 0 10px;
        cursor: pointer;
        word-wrap: normal;
    }

    .gllr-txt {
        font-size: 0.8em;
        font-weight: 300;
        font-family: var(--body-font);
        text-wrap: wrap;
        color: var(--color-text-dark);
        padding: 0 10px 25px 10px;
        text-align: justify;
        text-justify: kashida;
    }

    .gllr-price {
        font-size: 0.75em;
        font-weight: 400;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-text-dark);
        margin: 0;
        padding: 0;
    }

    form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 25px 0 50px 0;
    }

    input {
        height: 3em;
        margin: 5px 0 10px 0;
        width: 75%;
        border: none;
        border-bottom: solid 2px var(--color-text-dark);
        font-family: var(--body-font);
        font-size: 0.95em;
        color: var(--color-text-dark);
        background-color: var(--color-bg-light);
        border-radius: 0;
    }

    input::placeholder {
        color: var(--color-text-dark);
        opacity: 50%;
        font-size: 0.95em;
    }

    select {
        height: 3em;
        margin: 5px 0 10px 0;
        width: 75.5%;
        border: none;
        font-size: 0.95em;
        color: var(--color-text-dark);
        border-radius: 0;
        border-bottom: solid 2px var(--color-text-dark);
        font-family: var(--body-font);
    }

    textarea {
        padding: 5px;
        margin: 15px 0 10px 0;
        width: 74%;
        height: 150px;
        font-size: 0.95em;
        font-family: var(--body-font);
        border: solid 2px var(--color-text-dark);
        border-radius: 2.5px;
        color: var(--color-text-dark);
    }

    textarea::placeholder {
        color: var(--color-text-dark);
        opacity: 50%;
        font-size: 0.95em;
    }

    #form_button {
        font-family: var(--logo-font);
        color: var(--color-text-dark);
        font-size: 0.75em;
        font-weight: 600;
        text-transform: uppercase;
        padding: 10px 0 20px 0;
        margin: 15px 0 10px 0;
        border-radius: 0;
    }

    #form_button:hover {
        background-color: var(--color-text-dark);
        color: var(--color-bg-light);
    }

    #form_button:active {
        opacity: 75%;
    }

    select:focus {
        outline: solid 2px var(--color-text-dark);
        border-bottom: none;
        border-radius: 2.5px;
    }

    input[text] {
        padding: 10px;
    }

    textarea:focus {
        outline: solid 2px var(--color-text-dark);
        border: none;
        border-radius: 2.5px;
    }

    input:focus {
        outline: solid 2px var(--color-text-dark);
        border-bottom: none;
        border-radius: 2.5px;
    }

    #error {
        font-size: 15px;
        font-weight: 400;
        margin-bottom: 10px;
        color: var(--color-accent-dark);
        font-family: var(--body-font);
    }
}