/* -- Formatting -- */
.side-by-side, .stacked {display: flex}
.stacked {flex-direction: column}
.relative {position: relative}
.capitals {text-transform: uppercase}

.bold, h1, h2, h3, h4, h5, h6 {font-weight: 800}
.normal {font-weight: normal}
.thin {font-weight: 100}

.text-left {text-align: left}
.text-center {text-align: center}
.text-right {text-align: right}

.align-center {align-items: center}
.justify-center {justify-content: center}

.margin-left {margin-left: 0; margin-right: auto}
.margin-center {margin-left: auto; margin-right: auto}
.margin-right {margin-left: auto; margin-right: 0}

.width {width: 100%}
.fit-content {width: fit-content}
.max {flex: 1 0 auto}

.side-pad, .side-pad-wide {
    width: 100%;
    max-width: var(--max-w);
    padding: 0 var(--side-pad)
}

.side-pad-wide {max-width: var(--max-w-2)}

/* -- Sizing -- */
.g1 {gap: var(--size-1)}
.g2 {gap: var(--size-2)}
.g3 {gap: var(--size-3)}
.g4 {gap: var(--size-4)}
.g5 {gap: var(--size-5)}
.g6 {gap: var(--size-6)}

.pt1 {padding-top:    var(--size-1)}
.pb1 {padding-bottom: var(--size-1)}
.pt2 {padding-top:    var(--size-2)}
.pb2 {padding-bottom: var(--size-2)}
.pt3 {padding-top:    var(--size-3)}
.pb3 {padding-bottom: var(--size-3)}
.pt4 {padding-top:    var(--size-4)}
.pb4 {padding-bottom: var(--size-4)}
.pt5 {padding-top:    var(--size-5)}
.pb5 {padding-bottom: var(--size-5)}
.pt6 {padding-top:    var(--size-6)}
.pb6 {padding-bottom: var(--size-6)}

.mt1 {margin-top:    var(--size-1)}
.mb1 {margin-bottom: var(--size-1)}
.mt2 {margin-top:    var(--size-2)}
.mb2 {margin-bottom: var(--size-2)}
.mt3 {margin-top:    var(--size-3)}
.mb3 {margin-bottom: var(--size-3)}
.mt4 {margin-top:    var(--size-4)}
.mb4 {margin-bottom: var(--size-4)}
.mt5 {margin-top:    var(--size-5)}
.mb5 {margin-bottom: var(--size-5)}
.mt6 {margin-top:    var(--size-5)}
.mb6 {margin-bottom: var(--size-5)}

/* -- Colors -- */
.bg:not(.text)   {background-color: var(--bg)}
.bg-2:not(.text) {background-color: var(--bg-2)}
.bg-3:not(.text) {background-color: var(--bg-3)}
.fg:not(.text)   {background-color: var(--fg)}
.fg-2:not(.text) {background-color: var(--fg-2)}
.fg-3:not(.text) {background-color: var(--fg-3)}

.text {color: var(--txt)}
.text-2 {color: var(--txt-2)}
.text.invert {color: var(--txt-inv)}

.text.bg   {color: var(--bg)}
.text.bg-2 {color: var(--bg-2)}
.text.bg-3 {color: var(--bg-3)}
.text.fg   {color: var(--fg)}
.text.fg-2 {color: var(--fg-2)}
.text.fg-3 {color: var(--fg-3)}

.brand-font   {font-family: var(--brand-font)}
.display-font {font-family: var(--display-font)}
.text-font    {font-family: var(--text-font)}

/* -- Responsive -- */
@media screen and (max-width: 1000px) {
    .girly-swirly.var-2 {
        top: 100px;
        left: 10px;
    }
}

