html {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Global transition for theme switching */
*,
*::before,
*::after {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, fill 0.2s ease, stroke 0.2s ease, box-shadow 0.2s ease;
}

html.lang-loading body {
    visibility: hidden;
}

html[data-effects="off"] .bubbles-container,
html[data-effects="off"] .fireflies-container,
html[data-effects="off"] .clouds-container,
html[data-effects="off"] .theme-transition-overlay {
    display: none !important;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    position: relative;
    background: var(--bg-gradient, var(--bg-gradient-light));
    background-attachment: fixed;
    background-size: cover;
    text-align: center;
    padding-top: 60px;
    font-family: 'Dancing Script', 'Segoe Script', 'Lucida Handwriting', 'Bradley Hand', 'Raleway', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
}



h1,
h2 {
    font-family: 'Dancing Script', 'Segoe Script', 'Lucida Handwriting', 'Bradley Hand', 'Raleway', sans-serif;
    margin-bottom: 1em;
    font-weight: bold;
}

h1 {
    font-size: 3.2em;
    color: var(--text-color);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rainbow-404 {
    background: linear-gradient(45deg, #ff3366, #33ff66, #6633ff, #ffff33, #ff6633, #33ffff, #ff33ff, #66ff33, #3366ff, #ffcc33);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow 12s linear infinite;
    font-size: 4.5em;
}

@keyframes rainbow {
    0% {
        background-position: 0% 50%;
    }

    20% {
        background-position: 80% 20%;
    }

    40% {
        background-position: 30% 80%;
    }

    60% {
        background-position: 90% 60%;
    }

    80% {
        background-position: 10% 30%;
    }

    100% {
        background-position: 0% 50%;
    }
}

h2 {
    font-size: 2.4em;
    color: var(--text-color);
    margin-top: 1.5em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}