body {
    background-color: blue;
    font-family: "Special Gothic Condensed One", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    text-align: center;
}
  

.smallest {
    font-size: 1.25rem;
}
.smaller {
    font-size: 1.5rem;
}
.smallToMedium {
    font-size: 1.75rem;
}
.medium {
    font-size: 2.5rem;
}

.big {
    font-size: 5rem;
}

button {
    padding: 1rem 2rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0.25rem 0.125rem;
    /* transition-duration: 0.4s; */
    cursor: pointer;
    background-color: rgb(0, 0, 0); 
    color: gold; 
    border: 0.125rem solid gold;
    font-family: "Special Gothic Condensed One", sans-serif;
    font-weight: 400;
    font-style: normal
}

#answerField {
    width: 96%;
    height: 30rem;
    border: 0.25rem solid black;
    font-family: "Special Gothic Condensed One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    resize: none
}

#correctButton {
    background-color: green;
    color: white;
    width: 20rem;
    height: 10rem;
    font-size: 3rem;

}

#incorrectButton{
    background-color: red;
    color: white;
    width: 20rem;
    height: 10rem;
    font-size: 3rem;
}

#answerTextDiv {
    border: 1.5rem dotted rgb(255, 215, 0);
    color: white;
    text-align: center;
    word-wrap: break-word
}

#percentageTitleText {
    color: white;
    display: inline-block; 
}

#passDiv {
    padding-left: 1rem;
    display: inline-block
}

#passButton {
    
    color: white;
    border: 0.125rem solid white;
    font-size:1.5rem;
}

.rainbow{
    animation: rainbow 2.5s linear;
    animation-iteration-count: infinite;
}

@keyframes rainbow{
    100%,0%{
        color: rgb(255,0,0);
    }
    8%{
        color: rgb(255,127,0);
    }
    16%{
        color: rgb(255,255,0);
    }
    25%{
        color: rgb(127,255,0);
    }
    33%{
        color: rgb(0,255,0);
    }
    41%{
        color: rgb(0,255,127);
    }
    50%{
        color: rgb(0,255,255);
    }
    58%{
        color: rgb(0,127,255);
    }
    66%{
        color: rgb(0,0,255);
    }
    75%{
        color: rgb(127,0,255);
    }
    83%{
        color: rgb(255,0,255);
    }
    91%{
        color: rgb(255,0,127);
    }
}

#changeGameStateButton {
    border: 0.125rem solid black;
    color: purple; 
    background-color: grey;
    font-size: 1.5rem;
}

.trim {
    padding: 0.5rem 1rem;
}
.green {
    color:white;
    background-color: green;
}
.red {
    color:white;
    background-color: red;
}
.darkGreen{
    color:white;
    background-color: darkgreen;
}
.darkRed {
    color:white;
    background-color: darkred;
}


.selected {
    color:black;
    background-color:white;
}
.wide {
    width: 100%;
}
.goldglow {
  text-shadow: 0 0 20px gold, 0 0 30px gold, 0 0 40px gold, 0 0 50px gold;
}

#time {
    color:gold;
    font-size: 5rem;
}