/* "RESET" */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font: inherit;
}

header, main, footer, section, article {
    container-type: inline-size;
    font-size: 16px;
}

img, svg {
    max-inline-size: 100%;
}

h1, h2, h3 {
    text-wrap: balance;
}

p, li {
    text-wrap: pretty;
    /*max-width: 65ch;*/
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

/* ROOT-ISH */
@import 
url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --dark: rgba()#080602;
    --dark-ghost: rgba(8, 6, 2, 0.7); /*#080602*/
    --light: rgba(254, 251, 245, 0.125);
    --white: #FEFBF5;
    --white-ghost: rgba(254, 251, 245, 0.625) /*#FEFBF5*/;
    --light-orange: #ebad56;
    --orange: #d66829;
    --dark-orange: #a84d1f;
    --bronze: #876612;
    --dark-bronze: #614b1c;
    --ff-headers: "Inter", sans-serif;
    --ff-body: "Inter", sans-serif;
    --fc: var(--dark);
}

/* EVERYTHING ELSE */
h1, h2, h3 {
    color: var(--dark);
    font-family: var(--ff-headers);
    margin-bottom: .5em;
}

h3 {
    margin-top: .25em;
}

h1 {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;

    @media only screen and (min-width: 576px) {
        font-size: clamp(2rem, 2.25rem, 2.75rem);
    }
    @media only screen and (min-width: 768px) {
        display: inline-block;
    }
}

h2 {
    /*font-family: 'Niramit', sans-serif;*/
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #876612;
    margin-top: 1.5em;
    
    /*margin-bottom: .75em;
    display: block;
    line-height: 110%;*/

    @media only screen and (min-width: 576px) {
        font-size: 1.4rem;
       /* text-wrap: wrap;*/
    }

    @media only screen and (min-width: 810px) {
        font-size: clamp(1.3rem, 1.5rem, 2rem);
    }
}

h3, p, li {
    color: var(--dark);
    font-family: var(--ff-body);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.5;

    @media only screen and (min-width: 576px) {
        font-size: 1.5rem;
    }
    @media only screen and (min-width: 768px) {
        /*font-size: 1.75em;*/
        font-size: clamp(1.5rem, 1.75rem, 2rem);
    }
}

h3 {
    text-align: center;
    font-weight: 700;
}

.flex-3 {
    display: flex;
    justify-content: space-between;
    gap: .5em;
    flex-wrap: nowrap;
    flex-direction: column;
    

    @media only screen and (min-width: 1200px) {
        flex-direction: row;
        gap: 2em;
    }
}

.flex-3-box {
    flex: 1;
    padding: 1em;
    border: 1px solid black;
    border-radius: .5em;
    margin-bottom: 2em;
}

.flex-3 ul, .flex-2 ul {
    margin-left: 25px;
}

.flex-2 {
    display: flex;
    justify-content: space-between;
    gap: .5em;
    flex-wrap: nowrap;
    flex-direction: column;


    @media only screen and (min-width: 1200px) {
        flex-direction: row;
        flex-wrap: wrap;
        flex: 0 50%;
        gap: 2em;
    }
}


.container {
    align-items: center;
    margin: min(8em, 10%);
    max-width: 1200px;

    @media only screen and (min-width: 1200px) {
        margin-left: calc((100% - 1200px) / 2);
        margin-rightcalc((100% - 1200px) / 2);
    }
}

.item {
    border: 1px solid var(--light);
    background: var(--white-ghost);
    padding: min(5em, 10%);
}

.logo {
    display: block;
    margin: 0 auto 1em auto;
    height: 100px;
    width: auto;

    @media only screen and (min-width: 576px) {
        height: 110px;
    }

    @media only screen and (min-width: 768px) {
        display: inline-block;
        padding-right: 20px;
        height: 125px;
        padding-left: 0;
        margin-bottom: 0;
    }

    @media only screen and (min-width: 1200px) {
        height: 135px;
    }
}