@media screen and (max-width: 850px) {
    .stackme1 {
        flex-direction: column-reverse;
        gap: 100px
    }
    .shrinkme1 {
        height: 160px;
    }
    #title-text {
        display: none
    }
    .hero-icon {
        width: 250px;
        transform: translate(21%, 25%);
    }
    .hero-cover {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(
            80deg,
            hsl(var(--hue), var(--bg-1-s), var(--bg-1-l)) 0%,
            transparent 80%);
    }
    .hero-big {
        color: hsl(var(--hue), 50%, 50%);
    }
}

@media screen and (max-width: 800px) {
    .girly-swirly.var-2 {
        top: 450px;
        left: 50px;
    }
}

@media screen and (max-width: 650px) {
    .nav-content {
        padding: 0 20px;
    }

    .girly-swirly.var-2 {
        top: 20px;
        left: auto;
        right: 100px;
    }

    .hero-cover {
        padding: 0;
    }

    .cards-hold .card-hold {
        flex-direction: column;
        gap: 50px;
    }

    .cards-hold .card-hold.reverse {
        flex-direction: column-reverse;
    }

    .hero-content {
        flex-direction: column-reverse;
        gap: 50px;
    }

    .hero-icon {
        transform: none;
        position: relative;
        width: 200px;
    }

    .hero {
        height: 90vh;
    }

    .hero-icon svg {
        opacity: 1;
        transform: scale(1);
        transition: 1s cubic-bezier(.5, .5, 0, 1);
    }

    .hero-icon svg.hidden {
        transform: scale(.5);
        opacity: 0;
    }

    .side-text {
        position: relative;
        z-index: 1;
    }
}

@media screen and (max-width: 600px) {
    .stackme2 {
        flex-direction: column;
        gap: 30px;
    }

    .command1 * {
        align-items: center;
        text-align: center;
    }

    .command1 .margin-right {
        margin: 0 auto;
    }
}

@media screen and (max-width: 550px) {
    .hero-big {
        color: hsl(var(--hue), 50%, 50%);
        text-shadow: 3px 3px 0 hsla(var(--hue), 50%, 100%, .5);
    }

    .hero-content {
        width: 100%;
    }

    .hero-cover .side-text {
        width: 100%;
        background-color: #fff9;
        padding: 30px 10px;
        color: var(--txt);
    }

    #title-hold {
        display: none;
    }
    .nav-links {
        width: 100%;
    }

    .nav-buttons {
        width: 100%;
    }
    .nav-button-hold {
        padding: 0 10px;
    }

    :root {
        --h1: 40px
    }

    .shrinkme1 {
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 450px) {
    #title-hold {
        display: flex;
    }
    #title-text {
        display: flex
    }

    #bars-hold {
        display: flex;
        margin-left: auto;
        margin-right: 0;
    }

    .nav-links {
        position: fixed;
        top: var(--nav-h);
        left: 0;
        width: 100%;
        height: auto;
        pointer-events: none;
    }

    .nav-buttons {
        width: 100%;
        flex-direction: column;
        background-color: hsl(var(--hue-2), 50%, 90%);
        flex-direction: column;
        transform-origin: top;
        transform: scaleY(0);
        transition: transform .3s cubic-bezier(.5,.5,0,1);
    }

    .engaged .nav-links {
        pointer-events: all;
    }
    .engaged .nav-buttons {
        transform: scaleY(1);
    }

    .nav-button-hold {
        width: 100%;
        padding: 15px 0;
    }

    .hero-small {
        font-size: 40px;
    }

    .card-main {
        padding: 30px
    }
}

@media screen and (max-width: 400px) {
    :root {
        --h1: 35px
    }

    .hero-small {
        font-size: 30px;
    }

    .hero-cover .side-text {
        padding: 40px 10px;
    }
}

@media screen and (max-width: 350px) {
    :root {
        --h1: 40px
    }

    .hero-small {
        font-size: 30px;
        margin-top: 10px;
    }

    .hero-cover .side-text {
        padding: 40px 10px;
    }

    .card-main {
        padding: 30px 20px
    }
}