body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}a,body,div,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,label,legend,li,nav,ol,p,span,strong,ul{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,footer,header,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}.mainframe{background-color:#f1f0eb;height:100vh;margin:0 auto;width:80vw}@-webkit-keyframes font-size-up{0%{opacity:0}to{opacity:1}}@keyframes font-size-up{0%{opacity:0}to{opacity:1}}@-webkit-keyframes move-left-and-faded{0%{left:48.5%;opacity:1}to{left:33.5%;opacity:0}}@keyframes move-left-and-faded{0%{left:48.5%;opacity:1}to{left:33.5%;opacity:0}}@-webkit-keyframes move-right-and-faded{0%{left:51.5%;opacity:1}to{left:56.5%;opacity:0}}@keyframes move-right-and-faded{0%{left:51.5%;opacity:1}to{left:56.5%;opacity:0}}@-webkit-keyframes character-animation-blue{0%{-webkit-transform:scale(100%) rotateY(0deg);transform:scale(100%) rotateY(0deg)}50%{-webkit-transform:scale(110%) rotateY(180deg);transform:scale(110%) rotateY(180deg)}to{-webkit-transform:scale(100%) rotateY(0deg);transform:scale(100%) rotateY(0deg)}}@keyframes character-animation-blue{0%{-webkit-transform:scale(100%) rotateY(0deg);transform:scale(100%) rotateY(0deg)}50%{-webkit-transform:scale(110%) rotateY(180deg);transform:scale(110%) rotateY(180deg)}to{-webkit-transform:scale(100%) rotateY(0deg);transform:scale(100%) rotateY(0deg)}}@-webkit-keyframes character-animation-sky{0%{top:10vh}50%{top:35vh}to{top:10vh}}@keyframes character-animation-sky{0%{top:10vh}50%{top:35vh}to{top:10vh}}@-webkit-keyframes character-animation-yellow{0%{margin-top:0}50%{margin-top:-10vh}to{margin-top:0}}@keyframes character-animation-yellow{0%{margin-top:0}50%{margin-top:-10vh}to{margin-top:0}}@-webkit-keyframes character-animation-green{0%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}to{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}@keyframes character-animation-green{0%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}to{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}@-webkit-keyframes character-animation-red{0%{left:2vw;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}50%{left:4vw;-webkit-transform:rotate(45deg);transform:rotate(45deg)}to{left:2vw;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}}@keyframes character-animation-red{0%{left:2vw;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}50%{left:4vw;-webkit-transform:rotate(45deg);transform:rotate(45deg)}to{left:2vw;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}}.headercontainer{align-items:center;display:flex;height:10%;justify-content:center;width:100%}.headercontainer .headercontainer__logoarea{font-size:1.5rem;font-weight:500;height:20%;text-align:center;width:30%}.bodycontainer{align-items:center;display:flex;flex-direction:column;height:90%;justify-content:space-around;position:relative;width:100%}.bodycontainer .bodycontainer__character{transition:.5s;width:18%}.bodycontainer .bodycontainer__character.bodycontainer__character--blue{-webkit-animation:character-animation-blue 2s 16;animation:character-animation-blue 2s 16;left:10vw;position:absolute;top:5vh}.bodycontainer .bodycontainer__character.bodycontainer__character--green{-webkit-animation:character-animation-green 4s 8;animation:character-animation-green 4s 8;bottom:5vh;position:absolute;right:3vw}.bodycontainer .bodycontainer__character.bodycontainer__character--red{-webkit-animation:character-animation-red 4s 8;animation:character-animation-red 4s 8;bottom:8vh;left:3vw;position:absolute}.bodycontainer .bodycontainer__character.bodycontainer__character--sky{-webkit-animation:character-animation-sky 8s 4;animation:character-animation-sky 8s 4;position:absolute;right:6vw;top:35vh}.bodycontainer .bodycontainer__character.bodycontainer__character--yellow{-webkit-animation:character-animation-yellow 4s 8;animation:character-animation-yellow 4s 8;left:0;position:absolute;top:30vh;width:10%}.bodycontainer .bodycontainer__title{font-size:3.5rem;font-weight:700;margin:0 auto -20%;text-align:center;width:80%;z-index:2}.bodycontainer .bodycontainer__title .bodycontainer__fadedtitle{display:inline-block;opacity:0;position:absolute}.bodycontainer .bodycontainer__title .bodycontainer__fadedtitle--left{-webkit-animation:move-left-and-faded 1.5s;animation:move-left-and-faded 1.5s;left:48.5%}.bodycontainer .bodycontainer__title .bodycontainer__fadedtitle--right{-webkit-animation:move-right-and-faded 1.5s;animation:move-right-and-faded 1.5s;left:51.5%}.bodycontainer .bodycontainer__title h1{-webkit-animation:font-size-up 3s;animation:font-size-up 3s}.bodycontainer .bodycontainer__inputbox{align-items:center;display:flex;flex-direction:column-reverse;height:40%;justify-content:space-around;margin:0 auto;position:relative;width:80%}.bodycontainer .bodycontainer__inputbox ul{align-items:center;bottom:50%;display:flex;flex-wrap:wrap;height:3%;justify-content:space-around;position:absolute;transition:1s;width:60%}.bodycontainer .bodycontainer__inputbox ul li{background-color:#fff;border-radius:5vh;cursor:pointer;font-weight:700;height:100%;margin-top:2.5%;outline:.2vh solid #000;padding:2% 0 4%;text-align:center;width:21%}.bodycontainer .bodycontainer__inputbox ul li.clicked{background-color:#000;color:#fff}.bodycontainer .bodycontainer__inputbox ul li:hover{background-color:#000;color:#fff;outline:.2vh solid #fff}.bodycontainer .bodycontainer__inputbox button{background-color:#2f83ff;border:none;border-radius:5vh;color:#fff;cursor:pointer;font-size:1rem;font-weight:700;padding:1.5% 10%}.bodycontainer .bodycontainer__inputbox button.bodycontainer__startbtn{transition:1s}.bodycontainer .bodycontainer__inputbox button:hover{background-color:#fff;color:#2f83ff;font-size:1.05rem}.bodycontainer .bodycontainer__inputbox button:focus{background-color:#fff;color:#2f83ff;outline:none}.bodycontainer .bodycontainer__inputbox .bodycontainer__inputs{align-items:center;background-color:#fff;border-radius:5vh;display:flex;flex-direction:column;height:60%;justify-content:space-around;width:60%;z-index:2}.bodycontainer .bodycontainer__inputbox .bodycontainer__inputs label{align-items:center;display:flex;height:20%;justify-content:space-around;width:50%}.bodycontainer .bodycontainer__inputbox .bodycontainer__inputs label span{font-weight:700}.bodycontainer .bodycontainer__inputbox .bodycontainer__inputs label input{background-color:#f1f0eb;border:none;border-radius:5vh;display:block;font-weight:700;padding:5%}.bodycontainer .bodycontainer__inputbox .bodycontainer__inputs label#label--schoolID input:hover{cursor:pointer}.bodycontainer #bodycontainer__handImg{left:55%;position:absolute;top:45%;-webkit-transform:rotateY(0deg) rotate(-20deg) rotateX(-90deg);transform:rotateY(0deg) rotate(-20deg) rotateX(-90deg);transition:.6s;width:15.5%;z-index:3}.bodycontainer #bodycontainer__handImg:hover{-webkit-transform:rotateY(0deg) rotate(-20deg) rotateX(0deg);transform:rotateY(0deg) rotate(-20deg) rotateX(0deg)}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media(prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}p{color:orange}.container{background-color:#f1f0eb;height:100vh;justify-content:center;width:80vw}.container,.container .problembox{align-items:center;display:flex;flex-direction:column;margin:0 auto}.container .problembox{background-color:#fff;border-radius:5vh;height:80%;justify-content:space-around;width:60%}.container .problembox .problembox__problem{align-items:flex-start;display:flex;flex-direction:column;height:20%;justify-content:space-around;width:80%}.container .problembox .problembox__problem .problembox__problemNumber{font-size:1.2rem;font-weight:700}.container .problembox .problembox__problem .problembox__problemDescription{font-size:1rem;font-weight:700}.container .problembox .problembox__choicebox{height:70%;width:80%}.container .problembox .problembox__choicebox ul{display:flex;flex-direction:column;height:100%;justify-content:space-around;width:100%}.container .problembox .problembox__choicebox ul li{align-items:center;background-color:hsla(0,0%,100%,0);border-radius:1vh;cursor:pointer;display:flex;height:15%;justify-content:space-around;outline:.2vh solid green;transition:.3s;width:100%}.container .problembox .problembox__choicebox ul li.clicked{background-color:#ffaa01;color:#fff}.container .problembox .problembox__choicebox ul li h3{font-size:1.3rem;font-weight:700;width:10%}.container .problembox .problembox__choicebox ul li h4{font-size:1rem;font-weight:500;width:80%}.container .problemSubmitBtn{background-color:#2f83ff;border:none;border-radius:5vh;color:#fff;cursor:pointer;font-size:1.2rem;font-weight:700;margin-top:3vh;padding:1vh 3vw}.modalBackground{background-color:rgba(0,0,0,.5);height:100vh;position:fixed;top:-100vh;transition:1s;width:100vw}.modalContainer{align-items:center;background-color:#fff;border-radius:2vh;display:flex;flex-direction:column;height:15vh;justify-content:space-around;left:40vw;outline:.2vh solid #000;position:absolute;top:10vh;transition:1s;width:20vw}.modalContainer .modalContainer__description,.modalContainer .modalContainer__title{font-weight:700}.modalContainer .modalContainer__nextBtn{align-items:center;background-color:#2f83ff;border:none;border-radius:1vh;color:#fff;cursor:pointer;display:flex;font-weight:700;height:20%;justify-content:center;padding:1vh 0;width:40%}.resultContainer{align-items:center;background-color:#f1f0eb;display:flex;flex-direction:column;height:100vh;justify-content:center;margin:0 auto;width:80vw}.resultContainer .resultContainer__title{align-items:center;display:flex;font-size:2rem;font-weight:700;height:5vh;justify-content:center;margin-bottom:2%;width:60%}.resultContainer .resultBox{background-color:#fff;border-radius:5vh;height:50vh;width:60%}.resultContainer .resultBox ul{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:space-around;width:100%}.resultContainer .resultBox ul li{align-items:center;display:flex;font-size:1.2rem;font-weight:700;height:15%;justify-content:space-around;width:30%}
/*# sourceMappingURL=main.0ccade71.css.map*/