@font-face {
    font-family: 'opensans_regular';
    src: url('opensans/opensans_regular_webfont.woff2') format('woff2'),
         url('opensans/opensans_regular_webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'opensans_semibold';
    src: url('opensans/opensans_semibold_webfont.woff2') format('woff2'),
         url('opensans/opensans_semibold_webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

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

.fontPreload {
    font-family: 'opensans_regular', sans-serif; 
    position: absolute; 
    left: -1000px; 
    visibility: hidden; 
}
.fontPreload2{ 
    font-family: 'opensans_semibold', sans-serif; 
    position: absolute; 
    left: -1000px; 
    visibility: hidden; 
}

#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;
}

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

.questionHolder {
    font-family: 'opensans_regular', sans-serif;
    text-align: center;
    display: block;
    position:relative;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    user-select: none;
}
.questionCenterer {
    height: 100%;
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: space-around;
}
.questionGroup{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.question {
    border-style: solid;
    border-color: black;
    border-width: 4px;
    border-radius: 4px;
    background-color: white;
    color: black;
    font-size: 36px;
    padding: 36px;
    line-height: 45px;
    display: block;
}
.timer {
    font-size: 144px;
    color: deepskyblue;
    text-align: center;
    display: flex;
    align-items: center;
}
.answerBtn {
    position: relative;
    /*border-style: solid;*/
    /*border-color: black;*/
    /*border-width: 4px;*/
    /*border-radius: 36px;*/
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*pointer-events: none;*/
    user-select: none;
    background: none;
}

.answerBtnText {
    font-family: 'opensans_regular', sans-serif;
    color: white;
    font-size: 30px;
    pointer-events: none;
    user-select: none;
}