webtrigon-job-portal/src/pages/Quiz/Quiz.module.scss

.quizContainer {
    .upfold {
        height: 40vh;
        background-color: #151515;
        position: relative;

        &::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-left: 68vw solid #262626;
            border-right: 75vw solid white;
            border-top: 3rem solid transparent;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 54.5%;
            margin-left: auto;
            height: 10vh;

            h4 {
                color: white;
                font-size: 2.4rem;
                font-weight: 200;
                letter-spacing: 0.024rem;
                margin-top: 0;
                align-self: flex-end;
            }

            ion-icon {
                color: white;
                margin-right: 3rem;
                width: 3rem;
                height: 4rem;
                align-self: flex-end;

            }
        }

        // .questionHolder {
        //     display: flex;
        //     flex-direction: column;
        //     align-items: center;
        //     justify-content: space-between;
        //     text-align: center;
        //     color: white;
        //     width: 90%;
        //     margin: 0 auto;
        //     height: 27vh;
        //     background-image: url("../../assets/icons/desktop-particles.svg");
        //     background-position: center;
        //     background-repeat: no-repeat;
        //     background-size: 150% 150%;

        //     .questionNumber {
        //         font-size: 1.3rem;
        //         font-weight: 600;
        //     }
        //     .question {
        //         font-size: 1.8rem;
        //         font-weight: 300;
        //     }

        //     .quizTimer {
        //         .border {
        //             width: 6rem;
        //             height: 6rem;
        //             border-radius: 50%;
        //             border: 0.2rem solid #6BD534;
        //             .time {
        //                 margin-top: 1.8rem;
        //                 font-size: 1.4rem;
        //             }
        //         }
        //     }
        // }
    }

    .quizOptions {
        height: 60vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        .options {
            width: 90%;
            margin: 0 auto;
        }
    
        .button {
            text-decoration: none;
            width: 100%;
            ion-button {
                --background: #DDDDDD;
                width: 90%;
                margin: 0 auto;
            }
        }

        .active {
            ion-button {
                --background: var(--primary-button-color);
            }
        }
    }

}