gamestyle.css

/* all for mobile */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
}

body {
    height: 120vh;
    color: white;
    background-image: linear-gradient(147deg, #fcc332 0%, #0c6e81 74%);
    background-repeat: no-repeat;
    background-size: cover;
}

.header {
    display: flex;
    justify-content: space-around;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #080749;
    box-shadow:1px 1px 1px 1px rgb(211, 203, 203);
}

/* images */

img {
    margin-top: 0.7rem;
    width: 50vw;
    height: 50vw;
    display: block;
    margin-left: 4.5rem;
    border-radius: 10%;
}

/* progress bar begins */

progress {
    margin-top: 0.4rem;
    -webkit-appearance: none;
    width: 40vw;
    height: 3.9vh;
    border-radius: 15px;
}

::-webkit-progress-bar {
    background-color: rgb(228, 211, 228);
    border-radius: 15px;
}

::-moz-progress-bar {
    background-color: rgb(228, 211, 228);
    border-radius: 15px;
}

::-webkit-progress-value {
    background: #20a020;
    border-radius: 15px;
}

/* progress bar ends */

/* all structuring */

.container {
    font-size: 1.2rem;
    color: rgb(240, 240, 39);
}

.container h3 {
    font-size: 1.3rem;
}

.container h3 span {
    color: #00acee;
}

.questionandoptions {
    margin-top: 1rem;
    margin-left: 0.7rem;
    margin-right: 0.7rem;
}

.score {
    margin-top: 0.9rem;
    font-size: 1.7rem;
}

.score span {
    font-size: 1.8rem;
    color: #00FF00;
}

.question h2:first-child {
    margin-bottom: 1rem;
}

/* styling the options */

.options {
    cursor: pointer;
    color: black;
    font-weight: bold;
    margin-top: 1.5rem;
}

.options li {
    border-radius: 15px;
    margin-bottom: 0.5rem;
    list-style-type: none;
    display: block;
    padding: 0.8rem;
    background-color: rgb(255, 255, 255);
}

/* timer animation for mobile devices */

.timer {
    padding: 0.3rem;
    width:6.5rem;
    height:3.3rem;
    position: absolute;
    left:70%;
    top: 6.3rem;
    font-size: 1.4rem;
    box-shadow:1px 2px 1px 1px #10aac9;
    border-radius: 20px;
    background:#000;

}

.timerseconds {

    font-weight: bold;
    font-size: 2rem;
    color: rgb(44, 255, 44);
}
.lowontime{
    padding:0 0 0 5px;
    color: red;
}

.clock{
    position:absolute;
    top:50%;
    left:71%;
    width:40px;
    transform:translate(-50% ,-50%);
    height:40px;
    border:3px solid #ff5f5f;
    border-radius:50%;
    background:#fff;
    box-shadow:-0.5px 0.5px 0 #e23232, inset 0 0 10px  rgba(0,0,0,0.5);
}
.clock:before{
   content:'';
   position:absolute;
   top:calc(50% - 2px);
   left:50%;
   width:40%;
   height:2px;
   background:#262626;
   border-radius:5px;
   animation: animate 25s linear infinite;
   transform-origin:left;
}
.clock:after{
   content:'';
   position:absolute;
   top:calc(50% - 2px);
   left:50%;
   width:30%;
   height:2px;
   background:#262626;
   border-radius:5px;
   animation: animate 40s linear infinite;
   transform-origin:left;
}
                           
.time1{
    position:absolute;
    background-color:rgb(78, 76, 76);
    height:5px;
    width:2px;
    left:50%;
    top:3.55%;
    transform:translate(-50%,1%);
}
.time2{
    position:absolute;
    background-color:rgb(78, 76, 76);
    height:2px;
    width:5px;
    left:85%;
    top:calc(50% - 1px);
    
}

.time3{
    position:absolute;
    background-color:rgb(78, 76, 76);
    height:5px;
    width:2px;
    left:49.55%;
    top:85%;
    transform:translate(-50%,1%);
}

.time4{
    position:absolute;
    background-color:rgb(78,76,76);
    height:2px;
    width:5px;
    left:5%;
    top:calc(50% - 1px);
    transform:translate(-50%,1%);
}

.secondhand{
    position:absolute;
    background-color:#e23232;
    height:2px;
    width:41%;
    top:calc(50% - 1px);
    left:40%;
    animation: second 35s steps(60 , end) infinite;
    transform-origin:24% 70%;
    z-index:1;
}

.button1{
    background-color:#fff;
    height:5px;
    width:11px;
    position:absolute;
    left:50%;
    top:-25%;
    border-radius:35%;
    transform:translate(-50% , 45%);

}

.button1:before{
    content:'';
    position:absolute;
    height:6px;
    width:3.5px;
    left:3.7px;
    top:50%;
    background:lavenderblush;
}
.button2{
    background-color:#fafcf7;
    height:4px;
    width:8px;
    position:absolute;
    left:33px;
    transform:rotate(47deg);
}
.button-center{
    display:block;
    position: absolute;
    top:50%;
    left:70%;
    transform:translate(-50% , -50%);
    width:5px;
    height:5px;
    background:#ff5f5f;
    border-radius:50%;
    z-index:1;
}
@keyframes animate{
    0%
    {
        transform:rotate(-90deg);
    }
    100%
    {
        transform:rotate(270deg);
    }

}
 @keyframes second{
     0%{
         transform:rotate(0deg);
     }
     100%{
         transform:rotate(360deg);
     }
 }

/*timer animatins ends */
/* for PC media query changes */

@media only screen and (min-width:600px) {
    .header {
        justify-content: space-between;
        padding: 1.1rem 2rem 1.1rem 2.4rem;
    }
    /* images */
    img {
        margin-top: 0.9rem;
        width: 18vw;
        height: 18vw;
        display: block;
        margin: auto;
        border-radius: 10%;
    }
    /* progress bar begins */
    progress {
        width: 23vw;
        height: 3.6vh;
        border-radius: 15px;
    }
    ::-webkit-progress-bar {

        border-radius: 15px;
    }
    ::-moz-progress-bar {

        border-radius: 15px;
    }
    ::-webkit-progress-value {

        border-radius: 15px;
    }
    /* progress bar ends */
    .score {
        margin-right: 3rem;
        margin-top: 0.3rem;
        font-size: 2.1rem;
    }
    .score span {
        font-size: 2.6rem;

    }
    .container h3 {
        font-size: 1.5rem;
    }
    .questionandoptions {
        margin-top: 1rem;
        margin-left: 1.3rem;
        margin-right: 1.3rem;
        font-size: 1.3rem;
    }
    .question h2:first-child {
        margin-bottom: 0.3rem;
    }
    .question{
        margin-left: 1rem;
        margin-bottom: 1rem;
    }
    .options li {
        margin-top: 0.6 rem;
        width: 40vw;
        margin-right: 1rem;
       margin-left: 5rem;
        border-radius: 15px;
        margin-bottom: 1.0rem;
        display: inline-block;
        padding: 1.2rem;
        background-color: rgb(255, 255, 255);
    }
    .leftside{
        margin-right: 0.4rem;
    }
    /* timer for pc and tablets */
    .timer {
        padding: 1.2rem;
        width:9.5rem;
        height:5.5rem;
        left:84.5%;
        top: 7rem;
        font-size: 2.0rem;
    }
    
    .timerseconds {

        font-size: 2.4rem;

    }
    .questiondisplay{
        width: 80vw;
    }
    
    .clock{
        position:absolute;
        top:50%;
        left:70%;
        width:55px;
        transform:translate(-50% ,-50%);
        height:55px;
        border:3px solid #ff5f5f;
        border-radius:50%;
        background:#fff;
        box-shadow:-0.5px 0.5px 0 #e23232, inset 0 0 10px  rgba(0,0,0,0.5);
   
   }
   .clock:before{
       content:'';
       position:absolute;
       top:calc(50% - 2px);
       left:50%;
       width:40%;
       height:3px;
       background:#262626;
       border-radius:5px;
       animation: animate 25s linear infinite;
       transform-origin:left;
   }
   .clock:after{
       content:'';
       position:absolute;
       top:calc(50% - 2px);
       left:50%;
       width:30%;
       height:3px;
       background:#262626;
       border-radius:5px;
       animation: animate 40s linear infinite;
       transform-origin:left;
   }
                                 
   .time1{
       position:absolute;
       background-color:rgb(78, 76, 76);
       height:5px;
       width:2px;
       left:50%;
       top:0.5%;
       transform:translate(-50%,1%);
   }
   .time2{
       position:absolute;
       background-color:rgb(78, 76, 76);
       height:2.5px;
       width:5px;
       left:90%;
       top:calc(50% - 1px);
       
   }
   
   .time3{
       position:absolute;
       background-color:rgb(78, 76, 76);
       height:5px;
       width:2.5px;
       left:49.55%;
       top:90%;
       transform:translate(-50%,1%);
   }
   
   .time4{
       position:absolute;
       background-color:rgb(78,76,76);
       height:2.5px;
       width:5px;
       left:5%;
       top:calc(50% - 1px);
       transform:translate(-50%,1%);
   }
   
   .secondhand{
       position:absolute;
       background-color:#e23232;
       height:2px;
       width:43%;
       top:calc(50% - 1px);
       left:40%;
       animation: second 35s steps(60 , end) infinite;
       transform-origin:24% 70%;
       z-index:1;
   }
   
   .button1{
       background-color:#fff;
       height:5px;
       width:11px;
       position:absolute;
       left:50%;
       top:-25%;
       border-radius:35%;
       transform:translate(-50% , 45%);
   
   }
   
   .button1:before{
       content:'';
       position:absolute;
       height:6px;
       width:3.5px;
       left:3.55px;
       top:50%;
       background:lavenderblush;
   }
   .button2{
       background-color:#fafcf7;
       height:4px;
       width:8px;
       position:absolute;
       left:46px;
       transform:rotate(45deg);
   }
   .button-center{
       display:block;
       position: absolute;
       top:50%;
       left:70%;
       transform:translate(-50% , -50%);
       width:5px;
       height:5px;
       background:#ff5f5f;
       border-radius:50%;
       z-index:1;
   }
   @keyframes animate{
       0%
       {
           transform:rotate(-90deg);
       }
       100%
       {
           transform:rotate(270deg);
       }
   }
/*keyframes of timer ends */

}
/*added  keyframes of second hand*/
@keyframes second{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
/*options work perfectly for both*/
.options .clicked{
    color: white;
    background-color: red;
}
.options .right{
    color: white;
    background-color: rgb(27, 209, 27);
}