.cell-pic {
    width: 70%;
    margin-top: 10px;
    margin-bottom: -30px;
    margin-left: 15%;
    margin-right: 15%;
    transform: rotate(3deg);

    @media only screen and (min-width: 576px) {
        width: 225px;
        height: auto;
        transform: rotate(5deg);
        /*position: absolute;*/
        shape-outside: polygon(40px 420px, 28.11% -1.18%, 97.15% 2.26%, 85.57% 91.15%);
        margin-top: 15px;
        margin-left: 5rem;
        margin-bottom: 10px;
        margin-right: 0;
        float: right;
    }

    /*@media only screen and (min-width: 768px) {
        display: inline-block;
        padding-right: 20px;
        height: 125px;
        padding-left: 0;
        margin-bottom: 0;
    }

    @media only screen and (min-width: 1200px) {
        height: 135px;
    }*/
}




a {
    color: var(--dark);
    border-bottom: 3px solid currentColor;
    padding: .15em;
}

a:hover, a:active {
    border-bottom: 0px solid currentColor;
}

a:focus {
    padding: .15em;
    outline-color: #876612;
    outline-style: dotted;
    outline-width: 3px;
    border-bottom: 0px solid currentColor;
    border-radius: 15%;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--light);
    }

    h1, p, li, a {
        color: var(--white);
    }

    a:focus {
        outline-color: var(--white-ghost);
    }

    img[src$=".svg"] {
        filter: invert(1) sepia(0.15) brightness(0.98);
    }

    .item {
        border: 1px solid var(--light);
        background: var(--dark-ghost);
    }
}

@media screen and (prefers-reduced-motion) {
    .background {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        background: #ebad56;
        background: #876612;
        overflow: hidden;
        z-index: -3;
    }
}

