* {
box-sizing: border-box;
}
html {
    background-image: url(Shield.jpeg);
    background-size: 96rem;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
.header {
padding: .5rem;
text-align: left;
}
.header1 {
    padding: .5rem;
    text-align: left;
    text-shadow: rgb(250, 250, 250);
    font-weight: 900;
}
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,.2);
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) {

footer {
color: rgba(250,250,250,.2);
}
header {
color: rgb(250,250,250)
}
h1{
color:rgb(250,250,250)
}
html {
background-image: url(Shield.jpeg);
background-size: 500rem;
}
.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;
}

/*set.index.html CSS*/

/*BUTTONS*/

.button5 {
display:table;
padding: .5rem 0rem .5rem 0rem;
font-size: .8rem;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: rgb(0, 0, 0);
background-color: rgb(250, 250, 250);
border: none;
box-shadow: 0 9px rgb(0, 0, 0);
width: 18rem;
margin: .2rem 0 .2rem 0;
height: 1.4rem;
}
.button5:hover {
background-color: #075af5;
color: rgb(250, 250, 250);
font-weight: 700;
}
.button5:active {
background-color: rgb(250, 250, 250);
color: rgb(0, 0, 0);
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.button5[disabled]:hover {
cursor: not-allowed;
box-shadow: none;
transform: none;
}

.button4 {
display:table;
padding: .5rem 0rem .5rem 0rem;
font-size: .8rem;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: rgb(0, 0, 0);
background-color: rgb(250, 250, 250);
border: none;
box-shadow: 0 9px rgb(0, 0, 0);
width: 18rem;
margin: .2rem 0 .2rem 0;
height: 1.4rem;
}
.button4:hover {
background-color: #075af5;
color: rgb(250, 250, 250);
font-weight: 700;
}
.button4:active {
background-color: rgb(250, 250, 250);
color: rgb(0, 0, 0);
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.button4[disabled]:hover {
cursor: not-allowed;
box-shadow: none;
transform: none;
}

.button3 {
display:table;
padding: .5rem 0rem .5rem 0rem;
font-size: .8rem;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: rgb(0, 0, 0);
background-color: rgb(250, 250, 250);
border: none;
box-shadow: 0 9px rgb(0, 0, 0);
width: 18rem;
margin: .2rem 0 .2rem 0;
height: 1.4rem;
}

.button3:hover {
background-color: #075af5;
color: rgb(250, 250, 250);
font-weight: 700;
}
.button3:active {
background-color: rgb(250, 250, 250);
color: rgb(0, 0, 0);
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.button3[disabled]:hover {
cursor: not-allowed;
box-shadow: none;
transform: none;
}

.button {
float: right;
display:table;
padding: .5rem 0rem .5rem 0rem;
font-size: .8rem;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: rgb(0, 0, 0);
background-color: rgb(250, 250, 250);
border: none;
box-shadow: 0 9px rgb(0, 0, 0);
width: 18rem;
margin: .2rem 0 .2rem 0;
height: 1.4rem;
}
.button:hover {
background-color: #075af5;
color: rgb(250, 250, 250);
font-weight: 700;
}
.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;
}

/*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);
}