@font-face {
    font-family: adam;
    src: url(../fonts/ADAM.otf);
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    /*flexbox for overall page children include header mainsection footer*/
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: 'Raleway', sans-serif;
    /*font-family: 'Montserrat', sans-serif;*/
    background-color: #f2f2f2;
    /*background-color: #fcfcfc;*/
    /*background-color: #F5F3EE;*/
    color: #474a41;
}


h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.17em;
}

h4 {
    font-size: 1.12em;
}

h5 {
    font-size: .83em;
}

h6 {
    font-size: .75em;
}

.element {
    border-style: solid;
    border-color: yellow;
    border-width: 1px;
}

.invisible{
    display: none !important;
}


/*startPage Styling*/
#startPage{
    background-color: #474a41;
    color:#f2f2f2;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.spMainSection{
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#spContent{
    display: flex;
}

#startPage #title{
    color: #f2f2f2;
    text-align: center;
    padding: 0 0 1% 2%;
    display: flex;
    justify-content: center;
    align-items:  center;
}

#instructions{
    flex:1;
    text-align: justify;
    line-height: 1.5em;
    font-size: 1.4em;
    padding: 0 5% 0 3%;
}

#timer{
    color:red;
    margin: 0 .5% 0 .5%;
}

#startQuiz{
    text-align: right;
    padding: 2% 5% 0 3%;
    font-size: 1.3em;
}

#startQuiz:hover{
    font-weight: bold;
}

/*game page styling*/
#gamePage{
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

#title {
    font-family: adam;
    font-size: 4.5em;
    color: #474a41;
    text-align: right;
    padding: .5% 1% 1% 1%;
}

.red {
    color: red;
}

.mainSection {
    /*allows the main section to take up all available space pushing footer to the bottom*/
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

#gpTimer {
    font-size: 1.5em;
    text-align: left;
    color: red;
    padding: 0 0 0 5%;
}

.questionSection {
    flex: .75;
    display: flex;
    justify-content: center;
    align-items: center;
}

.questionText {
    font-size: 4em;
    text-align: center;
}

.answerSection {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex: 2;
}

.answer {
    width: 35%;
    font-size: 2em;
    margin: 2%;
    padding: 1%;
    display: flex;
    align-items: center;
    border-color: #474a41;
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
}

#copyright {
    text-align: center;
    padding: .5% 0 .5% 0;
    font-size: .75em;
}

/*correct page styling*/
#correctPage{
    background-color: #474a41;
    color:#f2f2f2;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#correctPage #title{
    color:#f2f2f2;

}
.cpMainSection{
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#cpContent {
    display: flex;
    justify-content: center;
    align-items: center;
}

#cpTimer{
    color: red;
    font-size: 3em;
    padding-top: 3%;
    font-weight: bold;
}

#cpHeader{
    font-size: 4.5em;
    padding: 0 0 0 1em;

}

#cpText{
    text-align: justify;
    line-height: 1.5em;
    font-size: 1.4em;
    padding: 0 5% 0 4%;
}

/*incorrect page styling*/
#incorrectPage{
    background-color: #474a41;
    color:#f2f2f2;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#incorrectPage #title{
    color:#f2f2f2;

}
.ipMainSection{
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#ipContent {
    display: flex;
    justify-content: center;
    align-items: center;
}

#ipTimer{
    color: red;
    font-size: 3em;
    padding-top: 3%;
    font-weight: bold;
}

#ipHeader{
    font-size: 4.5em;
    padding: 0 0 0 1em;

}

#ipText{
    text-align: justify;
    line-height: 1.5em;
    font-size: 1.4em;
    padding: 0 5% 0 4%;
}

/*Time's up page styling*/
#timesUpPage{
    background-color: #474a41;
    color:#f2f2f2;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#timesUpPage #title{
    color:#f2f2f2;

}
.tpMainSection{
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#tpContent {
    display: flex;
    justify-content: center;
    align-items: center;
}

#tpTimer{
    color: red;
    font-size: 3em;
    padding-top: 3%;
    font-weight: bold;
}

#tpHeader{
    font-size: 4.5em;
    padding: 0 0 0 1em;
    white-space: nowrap;

}

#tpText{
    text-align: justify;
    line-height: 1.5em;
    font-size: 1.4em;
    padding: 0 5% 0 4%;
}

/*Over Page styling*/
#overPage{
    background-color: #474a41;
    color:#f2f2f2;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#overPage #title{
    color:#f2f2f2;

}
.opMainSection{
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#opContent {
    display: flex;
    justify-content: center;
    align-items: center;
}

#opTimer{
    color: red;
    font-size: 3em;
    padding-top: 3%;
    font-weight: bold;
}

#opHeader{
    font-size: 4.5em;
    padding: 0 0 0 1em;
    white-space: nowrap;

}

#opText{
    text-align: justify;
    line-height: 1.5em;
    font-size: 1.4em;
    padding: 0 5% 0 4%;
}

#replayQuiz{
    text-align: right;
    padding: 10% 5% 0 3%;
    margin: 10% 0 0 0;
    font-size: 1.3em;
}

#replayQuiz:hover{
    font-weight: bold;
}