/* Coiny Regular */
@font-face {
    font-family: "Coiny";
    src: url("/fonts/Coiny-Regular-subset.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    transition: background-color 0.15s ease-in-out;
}

:root {
    --base: #faf4ed;
    --surface: #fffaf3;
    --overlay: #f2e9e1;
    --muted: #9893a5;
    --subtle: #797593;
    --text: #575279;
    --love: #b4637a;
    --gold: #ea9d34;
    --rose: #d7827e;
    --pine: #286983;
    --foam: #56949f;
    --iris: #907aa9;
    --highlight-low: #f4ede8;
    --highlight-med: #dfdad9;
    --highlight-high: #cecacd;

    --page-fade-duration: 1500ms;
    --page-fade-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --page-fade-translate-y: 5rem;
}

.dark {
    --base: #191724;
    --surface: #1f1d2e;
    --overlay: #26233a;
    --muted: #6e6a86;
    --subtle: #908caa;
    --text: #e0def4;
    --love: #eb6f92;
    --gold: #f6c177;
    --rose: #ebbcba;
    --pine: #31748f;
    --foam: #9ccfd8;
    --iris: #c4a7e7;
    --highlight-low: #21202e;
    --highlight-med: #403d52;
    --highlight-high: #524f67;
}

.coiny-regular {
    font-family: "Coiny", system-ui;
    font-weight: 400;
    font-style: normal;
}

::selection {
    background-color: var(--overlay);
}

@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(var(--page-fade-translate-y));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glowing {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}

[data-anim] {
    opacity: 0;
    transform: translateY(0.75rem);
    animation-duration: 600ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: forwards;
}

[data-anim="fade-up"] {
    animation-name: fadein;
}

[data-anim="fade-in"] {
    animation-name: fadein;
    transform: none;
}

[data-anim-delay="100"] {
    animation-delay: 100ms;
}
[data-anim-delay="200"] {
    animation-delay: 200ms;
}
[data-anim-delay="300"] {
    animation-delay: 300ms;
}
[data-anim-delay="400"] {
    animation-delay: 400ms;
}
[data-anim-delay="500"] {
    animation-delay: 500ms;
}
[data-anim-delay="600"] {
    animation-delay: 600ms;
}
[data-anim-delay="700"] {
    animation-delay: 700ms;
}
[data-anim-delay="800"] {
    animation-delay: 800ms;
}
[data-anim-delay="900"] {
    animation-delay: 900ms;
}
[data-anim-delay="1200"] {
    animation-delay: 1200ms;
}

@media (prefers-reduced-motion: reduce) {
    [data-anim] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100vh;
    font-family: system-ui, sans-serif;
    background-color: var(--base);
    color: var(--text);
    display: grid;
    place-items: center;
    overflow: auto;
    overflow-anchor: none;

    .page {
        box-shadow:
            rgba(0, 0, 0, 0.19) 0px 10px 20px 0px,
            rgba(0, 0, 0, 0.23) 0px 6px 6px 0px;
        box-sizing: border-box;
        width: 8.5in;
        height: 9in;
        margin-top: 5px;
        margin-bottom: 5px;
        background-color: var(--surface);
        padding: 0.5in;
        position: relative;
        display: grid;
        grid-template-columns: 1fr 2.5in;
        grid-template-rows: 1.1in 0.2fr 0.4fr auto;
        gap: 0px 0px;
        grid-template-areas:
            "header header"
            "bio aside"
            "world aside"
            "footer footer";
        overflow: hidden;

        a {
            color: var(--foam);
            transition:
                0.1s color ease-in-out,
                0.1s text-decoration ease-in-out;
            text-decoration: none;
            font-weight: 500;

            &:hover,
            &:active,
            &:focus {
                color: var(--iris);
                text-decoration: underline;
            }
        }

        .header {
            grid-area: header;
            font-size: 3em;
        }

        .bio {
            grid-area: bio;
            padding: 0 0.5in 0 0;
            text-align: justify;
            overflow-wrap: break-word;
            hyphens: auto;

            .small-text {
                font-style: italic;
                font-size: 0.8em;
                padding: 0;
                margin: 0;
            }
        }

        .world {
            grid-area: world;
            display: flex;
            gap: 0.5em;
        }

        .aside {
            grid-area: aside;
            display: flex;
            flex-direction: column;
            align-items: center;

            .avatar-wrapper {
                position: relative;

                .avatar {
                    width: 2.5in;
                    height: 2.5in;
                    border-radius: 100%;
                    pointer-events: none;
                }
            }
        }

        .footer {
            grid-area: footer;
            display: grid;
            grid-template-columns: 0.3fr 0.7fr;
            column-gap: 0.5in;
            align-self: end;
            margin-top: 1.5em;

            .copyright {
                text-align: left;
            }

            .gpg {
                text-align: right;

                .gpg-key {
                    &:hover,
                    &:active,
                    &:focus {
                        text-decoration: none;
                        transition:
                            0.1s color ease-in-out,
                            0.1s text-decoration ease-in-out;

                        & span {
                            text-decoration: underline;
                            transition:
                                0.1s color ease-in-out,
                                0.1s text-decoration ease-in-out;
                        }
                    }
                }
            }
        }

        .button {
            display: block;
            padding: 1em 2em;
            color: var(--text);
            z-index: 0;
            position: relative;
            border-radius: 10px;
            cursor: pointer;

            &:hover,
            &:active,
            &:focus {
                text-decoration: unset;
            }

            &:before {
                content: "";
                background: linear-gradient(
                    45deg,
                    var(--love),
                    var(--gold),
                    var(--rose),
                    var(--pine),
                    var(--foam),
                    var(--iris),
                    var(--love)
                );
                position: absolute;
                top: -1px;
                left: -1px;
                background-size: 200%;
                z-index: -1;
                filter: blur(2px);
                width: calc(100% + 2px);
                height: calc(100% + 2px);
                animation: glowing 30s linear infinite;
                opacity: 0;
                transition: opacity 0.3s ease-in-out;
                border-radius: 10px;
                opacity: 1;
            }

            &:after {
                z-index: -1;
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                background: var(--base);
                left: 0;
                top: 0;
                border-radius: 10px;
                transition: background 0.1s ease-in-out;
            }
        }

        .theme {
            position: absolute;
            bottom: 0.125in;
            right: 0.125in;
            background-color: var(--base);
            color: var(--gold);
            border: 1px solid var(--overlay);
            border-radius: 10in;
            margin: 0.125in 0 0;
            padding: 0.125in;
            max-width: 0.25in;
            height: 0.25in;
            cursor: pointer;
            transition: max-width 0.5s ease;
            overflow: hidden;
            display: inline-flex;
            align-items: center;

            &:hover {
                max-width: 2.5in;
            }

            .material-icons {
                font-size: 1.25em;
                font-style: normal;
            }

            .theme-text {
                white-space: nowrap;
                padding: 0 0.125in;
                user-select: none;
            }
        }
    }
}

/* large desktops */
@media only screen and (min-width: 2000px) {
    body {
        .page {
            height: 11in;
        }
    }
}

/* tablets and desktop */
@media only screen and (min-width: 768px) and (max-width: 900px) {
    html,
    body {
        overflow: auto;

        .page {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0.25in;
            box-shadow: none;
            animation: none;
            overflow: auto;
            opacity: 1;

            .theme:focus,
            .theme:active,
            .theme:hover {
                max-width: 0.25in;
            }

            .theme-text {
                display: none;
            }

            .header {
                opacity: 1;
            }

            .bio {
                & > * {
                    opacity: 1;
                }
            }

            .world {
                opacity: 1;
            }

            .aside {
                opacity: 1;
            }

            .footer {
                margin-top: 0.25in;
                grid-template-rows: none;
                grid-template-columns: auto;
                opacity: 1;

                .copyright {
                    text-align: center;
                }

                .gpg {
                    text-align: center;
                    grid-row: 1;
                }
            }
        }
    }
}

/* phones */
@media only screen and (max-width: 767px) {
    html,
    body {
        overflow: auto;

        .page {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0.25in;
            box-shadow: none;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 0.1fr 0.2fr 0.4fr auto;
            gap: 0px 0px;
            grid-template-areas:
                "header"
                "aside"
                "bio"
                "world"
                "footer";
            animation: none;
            overflow: auto;
            opacity: 1;

            .header {
                font-size: 2em;
                opacity: 1;
            }

            .theme:focus,
            .theme:active,
            .theme:hover {
                max-width: 0.25in;
            }

            .theme-text {
                display: none;
            }

            .bio {
                grid-template-columns: none;
                grid-template-rows: 2.5in 1fr;
                justify-content: center;
                align-items: center;
                padding: 0;

                & > * {
                    opacity: 1;
                }

                .small-text {
                    text-align: center;
                    margin: 0.5em 0;
                }
            }

            .aside {
                opacity: 1;
            }

            .avatar {
                grid-row: 1;
            }

            .world {
                opacity: 1;
            }

            .footer {
                margin-top: 0.25in;
                position: static;
                grid-template-rows: none;
                grid-template-columns: auto;
                width: 100%;
                opacity: 1;

                .copyright {
                    text-align: center;
                }

                .gpg {
                    text-align: center;
                    grid-row: 1;
                }
            }
        }
    }
}