@media screen and (prefers-reduced-motion: no-preference) {
    @keyframes move {
        100% {
            transform: translate3d(0, 0, 1px) rotate(360deg);
        }
    }

    .background {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        background: #ebad56;
        overflow: hidden;
        z-index: -3;
    }

        .background span {
            width: 42vmin;
            height: 42vmin;
            border-radius: 42vmin;
            backface-visibility: hidden;
            position: absolute;
            animation: move;
            animation-duration: 20s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

            .background span:nth-child(0) {
                color: var(--dark-orange);
                top: 21%;
                left: 84%;
                animation-duration: 60s;
                animation-delay: -185s;
                transform-origin: -5vw -14vh;
                box-shadow: 84vmin 0 11.021129828148027vmin currentColor;
            }

            .background span:nth-child(1) {
                color: var(--bronze);
                top: 84%;
                left: 16%;
                animation-duration: 254s;
                animation-delay: -127s;
                transform-origin: 22vw 11vh;
                box-shadow: -84vmin 0 10.643621977569937vmin currentColor;
            }

            .background span:nth-child(2) {
                color: var(--bronze);
                top: 89%;
                left: 74%;
                animation-duration: 20s;
                animation-delay: -46s;
                transform-origin: -14vw 17vh;
                box-shadow: 84vmin 0 10.639743897851659vmin currentColor;
            }

            .background span:nth-child(3) {
                color: var(--dark-orange);
                top: 17%;
                left: 22%;
                animation-duration: 288s;
                animation-delay: -174s;
                transform-origin: -15vw -8vh;
                box-shadow: -84vmin 0 11.273317414476171vmin currentColor;
            }

            .background span:nth-child(4) {
                color: var(--dark-orange);
                top: 16%;
                left: 68%;
                animation-duration: 64s;
                animation-delay: -150s;
                transform-origin: -6vw -15vh;
                box-shadow: -84vmin 0 10.65002780754023vmin currentColor;
            }

            .background span:nth-child(5) {
                color: var(--dark-bronze);
                top: 16%;
                left: 98%;
                animation-duration: 206s;
                animation-delay: -175s;
                transform-origin: 20vw 3vh;
                box-shadow: -84vmin 0 10.545575784196705vmin currentColor;
            }

            .background span:nth-child(6) {
                color: var(--dark-bronze);
                top: 51%;
                left: 47%;
                animation-duration: 57s;
                animation-delay: -98s;
                transform-origin: 21vw 2vh;
                box-shadow: -84vmin 0 10.553413198555619vmin currentColor;
            }

            .background span:nth-child(7) {
                color: var(--dark-bronze);
                top: 45%;
                left: 6%;
                animation-duration: 278s;
                animation-delay: -223s;
                transform-origin: -13vw -18vh;
                box-shadow: 84vmin 0 11.350316971750296vmin currentColor;
            }

            .background span:nth-child(8) {
                color: var(--dark-bronze);
                top: 87%;
                left: 44%;
                animation-duration: 281s;
                animation-delay: -117s;
                transform-origin: -19vw 7vh;
                box-shadow: 84vmin 0 10.686956117565833vmin currentColor;
            }

            .background span:nth-child(9) {
                color: var(--dark-orange);
                top: 28%;
                left: 33%;
                animation-duration: 80s;
                animation-delay: -51s;
                transform-origin: -13vw -18vh;
                box-shadow: 84vmin 0 10.946759034946743vmin currentColor;
            }

            .background span:nth-child(10) {
                color: var(--dark-bronze);
                top: 58%;
                left: 22%;
                animation-duration: 76s;
                animation-delay: -151s;
                transform-origin: 3vw 8vh;
                box-shadow: -84vmin 0 11.086555448439034vmin currentColor;
            }

            .background span:nth-child(11) {
                color: var(--dark-bronze);
                top: 9%;
                left: 97%;
                animation-duration: 160s;
                animation-delay: -83s;
                transform-origin: -16vw 17vh;
                box-shadow: -84vmin 0 10.906644174006649vmin currentColor;
            }

            .background span:nth-child(12) {
                color: var(--dark-orange);
                top: 26%;
                left: 44%;
                animation-duration: 295s;
                animation-delay: -266s;
                transform-origin: 22vw 20vh;
                box-shadow: 84vmin 0 11.461683151368277vmin currentColor;
            }

            .background span:nth-child(13) {
                color: var(--orange);
                top: 54%;
                left: 56%;
                animation-duration: 35s;
                animation-delay: -169s;
                transform-origin: -10vw -5vh;
                box-shadow: -84vmin 0 11.134161300409344vmin currentColor;
            }

            .background span:nth-child(14) {
                color: var(--dark-orange);
                top: 72%;
                left: 74%;
                animation-duration: 123s;
                animation-delay: -237s;
                transform-origin: -18vw 4vh;
                box-shadow: -84vmin 0 10.89616523192328vmin currentColor;
            }

            .background span:nth-child(15) {
                color: var(--orange);
                top: 45%;
                left: 94%;
                animation-duration: 179s;
                animation-delay: -53s;
                transform-origin: 21vw -13vh;
                box-shadow: -84vmin 0 10.61489555395127vmin currentColor;
            }

            .background span:nth-child(16) {
                color: var(--dark-bronze);
                top: 65%;
                left: 8%;
                animation-duration: 272s;
                animation-delay: -291s;
                transform-origin: 21vw 17vh;
                box-shadow: 84vmin 0 11.131103467988904vmin currentColor;
            }

            .background span:nth-child(17) {
                color: var(--dark-bronze);
                top: 50%;
                left: 32%;
                animation-duration: 81s;
                animation-delay: -16s;
                transform-origin: -17vw -18vh;
                box-shadow: 84vmin 0 11.103029616603333vmin currentColor;
            }

            .background span:nth-child(18) {
                color: var(--dark-bronze);
                top: 19%;
                left: 79%;
                animation-duration: 55s;
                animation-delay: -96s;
                transform-origin: -10vw 1vh;
                box-shadow: -84vmin 0 10.883286912693322vmin currentColor;
            }

            .background span:nth-child(19) {
                color: var(--dark-orange);
                top: 92%;
                left: 70%;
                animation-duration: 298s;
                animation-delay: -82s;
                transform-origin: 17vw -11vh;
                box-shadow: -84vmin 0 11.494178701202337vmin currentColor;
            }

            .background span:nth-child(20) {
                color: var(--dark-orange);
                top: 19%;
                left: 25%;
                animation-duration: 254s;
                animation-delay: -67s;
                transform-origin: -24vw 10vh;
                box-shadow: 84vmin 0 10.533547001690174vmin currentColor;
            }

            .background span:nth-child(21) {
                color: var(--bronze);
                top: 63%;
                left: 80%;
                animation-duration: 138s;
                animation-delay: -6s;
                transform-origin: -21vw -19vh;
                box-shadow: 84vmin 0 10.797952325122704vmin currentColor;
            }

            .background span:nth-child(22) {
                color: var(--dark-orange);
                top: 73%;
                left: 52%;
                animation-duration: 199s;
                animation-delay: -103s;
                transform-origin: -4vw 5vh;
                box-shadow: -84vmin 0 10.765855756202267vmin currentColor;
            }

            .background span:nth-child(23) {
                color: var(--bronze);
                top: 57%;
                left: 95%;
                animation-duration: 166s;
                animation-delay: -10s;
                transform-origin: -12vw -14vh;
                box-shadow: -84vmin 0 11.080444049913702vmin currentColor;
            }

            .background span:nth-child(24) {
                color: var(--dark-orange);
                top: 14%;
                left: 5%;
                animation-duration: 292s;
                animation-delay: -289s;
                transform-origin: -6vw 18vh;
                box-shadow: 84vmin 0 10.76277494973249vmin currentColor;
            }

            .background span:nth-child(25) {
                color: var(--orange);
                top: 52%;
                left: 84%;
                animation-duration: 119s;
                animation-delay: -138s;
                transform-origin: 4vw -17vh;
                box-shadow: -84vmin 0 10.559424606567966vmin currentColor;
            }

            .background span:nth-child(26) {
                color: var(--bronze);
                top: 38%;
                left: 91%;
                animation-duration: 94s;
                animation-delay: -133s;
                transform-origin: -10vw 22vh;
                box-shadow: -84vmin 0 10.912305927965612vmin currentColor;
            }

            .background span:nth-child(27) {
                color: var(--dark-orange);
                top: 63%;
                left: 96%;
                animation-duration: 11s;
                animation-delay: -246s;
                transform-origin: 21vw -24vh;
                box-shadow: -84vmin 0 11.007301141363904vmin currentColor;
            }

            .background span:nth-child(28) {
                color: var(--dark-bronze);
                top: 7%;
                left: 16%;
                animation-duration: 266s;
                animation-delay: -129s;
                transform-origin: -5vw 18vh;
                box-shadow: -84vmin 0 11.097552076014338vmin currentColor;
            }

            .background span:nth-child(29) {
                color: var(--dark-orange);
                top: 5%;
                left: 5%;
                animation-duration: 17s;
                animation-delay: -61s;
                transform-origin: 18vw 15vh;
                box-shadow: -84vmin 0 11.300326450078659vmin currentColor;
            }

            .background span:nth-child(30) {
                color: var(--orange);
                top: 56%;
                left: 10%;
                animation-duration: 139s;
                animation-delay: -160s;
                transform-origin: -18vw 2vh;
                box-shadow: 84vmin 0 11.461489721791862vmin currentColor;
            }

            .background span:nth-child(31) {
                color: var(--dark-orange);
                top: 43%;
                left: 28%;
                animation-duration: 163s;
                animation-delay: -28s;
                transform-origin: -6vw -1vh;
                box-shadow: -84vmin 0 11.157897538506345vmin currentColor;
            }

            .background span:nth-child(32) {
                color: var(--orange);
                top: 32%;
                left: 18%;
                animation-duration: 215s;
                animation-delay: -32s;
                transform-origin: 9vw -8vh;
                box-shadow: -84vmin 0 11.179938475220489vmin currentColor;
            }

            .background span:nth-child(33) {
                color: var(--orange);
                top: 49%;
                left: 76%;
                animation-duration: 219s;
                animation-delay: -100s;
                transform-origin: 16vw -4vh;
                box-shadow: 84vmin 0 10.681224886210218vmin currentColor;
            }

            .background span:nth-child(34) {
                color: var(--dark-orange);
                top: 70%;
                left: 97%;
                animation-duration: 158s;
                animation-delay: -98s;
                transform-origin: 25vw 20vh;
                box-shadow: 84vmin 0 11.45522712621836vmin currentColor;
            }

            .background span:nth-child(35) {
                color: var(--dark-orange);
                top: 82%;
                left: 72%;
                animation-duration: 36s;
                animation-delay: -44s;
                transform-origin: 25vw -23vh;
                box-shadow: 84vmin 0 10.870703895867033vmin currentColor;
            }

            .background span:nth-child(36) {
                color: var(--bronze);
                top: 39%;
                left: 95%;
                animation-duration: 167s;
                animation-delay: -93s;
                transform-origin: -3vw 13vh;
                box-shadow: 84vmin 0 11.250487141268533vmin currentColor;
            }
}