/* Main Configuration */
@layer configuration {
*,*::before,*::after {
    box-sizing      : border-box;
    padding         : 0;
    margin          : 0;
    background      : none;
    text-decoration : none;
    outline         : none;
    font-family     : inherit;
    font-size       : inherit;
    line-height     : inherit;
    font-weight     : inherit;
    color           : inherit;

    /* Disable double tap to zoom */
    touch-action : manipulation;

    /* Fix the antialias when needed */
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-feature-settings   : "onum", "kern", "liga", "clig", "calt";

    /* Global Transitions */
    transition-delay           : 0ms;
    transition-duration        : 450ms;
    transition-property        : none;
    transition-timing-function : ease-out ;
}
}
@layer configuration {

@font-face {
    font-family : "BDO";
    src         : url("fonts/BDO.ttf") format('truetype');
    font-style  : normal;
    font-weight : 100 900;
}

@font-face {
    font-family : "Shippori";
    src         : url("fonts/ShipporiMincho-Regular.woff2") format('woff2');
    font-style  : normal;
    font-weight : 400;
}
@font-face {
    font-family : "Shippori";
    src         : url("fonts/ShipporiMincho-Medium.woff2") format('woff2');
    font-style  : normal;
    font-weight : 500;
}



:root {
    
    /* Colors */
    --c-bg   : hsl(0,0%,100%);
    --c-text : hsl(0,0%,10%);

    --cream  : #F4F5EB;
    --yellow : #F8B133;
    --blue   : #00424C;

    /* Font Settings */
    --f-family : Shippori, georgia, serif;
    --f-size   : clamp(16px, 1.44vi + 10.24px, 65px);
    --f-height : clamp(16px, 1.44vi + 10.24px, 65px);
    --f-weight : 400;

    /* Type Scale */
    --f-scale-s   : 0.8;
    --f-scale-m   : 1.25;
    --f-scale-l   : 1.563;
    --f-scale-xl  : 1.953;
    --f-scale-xxl : 2.441;

    /* Set the defaults */
    font-size   : var(--f-height);
    font-family : var(--f-family);
    font-weight : var(--f-weight);
    background  : var(--c-bg);
    color       : var(--c-text);
}

html,body {
    scroll-behavior: smooth;
}

body {
    font-size   : var(--f-size);
    line-height : var(--f-height);
}
}
@layer configuration {
:root {

    --text-small  : clamp(14px, 0.91vi + 10.35px, 45px) / 1.2 Shippori, georgia, serif;
    --text-base  : clamp(16px, 1.44vi + 10.24px, 65px) / 1.2 Shippori, georgia, serif;
    --text-large : 300 clamp(22px, 2.88vi + 10.47px, 120px) / 1.2 BDO, sans-serif;

}
}/* Global Settings *//* Content Goes Here *//* UI Elements */
.header {
    min-height    : 100svh;
    background    : var(--cream);
    display       : grid;
    justify-items : center;
    align-items   : center;
    text-align    : center;
    color         : var(--blue);
    position      : sticky;
    top           : 0;

    &::before {
        content           : "";
        position          : absolute;
        top               : 0;
        right             : 0;
        bottom            : 0;
        left              : 0;
        background-image  : radial-gradient(circle at top, var(--cream) 10%, var(--yellow) 10%, var(--cream) 50%);
        background-repeat : no-repeat;
        background-size   : contain;
        opacity           : 0;
        transform         : translateY(-10vh);
        animation         : slidein 1s forwards ease-out;
    }

    a {
        position      : absolute;
        bottom        : 1rem;
        left          : 50%;
        width         : 1rem;
        height        : 1rem;
        transform     : translateX(-50%) rotate(45deg);
        border-bottom : 2px solid var(--blue);
        border-right  : 2px solid var(--blue);
    }

}
.header-content {
    z-index   : 10;
    opacity   : 0;
    transform : translateY(5vh);
    animation : slideup 1s forwards ease-out;
}
.header-title {
    font          : var(--text-large);
    margin-bottom : 0.5em;
    strong {
        font-weight : 500;
    }
}
.header-tagline {
    font : var(--text-base);
}
@keyframes slidein {
    from {
        opacity : 0;
        transform : translateY(-10vh);
    }
    to {
        opacity : 1;
        transform : initial;
    }
}
@keyframes slideup {
    from {
        opacity : 0;
        transform : translateY(5vh);
    }
    to {
        opacity : 1;
        transform : initial;
    }
}
.section {
    min-height    : 100svh;
    display       : grid;
    justify-items : center;
    align-items   : center;
    text-align    : left;
    padding       : 10vmin 5vmin;
    position      : sticky;
    z-index       : 10;
    top           : 0;

    @media (min-width: 600px) {
         text-align : center;
    }
}
.section-blue {
    background : var(--blue);
    color      : var(--cream);
}
.section-yellow {
    background : var(--yellow);
    color      : var(--cream);
}
.section-white {
    background : var(--cream);
    color      : var(--blue);
}
.section-inner {
    font                : var(--text-base);
    max-width           : 60ch;
    text-wrap           : balance;
    transition-property : filter, opacity, transform;
}
.section-blurred .section-inner {
    filter    : blur(5px);
    opacity   : 0.85;
    transform : scale(0.95);
}
.lists {
    display               : grid;
    grid-template-columns : 1fr;
    font                  : var(--text-small);

    @media (min-width: 800px) {
        text-align            : left;
        grid-template-columns : 1fr 1fr;
    }
}/* Content Goes Here */
.footer {
    padding-bottom : 30vmin;
    position       : relative;
    z-index        : 15 !important;
    will-change    : auto;
    transform      : translate3d(0,0,0);

    &::before {
        content           : "";
        position          : absolute;
        height            : 100svh;
        right             : 0;
        bottom            : 0;
        left              : 0;
        background-image  : radial-gradient(circle at 75% 100%, var(--yellow) 0%, var(--cream) 50%);
        background-repeat : no-repeat;
        background-size   : contain;
        z-index           : -1;
        @media (min-width: 600px) {
             background-image  : radial-gradient(circle at 50% 100%, var(--cream) 10%, var(--yellow) 10%, var(--cream) 50%);
        }
    }


    small {
        position        : absolute;
        bottom          : 0;
        right           : 0;
        left            : 0;
        padding         : 2.5vmin 5vmin ;
        display         : flex;
        justify-content : space-between;
        font-size       : 14px;
        line-height     : 1.25em;

        @media (max-width: 599px) {
            flex-direction : column;
        }

    }

}/* Reusable Components *//* Content Goes Here */
.editor {

    h2 {
        font-family   : BDO, sans-serif;
        font-weight   : 300;
        margin-bottom : 1em;
    }

    p:not(:last-child) {
        margin-bottom : 1em;
    }

    li {
        position : relative;
    }

    ul {
        list-style : none;

        @media (max-width: 599px) {
            list-style-position : outside;
            li::before {
                content : ". ";
                white-space: pre;
                position : absolute;
                left : 0;
                transform : translateX(-100%);
            }
        }
        @media (min-width: 800px) {
            li::before {
                content : ". ";
                white-space: pre;
                position : absolute;
                left : 0;
                transform : translateX(-100%);
            }
        }

    }

    a {
        transition : opacity 300ms;
        &:hover {
            opacity : 0.5;
        }
    }

    img {
        display       : block;
        margin        : 2rem 0;
        border-radius : 50%;
        max-width     : 10rem;
        box-shadow    : 0px 0px 1.5rem var(--yellow);
        @media (min-width: 600px) {
            margin : 2rem auto;
        }
    }

}
.img {
    display : block;
    width   : 100%;
}