* {
box-sizing: border-box;
}
html {
background-image: url(Space2lite.jpeg);
background-size: 150rem;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
.header {
padding: .5rem;
text-align: left;
}
header {
padding: .5rem 0rem 2rem 0rem;
text-align: center;
font-size: 4rem;
}
/*Inside 1st Column*/
fieldset {
margin: 0rem 0rem .5rem 0rem;
width: auto;
font-weight: 700;
font-size: 1rem;
text-align: center;
}
#seconds {
width: 3.5rem;
padding: .5rem 0 .5rem 0;
border: 0.15rem solid red;
text-align: center;
margin-bottom: .5rem;
}
/* Container for flexboxes */
.row {
display: -webkit-flex;
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: .5rem;
}
.column3 {
padding: 0rem;
}
.column2 {
padding: 0rem;
}
.column1 {
padding: 0rem;
}
.columnset3 {
background-color: rgba(250, 250, 250, 0.883);
}
.columnset2 {
background-color: rgba(250, 250, 250, 0.883);
}
.columnset1 {
background-color: rgba(250, 250, 250, 0.883);
}
/*Inside second Column. Buttons for choices*/
#question {
word-wrap: break-word;
font-size: 1rem;
font-weight: 700;
color: rgb(0, 0, 0);
text-shadow: 3rem 3rem 3rem  white;
margin-bottom: .5rem;
}
.choice-container {
margin-bottom: 0.25rem;
width: auto;
font-size: 1rem;
border: 0.15rem solid black;
background-color: white;
}
.choice-container:hover {
cursor: pointer;
box-shadow: 0 0.4rem 1.4rem 0 rgb(0, 0, 0);
transform: translateY(-0.1rem);
transition: transform 150ms;
}
.choice-prefix {
padding: 1.5rem 1.5rem;
background-color: green;
color: rgb(250, 250, 250);
text-shadow: 2rem 2rem 2rem  black;
color: white;
width: min-content;
}
.choice-text {
padding: .5rem;
width: auto;
}
.correct {
background-color: #28a745;
}
.incorrect {
background-color: #dc3545;
}
/*Inside the 3rd column*/
#progressBar {
width: 10rem;
height: 2rem;
border: 0.07rem solid black;
margin-top: .5rem;
}
#progressBarFull {
height: 1.95rem;
background-color: rgb(0, 0, 0);
width: 0%;
}
#col3 {
text-align: center;
}    
/* Style the footer */
footer {
color: rgba(0,0,0,.3);
font-weight: 700;
padding: .5rem;
text-align: center;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}
/* LOADER */
#loader {
border: 1.6rem solid white;
border-radius: 50%;
border-top: 1.6rem solid #56a5eb;
width: 12rem;
height: 12rem;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*iframe video formatting*/
iframe {
margin-bottom: .5rem;
}
/*end.html*/
.endform {
margin-bottom: 1rem;
display: block;
text-align: center;
align-items: center;
}
#username {
margin-bottom: .5rem;
width: max-content;
font-size: 1.5rem;
text-align: center;
}
#finalScore {
text-align: center;
margin-bottom: 1rem;
font-size: 2.8rem;
}
#saveScoreBtn {
margin-bottom: 1rem;
}
/*highscores.html*/
#highScoresList {
list-style: none;
padding-left: 0;
margin-bottom: 4rem;
}
.high-score:hover {
transform: scale(1.025);
}
/*BUTTONS*/
.button {
display: table;
padding: 0.2rem 0.2rem;
margin: 0.2rem;
font-size: .9rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
text-align: center;
color: rgb(250, 250, 250);
background-color: rgb(8, 31, 243);
width: 18rem;
height: 2rem;
opacity: .6;
transition: 0.3s;
border: .1rem solid rgba(0,0,0,.5);
}
.button:hover {
opacity: 1;
font-weight: 900;
}
.button:active {
background-color: rgb(250, 250, 250);
color: rgb(0,0,0);
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.button[disabled]:hover {
cursor: not-allowed;
box-shadow: none;
transform: none;
}