body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #000000;
    align-items: center;
    user-select: none;
}

#app {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --------------------------------------------------- */

#startUI {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
    overflow-y: hidden;
    
}
#quizLoader {
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    font-family: sans-serif;
}

#formHolder {
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#quizForm {
    background: #333;
    padding: 6vh;
    /*border: .2vh solid black;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: 2vh;
    width: 100%;
    /*height: 30vh;*/
    line-height: 3vh;
}

#csvInput {
    position: absolute;
    left: -500%;
}
#quizLoader button {
    background-color: #2d6eee;
    padding: .5vh 1vh;
    border-radius: 1vh;
    border: .2vh solid white;
    height: 6vh;
    width: 24vh;
    font-size: 2.5vh;
    color: white;
    margin: 1vh;
}

#quizLoader button:hover {
    background-color: #5e90f3;
    color: white;
}

#quizLoader button:active {
    background-color: #0e42a8;
    color: white;
}
#quizDataColumn{
    background-color: #333;
    width: 100%;
    height: 100%;
}
#quizDataHolder{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    font-size: 1.5vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    height: 90%;
}
#buttonHolder {
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-items: center;
    width: 100%;
    height: 8%;
}

.questionBlock {
    display: flex;
    flex-direction: column;
    border-style: solid;
    border-color: black;
    border-width: .3vh;
    border-radius: .5vh;
    margin-bottom: 1vh;
    margin-left: 1vh;
    margin-right: 1vh;
    background-color: beige;
}
.question {
    color: black;
    background-color: beige;
    padding: 1vh;
    border-radius: 2vh;
}
.wrongAnswer {
    background-color: maroon;
    color: white;
    padding: 1vh;
    margin-left: 3vh;
    margin-right: 1.5vh;
    margin-top: .5vh;
    border-radius: .25vh;
}
.correctAnswer {
    background-color: green;
    color: white;
    padding: 1vh;
    margin-left: 3vh;
    margin-right: 1.5vh;
    margin-top: .5vh;
    border-radius: .25vh;
}
.time {
    color: black;
    background-color: beige;
    padding: 1vh;
    margin-left: 3vh;
    border-radius: 2vh;
}

/* --------------------------------------------------- */

#questionUI {
    position: absolute;
    display: flex;
    flex-direction: row;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
    overflow-y: hidden;
    font-family: sans-serif;
}

#questionColumn{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 66%;
    height: auto;
}
#questionBlock{
    flex-direction: column;
    justify-content: right;
    align-items: center;
}

#questionBubble {
    border-style: solid;
    border-color: black;
    border-width: .3vh;
    border-radius: .25vh;
    margin-left: 3vh;
    margin-right: 6vh;
    background-color: white;
    color: black;
    font-size: 3vh;
    padding: 3vh 6vh;
    line-height: 3.8vh;
}
#timer {
    font-size: 12vh;
    color: deepskyblue;
    text-align: center;
}
#answerColumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 33%;
}

.answerBtn {
    height: 25%;
    width: 35vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border-color: black;
    border-width: .5vh;
    border-radius: 3vh;
    color: white;
    margin: .5vh;
    font-size: 2.5vh;
    padding: 1.5vh;
}

#answerBtn1 {
    background-color: #ec971d;
}
#answerBtn1:hover {
    background-color: #efa63e;
}
#answerBtn1:active {
    background-color: #a4660e;
}

#answerBtn2 {
    background-color: #2d6eee;
}
#answerBtn2:hover {
    background-color: #5e90f3;
}
#answerBtn2:active {
    background-color: #0e42a8;
}

#answerBtn3 {
    background-color: #249164;
}
#answerBtn3:hover {
    background-color: #2eb67d;
}
#answerBtn3:active {
    background-color: #196747;
}

#answerBtn4 {
    background-color: #b34a3a;
}
#answerBtn4:hover {
    background-color: #e16a57;
}
#answerBtn4:active {
    background-color: #822b1e;
}


/* --------------------------------- */
#ui-rotate {
    position: absolute;
    padding: 1vh;
    color: white;
    font-size: 4vh;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 100;
    top: 0;
    left: 0;
    font-family: sans-serif;
    display: none;
}