*{
    box-sizing: border-box;
}


html{
    font-size: 100%;
       
}

body{
    font-family: sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    justify-content: flex-start;
    
}


main{
    
        margin-left: 30%;
        margin-right: 30%;
}

@media only screen and (max-width: 600px) {
    main{
    
        margin-left: 10%;
        margin-right: 10%;
}

  }


/* ==== Typo ====*/

.topInfo{
display:inline-block;
}

a{
  padding-left: .55rem;
  text-decoration: none;
}

p.topInfo{
float: right;
transform: translateY(-1rem);
padding-right: .55rem;
}


h1{
    margin-top: 5rem;
    font-size: 2em;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}




.message p{
    font-size: 1.10rem;
    text-align: center;
    font-weight: bolder;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}



#hScores{
    margin-bottom: 1rem;
    background-color:#d7b2d8;
    
}


@media only screen and (max-width: 600px) {
    h1 {
        font-size: 1em;
        margin-left: .75em;
        margin-right: .75em;
    }

    .message p{
        font-size: .75rem;
        text-align: center;
        font-weight: bolder;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

  }


/* ==== Buttons ====*/

button{
display: grid;
background-color: #6d2770;
color: #ffff;
font-weight: bolder;
border-radius: .50rem;
box-shadow: .5px .5px 4px black;
padding:0 .75em;
font-size: 1.20rem;
width: 35%;
}

.clear-score{
    display: inline-flex;
    margin: 0;
    padding:0 .20em;
}

#goBack{
    width: 10rem;
    padding:0;
    margin-left: 0;
    font-size: 1rem;
}

#clearScores{
    width: 10rem;
    padding:0;
    margin-left: 1.5rem;
    font-size: 1rem;
}


  
#startQuiz{
    margin: auto;
    margin-top:  2rem;
}

.options{
 text-align: left;
}



button:hover,
button:focus{
    background-color: #915b93;
    box-shadow: .1px .1px 4px rgb(47, 0, 255);
}



@media only screen and (max-width: 600px) {

    button{
        display: grid;
        width: 50%;
        font-size:.75rem;
    }


    .clear-score{
        display: inline-block; 
    }

    #goBack{
        margin-bottom: 1rem;
    
    }

    #clearScores{
        margin-left:0;
      
    }

  }





/* ==== Logic Operators ====*/

div#answer{
    text-align: left;
}

div.final-score{
    
    margin-bottom: 2em;
    font-size: 2em;
    font-weight: bolder;
}


form{
    display:inline-flex;
}

#final-score{
    font-size: 1.5em;
    margin-right: 1em;  
}

#initials{
    font-size: 1.5em;
    margin-right: 1em;
}

#nameinitials{
    border-color: rgb(226, 218, 218);
    border-radius:.50rem ;
    
  
}

#nameinitials:hover,
#nameinitials:focus{
    
    box-shadow: .1px .1px 4px rgb(47, 0, 255);
}

#submit{
background-color: #6d2770;
color: #ffff;
font-weight: bolder;
font-size: 1.25em;
border-radius: .50rem;
box-shadow: .5px .5px 4px black;
padding:0 .75em;
margin-left: 1em;

}

#submit:hover,
#submit:focus{
    background-color: #915b93;
    box-shadow: .5px .5px 4px rgb(47, 0, 255);
}

@media only screen and (max-width: 600px) {
    .final-score, #final-score{
        text-align: center;
    }

    form{
        display:block;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    
    }

    
    #submit{
        margin-top:1em;
        margin-left: 0;
    }

    #initials{
        font-size: 1em;
       margin-bottom: 1em;
    }

    p.hScores{
                display:block;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -400%);
    }
    .clear-score{

        display:block;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);

    }
  }