/* catppuccin ftw! */
@import url('/assets/catppuccin.css');

@font-face {
    font-family: Fredoka One;
    src: url(/assets/fonts/fredokaone/FredokaOne-Regular.ttf);
    font-display: swap;
}

:root {
    font-family: Fredoka One, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --accent-color: var(--ctp-mocha-pink);
    --accent-color-secondary: var(--ctp-mocha-red);
    --rctv-anim-time: 0.25s;
}

* {
    margin: 0;
    padding: 0;
}

.invisible {
    display: none;
    height: 0px;
    width: 0px;
}

body {
    display: table;
    width: 100%;
    min-height: 100vh;
    background-color: var(--ctp-mocha-base);
}

.text {
    transition: font-size var(--rctv-anim-time);
}

.box {
    width: fit-content;
    min-width: fit-content;
    text-align: center;
}

.boxes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.me {
    min-height: 135px;

    margin-left: 50%;
    transform: translate(-50%, 20px);
    transition: min-height var(--rctv-anim-time);
}

.title {
    font-size: 69px;
    font-weight: 500;
    transition: font-size var(--rctv-anim-time);
}

.title-primary {
    color: var(--accent-color);
    margin: 0 15px;
    /* this !important actually fixes the main text color transition not working lmao */
    transition: color 0.125s ease-out, font-size var(--rctv-anim-time) !important;
    display: inline-block;
    position: relative;
}

/* really awful solution */
.title-crack {
    margin-left: 16.5px;
}

.pronouns {
    color: var(--ctp-mocha-red);
    font-size: 18px;
    margin-top: 80px;
}

.title-primary:hover {
    color: var(--accent-color-secondary);
}

/* stolen from somewhere idk */
.title-primary:after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    border-radius: 2px;
    height: 1px;
    bottom: 11%;
    left: 0;
    background-color: var(--accent-color);
    transform-origin: center right;
    transition: transform 0.125s ease-out, height 0.125s ease-out, bottom 0.125s ease-out, background-color 0.125s ease-out, border-radius 0.125s ease-out;
}

.title-primary:hover:after {
    transform: scaleX(1);
    transform-origin: center left;
    border-radius: 3px;
    height: 6px;
    bottom: 8%;
    background-color: var(--accent-color-secondary);
}

/* --- */

.title-secondary {
    color: var(--ctp-mocha-text);
}

.title-tetriary {
    color: var(--ctp-mocha-text);
    margin: 0 -15px;
}

.title-container {
    background: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 78px;
    user-select: none;
    margin-top: 4px;
}

.me-content-container {
    transition: margin-top var(--rctv-anim-time);
}

.content-container {
    margin-top: 10px;
}

.text {
    color: var(--ctp-mocha-text);
    font-size: 26px;
    transition: font-size var(--rctv-anim-time);
}

.small-text {
    font-size: 16px;
}

/* i need to start using LESS or something */
.socials a:visited {
    color: var(--ctp-mocha-text);
}

.socials {
    color: var(--ctp-mocha-text);
    font-family: monospace;
    font-size: 16px;
    transition: font-size var(--rctv-anim-time);
    width: fit-content;
    margin: 0 auto;
    margin-top: 14px;
}

.socials p {
    text-align: left;
}

.ta-center {
    text-align: center !important;
}

.center-h {
    text-align: center;
    margin-left: 50%;
    transform: translate(-50%);
}

.chowonk-w {
    width: max-content;
}

.red {
    color: var(--ctp-mocha-red) !important;
}

.maroon {
    color: var(--ctp-mocha-maroon) !important;
}

.peach {
    color: var(--ctp-mocha-peach) !important;
}

.yellow {
    color: var(--ctp-mocha-yellow) !important;
}

.green {
    color: var(--ctp-mocha-green) !important;
}

.sky {
    color: var(--ctp-mocha-sky) !important;
}

.teal {
    color: var(--ctp-mocha-teal) !important;
}

.blue {
    color: var(--ctp-mocha-blue) !important;
}

.content {
    display: table-row;
    height: 100%;
}

/* if the window is too small, the footer overlaps the content */
footer {
    display: table-row;
    width: 100%;
}

footer>.boxes {
    margin-top: 2px;
}

hr {
    color: var(--ctp-mocha-surface1);
}

/* 88x31 buttons */
img[src*="88x31"] {
    image-rendering: auto;
    image-rendering: optimizeSpeed;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast;
}

/* i hate responsive web design */

/* smooth dynamic scaling things idk yes */
@media only screen and (max-width: 505px) {
    .title {
        font-size: 58px;
    }

    .text {
        font-size: 20px;
    }

    .me-content-container {
        margin-top: -2px;
    }

    .me {
        min-height: 115px;
    }
}

/* everything below max-width: 413px completely breaks and idk why */
@media only screen and (max-width: 420px) {
    .title {
        font-size: 48px;
    }

    .text {
        font-size: 18px;
    }
}