* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Helvetica, Arial, sans-serif;

    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

/* LIGHT MODE */

body {
    background: #f4f8ff;
}

.background {
    position: fixed;
    inset: 0;

    background:
        radial-gradient(
            circle at top left,
            rgba(96,165,250,0.35),
            transparent 35%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(192,132,252,0.28),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #f8fbff,
            #eef5ff,
            #ffffff
        );
}

.notice-box {
    position: relative;
    z-index: 2;

    width: min(760px, 92vw);

    padding: 60px 50px;

    border-radius: 40px;

    background: rgba(255,255,255,0.65);

    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);

    border: 1px solid rgba(255,255,255,0.5);

    box-shadow:
        0 25px 70px rgba(15,23,42,0.12);

    text-align: center;
}

.notice-title {
    color: #111827;

    font-size: clamp(2rem, 5vw, 3.5rem);

    font-weight: 800;

    margin-bottom: 40px;

    letter-spacing: -0.03em;
}

.language-buttons {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.language-button {
    border: none;

    min-width: 220px;

    padding: 26px 34px;

    border-radius: 26px;

    cursor: pointer;

    font-size: 1.35rem;
    font-weight: 700;

    color: #111827;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.85),
            rgba(235,243,255,0.75)
        );

    backdrop-filter: blur(18px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 10px 30px rgba(15,23,42,0.08);

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.language-button:hover {
    transform: translateY(-5px) scale(1.02);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,1),
            rgba(220,235,255,0.9)
        );

    box-shadow:
        0 18px 40px rgba(15,23,42,0.14);
}

/* DARK MODE */

@media (prefers-color-scheme: dark) {

    body {
        background: #020617;
    }

    .background {
        background:
            radial-gradient(
                circle at top left,
                rgba(59,130,246,0.45),
                transparent 35%
            ),

            radial-gradient(
                circle at bottom right,
                rgba(168,85,247,0.45),
                transparent 35%
            ),

            linear-gradient(
                135deg,
                #020617,
                #0f172a,
                #111827
            );
    }

    .notice-box {
        background: rgba(255,255,255,0.08);

        border: 1px solid rgba(255,255,255,0.12);

        box-shadow:
            0 25px 70px rgba(0,0,0,0.45);
    }

    .notice-title {
        color: white;
    }

    .language-button {
        color: white;

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,0.16),
                rgba(255,255,255,0.06)
            );

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.15),
            0 10px 30px rgba(0,0,0,0.2);
    }

    .language-button:hover {
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,0.24),
                rgba(255,255,255,0.1)
            );

        box-shadow:
            0 18px 40px rgba(0,0,0,0.28);
    }
}

/* MOBILE */

@media (max-width: 700px) {

    .notice-box {
        padding: 40px 24px;
        border-radius: 30px;
    }

    .language-buttons {
        flex-direction: column;
    }

    .language-button {
        width: 100%;
        min-width: unset;
    }
}