/*Navbar  */
.brand {
    color:yellow;
    font-weight:bold;
    
}
/*Container */
#container {
    position: absolute;
    left: 33%;
    top: 15%;
    width: 600px;
    height: 500px;
    border: 1px solid purple;
    border-radius: 12px;
    box-shadow: 5px 10px 8px 10px #888888;
    background: hsla(240, 2%, 25%, 1);
    background: linear-gradient(90deg, hsla(240, 2%, 25%, 1) 0%, hsla(60, 22%, 30%, 1) 100%);
    
}
/*Counter */
#counter {
    text-align: center;
    padding:10px;
    font-weight: bold;
}
/*heading 1 */

h1{
    text-align: center;
    color:yellow;
    font-weight:bold;
}

/*Paragraph */
#lead {
    font-weight:bold;
    padding:20px;
    color:white;
}

/* start quiz button */

.start-button {
    margin-left: 28%;
    font-weight: bold;
    font-size:20px;
    background: yellow;
    border-radius: 12px;       
}

/*quiz content div */
#quizContent{
    color:white;
    margin-top:10px;
    margin-left: 30px; 
}

/* list for choices*/
li{
    cursor: pointer;       
}

/* form */

#initials{
    padding:5px;
}
#labelCreate{
    margin-top:20px;
    font-weight:bold;
    padding:5px;
    color:white;
    font-size:18px;
}

#Submit {
    
    font-weight: bold;
    font-size:20px;
    background: yellow;
    padding-bottom:5px;
        
}
 /* restart button*/
.restart {
    margin-left: 10%;
    font-weight: bold;
    font-size:20px;
    background: green;
    border-radius: 12px;
    color:white;
    padding:20px;
}
/*clear button  */
.clear {
   
    font-weight: bold;
    font-size:20px;
    background: red;
    border-radius: 12px;
    color:white;
    padding:20px;
}

#score-initials {
    font-weight:bold;
    color: white;
}

/*Media queries starts here  */


@media screen and (max-width: 786px) {
    /* Resized content to fit 786px  */
    body {
      max-width: 786px;
    }
    /* Resized main-content to fit 786px  */
    #container {
    position: absolute;
    left:10%;
   
    }
    
 
}
/* A Media Query max-width: 640px */
@media screen and (max-width: 640px) {
    /* Resized content to fit 640px  */
    body {
      min-width: 640px;
    }
    /* Resized main-content to fit 640px  */
    #container {
    position: absolute;
    width:350px;
    height:480px;
    
    }
    
    #lead {
        font-weight:bold;
        padding:5px;
        color:white;
    }

    .start-button {
        margin-left: 20%;
        font-weight: bold;
        font-size:20px;
        background: yellow;
        border-radius: 12px; 
        width:30px;
        height:  20px;     
    }

    #Submit {
        font-weight: bold;
        font-size:15px;
        background: yellow;
        padding-top:7px;
        padding-bottom:8px;
        width:90px;
                
    }
    .restart {
        margin-left: 10%;
        font-weight: bold;
        font-size:15px;
        background: green;
        border-radius: 12px;
        color:white;
        padding:12px;
        
    }
    .clear {
        
        font-weight: bold;
        font-size:15px;
        background: red;
        border-radius: 12px;
        color:white;
        padding:12px;
    }


    
    

}