body {
                margin: 0;
                background-color: #121212;
                color: #ffffff;
                font-family: Arial, sans-serif;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
            }

            #progress {
                margin-top: 30px;
                margin-bottom: 20px;
                font-size: 16px;
                color: #ccc;
            }

            .fade {
                opacity: 0;
                transition: opacity 0.5s ease;
            }

            .show {
                opacity: 1;
            }

            .card {
                background: #1e1e1e;
                padding-top: 30px;
                padding-left: 10px;
                padding-right: 10px;
                padding-bottom: 30px;
                border-radius: 10px;
                max-width: 300px;
                text-align: center;
                box-shadow: 0 0 10px #5c5cff;
                width: 90%;
            }

            .option {
                background-color: #3d3df7;
                border: none;
                color: white;
                border-radius: 10px;
                padding: 15px 20px;
                margin: 10px;
                font-size: 14px;
                cursor: pointer;
                width: 90%;
                max-width: 290px;
            }

            .option:hover {
                background-color: #5c5cff;
            }

            button {
                margin-top: 20px;
                padding: 10px 20px;
                font-size: 16px;
                border-radius: 8px;
                border: none;
                cursor: pointer;
            }

            .question {
                font-weight: bold;
                font-size: 20px;
                color: #ffffff;
                margin-bottom: 30px;
            }

            #result {
                color: #222;
                font-weight: 600;
                text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
            }

            p.description {
                margin-bottom: 1rem;
                font-size: 0.85rem;
                color: #ccc;
                text-align: center;
                padding: 0 1rem;
            }

            h1 {
                margin-bottom: 0.3rem;
                font-size: 2rem;
            }

            .mbti-bg-ENFP {
                background-color: #ffeaa7;
            }

            .mbti-bg-INFP {
                background-color: #fab1a0;
            }

            .mbti-bg-INFJ {
                background-color: #a29bfe;
            }

            .mbti-bg-INTJ {
                background-color: #81ecec;
            }

            .mbti-bg-ENTP {
                background-color: #fdcb6e;
            }

            .mbti-bg-ENFJ {
                background-color: #ff7675;
            }

            .mbti-bg-ENTJ {
                background-color: #55efc4;
            }

            .mbti-bg-INTP {
                background-color: #74b9ff;
            }

            .mbti-bg-ISTP {
                background-color: #dfe6e9;
            }

            .mbti-bg-ISFP {
                background-color: #ffeaa7;
            }

            .mbti-bg-ISTJ {
                background-color: #b2bec3;
            }

            .mbti-bg-ISFJ {
                background-color: #dfe6e9;
            }

            .mbti-bg-ESTP {
                background-color: #fab1a0;
            }

            .mbti-bg-ESFP {
                background-color: #fd79a8;
            }

            .mbti-bg-ESTJ {
                background-color: #a29bfe;
            }

            .mbti-bg-ESFJ {
                background-color: #ffeaa7;
            }

            h2 {
                margin-bottom: 40px;
            }

            button.menu,
            button.share {
                padding: 1rem;
                margin-top: 40px;
                font-size: 1.1rem;
                background-color: #4e54c8;
                color: white;
                border: none;
                border-radius: 10px;
                width: 90%;
                max-width: 400px;
                transition: background-color 0.2s ease;
                cursor: pointer;
            }

            button.menu:active,
            button.share:active {
                background-color: #6a72f8;
            }