* {
            box-sizing: border-box;
        }

        html, body {
            margin: 0;
            min-height: 100%;
        }

        body {
            min-height: 100vh;

            font-family: Georgia, "Times New Roman", serif;

            color: #ded8c8;

            background-image:
                linear-gradient(
                    rgba(5, 3, 3, 0.45),
                    rgba(5, 3, 3, 0.72)
                ),
                url("../res/images/bg/bg.png");

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }


        /* Dark vignette around the screen */
        body::before {
            content: "";

            position: fixed;
            inset: 0;

            pointer-events: none;

            box-shadow:
                inset 0 0 170px rgba(0, 0, 0, 0.90);

            z-index: 10;
        }


        .page {
            position: relative;
            z-index: 1;

            width: min(900px, 92%);

            margin: auto;
            padding: 55px 0 80px;

            text-align: center;
        }


        /* ========================= */
        /*           TITLE           */
        /* ========================= */

        .header {
            margin-bottom: 35px;
        }

        h1 {
            margin: 0;

            font-size: clamp(48px, 8vw, 78px);

            letter-spacing: 10px;

            color: #eee3c6;

            text-shadow:
                0 2px 3px #000,
                0 0 12px rgba(206, 154, 71, 0.25),
                0 0 30px rgba(100, 0, 0, 0.30);
        }


        .latin {
            margin-top: 10px;

            color: #b39a70;

            font-size: 16px;
            font-style: italic;

            letter-spacing: 4px;

            text-shadow:
                0 2px 4px #000;
        }


        .latin-translation {
            margin-top: 6px;

            color: #89775b;

            font-size: 12px;
            font-style: italic;

            opacity: 0;

            transition: opacity 0.4s ease;
        }


        .latin:hover + .latin-translation {
            opacity: 1;
        }


        .divider {
            width: min(650px, 80%);

            height: 1px;

            margin: 30px auto;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    #60452c,
                    #c09a58,
                    #60452c,
                    transparent
                );

            box-shadow:
                0 0 8px rgba(207, 163, 83, 0.25);
        }


        /* ========================= */
        /*           RULES           */
        /* ========================= */

        .rules {
            max-width: 760px;

            margin: auto;

            padding: 30px 38px;

            text-align: left;

            background:
                rgba(9, 6, 5, 0.76);

            border:
                1px solid rgba(187, 146, 78, 0.35);

            box-shadow:
                0 15px 45px rgba(0, 0, 0, 0.60),
                inset 0 0 35px rgba(104, 30, 19, 0.09);

            backdrop-filter: blur(3px);
        }


        .rules h2 {
            margin: 0 0 20px;

            text-align: center;

            font-size: 21px;
            font-weight: normal;

            letter-spacing: 5px;

            color: #c6aa76;
        }


        .rule {
            position: relative;

            margin: 0;

            padding: 12px 0 12px 30px;

            color: #c6c0b0;

            line-height: 1.65;
        }


        .rule::before {
            content: "I";

            position: absolute;
            left: 4px;
            top: 12px;

            color: #7c5134;

            font-family: Georgia, serif;
            font-weight: bold;
        }


        .rule:nth-of-type(2)::before {
            content: "II";
        }

        .rule:nth-of-type(3)::before {
            content: "III";
        }

        .rule:nth-of-type(4)::before {
            content: "IV";
        }


        .rules a {
            color: #d1ad69;
        }


        .rules a:hover {
            color: #f0d79d;
        }


        /* ========================= */
        /*        CHALLENGE          */
        /* ========================= */

        .challenge {
            max-width: 700px;

            margin: 38px auto 0;

            padding: 22px;

            background:
                rgba(5, 3, 3, 0.52);

            border-top:
                1px solid rgba(178, 130, 70, 0.25);

            border-bottom:
                1px solid rgba(178, 130, 70, 0.25);

            text-shadow:
                0 2px 4px #000;
        }


        .challenge-main {
            color: #d7ccb5;

            font-size: 20px;

            line-height: 1.6;
        }


        .number {
            color: #e2bd70;

            font-size: 29px;

            font-weight: bold;

            text-shadow:
                0 0 9px rgba(220, 168, 75, 0.25);
        }


        .extra {
            margin-top: 13px;

            color: #958b79;

            font-size: 14px;

            line-height: 1.55;
        }


        /* ========================= */
        /*           LINKS           */
        /* ========================= */

        .links {
            display: flex;

            justify-content: center;
            flex-wrap: wrap;

            gap: 14px;

            margin-top: 36px;
        }


        .links a {
            min-width: 185px;

            padding: 15px 24px;

            color: #c4b79f;

            text-decoration: none;

            letter-spacing: 2px;

            background:
                rgba(7, 4, 4, 0.78);

            border:
                1px solid rgba(151, 112, 65, 0.45);

            box-shadow:
                0 7px 18px rgba(0, 0, 0, 0.45);

            transition:
                transform 0.2s ease,
                background 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease;
        }


        .links a:hover {
            transform: translateY(-3px);

            color: #f1dfbb;

            background:
                rgba(67, 17, 12, 0.80);

            border-color:
                rgba(207, 157, 76, 0.75);

            box-shadow:
                0 10px 25px rgba(0, 0, 0, 0.60),
                0 0 15px rgba(121, 29, 17, 0.25);
        }


        .links .enter {
            color: #ead6ad;

            border-color:
                rgba(206, 158, 78, 0.65);

            font-size: 17px;
        }


        /* ========================= */
        /*           FOOTER          */
        /* ========================= */

        .footer {
            margin-top: 65px;

            font-size: 13px;

            letter-spacing: 2px;

            text-shadow:
                0 2px 4px #000;
        }


        .footer a {
            color: #857966;

            text-decoration: none;
        }


        .footer a:hover {
            color: #c6ae82;
        }


        .final-latin {
            margin-top: 23px;

            color: #65594b;

            font-size: 12px;
            font-style: italic;

            letter-spacing: 4px;
        }


        /* ========================= */
        /*           MOBILE          */
        /* ========================= */

        @media (max-width: 600px) {

            h1 {
                letter-spacing: 5px;
            }

            .rules {
                padding: 25px 20px;
            }

            .links {
                flex-direction: column;
            }

            .links a {
                width: 100%;
            }

        }