:root {
    /* Mocha (Dark) */
    --base: #1e1e2e;
    --text: #cdd6f4;
    --rosewater: #f5e0dc;
    --flamingo: #f2cdcd;
    --pink: #f5c2e7;
    --mauve: #cba6f7;
    --red: #f38ba8;
    --maroon: #eba0ac;
    --peach: #fab387;
    --yellow: #f9e2af;
    --green: #a6e3a1;
    --teal: #94e2d5;
    --sky: #89dceb;
    --sapphire: #74c7ec;
    --blue: #89b4fa;
    --lavender: #b4befe;
    --crust: #11111b;
}

.light-theme {
    /* Latte (Light) */
    --base: #eff1f5;
    --text: #4c4f69;
    --rosewater: #dc8a78;
    --flamingo: #dd7878;
    --pink: #ea76cb;
    --mauve: #8839ef;
    --red: #d20f39;
    --maroon: #e64553;
    --peach: #fe640b;
    --yellow: #df8e1d;
    --green: #40a02b;
    --teal: #179287;
    --sky: #04a5e5;
    --sapphire: #209fb5;
    --blue: #1e66f5;
    --lavender: #7287fd;
    --crust: #dce0e8;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
}

body {
    background-color: var(--base);
    color: var(--text);
    font-family: "Noto Sans JP", sans-serif;
    margin: 0;
    padding: 2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

h1 {
    font-size: 4rem;
    margin-bottom: 2rem;
    text-align: center;
    line-height: 1.2;
}

.controls {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 1rem;
    z-index: 100;
}

button {
    background-color: var(--crust);
    color: var(--text);
    border: none;
    padding: 0.5rem;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s, filter 0.2s, background-color 0.4s, color 0.4s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

button:hover {
    filter: brightness(1.2);
    transform: scale(1.1);
}

.notification {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    background-color: var(--green);
    color: var(--base);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 1000;
}

.notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    gap: 0.75rem;

    a,
    span {
        text-decoration: none;
        transition: transform 0.2s, color 0.2s;

        &:hover {
            transform: scale(1.05);
            cursor: pointer;
        }

        &.osu {
            color: var(--pink);
        }

        &.discord {
            color: var(--lavender);
        }

        &.github {
            color: var(--mauve);
        }

        &.myanimelist {
            color: var(--blue);
        }

        &.vndb {
            color: var(--teal);
        }

        &.bluesky {
            color: var(--sky);
        }
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
        margin-top: 4rem; /* Space for fixed controls */
    }

    .links {
        font-size: 1.25rem;
        gap: 1rem;
    }

    button {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    body {
        padding: 1rem;
    }

    h1 {
        font-size: 2rem;
    }

    .links {
        font-size: 1.1rem;
    }
}