* {
    margin: 0px;
    padding: 0px;
}

.container {
    display: flex;
    justify-content: space-around;
    border: 1px solid black;
    flex-wrap: wrap;
    padding: 20px;
}

.container .html,
.css,
.js {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px;
    margin: 10px;
    min-width: 300px;
    height: auto;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4);
    background-color: white;
}


.container .html span,
.css span,
.js span {
    font-size: 35px;
}

.container .html button,
.css button,
.js button, #next,#csnext,#jsnext {
    background-color: #0d6efd;
    border: none;
    width: 100px;
    height: 40px;
    padding: 10px;
    border-radius: 20px;
    color: white;
    margin: 10px;
}

.quiz{
    width:100%;
    min-height: 100vh;
    display: none;
    place-items:center ;
    background-color:hsl(206, 92%, 94%);
    }

    .opt{
       min-width: 40%;
        background-color: #fff;
        padding: 3rem 8rem;
        border-radius: 1rem;
        box-shadow: 0 1rem 1rem -0.7rem rgba(0,0, 0, 0.4);
        
        }

        

        .load{
            display:none;
            width: 420px;
            padding: 50px 0;
            border-radius: 8px;
            background: #fff;
            row-gap: 30px;
            flex-direction: column;
            align-items: center;
        }
        .circular-progress{
            position: relative;
            height: 250px;
            width: 250px;
            border-radius: 50%;
            background: conic-gradient(#7d2ae8 3.6deg, #ededed 0deg);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .circular-progress::before{
            content: "";
            position: absolute;
            height: 210px;
            width: 210px;
            border-radius: 50%;
            background-color: #fff;
        }
        .progress-value{
            position: relative;
            font-size: 40px;
            font-weight: 600;
            color: #7d2ae8;
        }
        .text{
            font-size: 30px;
            font-weight: 500;
            color: #606060;
        }





body{
    height:100vh ;
    background-size: cover;
    background-repeat: no-repeat;
    background:linear-gradient(150deg,rgb(185, 185, 185),rgb(56, 224, 215));
}