:root {
    --bg-light: #fdfdfc /*#e1f0f9*/;
    --text-light: #111;
    --divider-light: #111;

    --bg-dark: #111;
    --text-dark: #f4f4f4;
    --divider-dark: #f4f4f4;

    --transition: 0.8s cubic-bezier(.4,0,.2,1);
}

body {
    margin: 0;
    font-family: "Georgia", serif;
    background: var(--bg-light);
    color: var(--text-light);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    transition: background var(--transition), color var(--transition);
}

body.dark {
    background: var(--bg-dark);
    color: var(--text-dark);
}

.page {
    width: min(760px, 92%);
    text-align: center;
}

h1 {
    font-weight: 400;
    letter-spacing: 0.08em;
    font-size: 2.8rem;
    margin-bottom: 2rem;
}

.divider {
    width: 120px;
    height: 1px;
    margin: 0 auto 4rem auto;
    background: var(--divider-light);
    transition: width var(--transition), background var(--transition);
}

body.dark .divider {
    background: var(--divider-dark);
}

.hero:hover .divider {
    width: 180px;
}

.riddle-text {
    font-size: 1.5rem;
    line-height: 2.2rem;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

input {
    border: none;
    border-bottom: 1px solid currentColor;
    background: transparent;
    text-align: center;
    font-size: 1.2rem;
    padding: 0.6rem;
    width: 60%;
    max-width: 300px;
    outline: none;
    transition: opacity 0.4s ease;
}

button {
    background: none;
    border: none;
    font-size: 1rem;
    margin-top: 1.2rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.4s ease;
}

button:hover {
    opacity: 1;
}

.response {
    margin-top: 2rem;
    font-style: italic;
    min-height: 2rem;
    transition: opacity var(--transition);
}

.enter {
    display: inline-block;
    margin-top: 2rem;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.enter.visible {
    opacity: 1;
}

.login-box {
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

.login-box.visible {
    opacity: 1;
    transform: translateY(0);
}

footer {
    margin-top: 6rem;
    font-size: 0.8rem;
    opacity: 0.4;
}

@keyframes fadeIn {
    to { opacity: 1; }
}