@import url('https://fonts.googleapis.com/css?family=Sora');html, body{margin:0;width:100%;height:100%;background-color:#fafafa;user-select:none;font-family:Sora;overflow-y:hidden;}.bg-image{filter: brightness(70%) blur(0.25vw);background-position: center;background-repeat: no-repeat;background-size: cover;position:absolute;top:0;left:0;width:100%;height:100%;}::selection{background-color:orange;color:white;}video{position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index:2; display:block; animation:fadein 0.5s; filter:brightness(85%) blur(0.5vw);}@keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadeout{from{opacity:1}to{opacity:0}}canvas{background:transparent;z-index:1;}@keyframes centerscale{from{transform:translate(-50%, -50%) scale(0.85);opacity:0.7;}to{transform:translate(-50%, -50%) scale(1);opacity:1;}}.center{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}.card{background-color: transparent; width: 400px; height: 400px; max-width:100%; max-height:100%; perspective: 1000px; z-index:3; animation: centerscale 0.8s; display:none;}.card-inner{position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d;}.start-button:focus .card-inner{transform: rotateY(-180deg);}.card-front, .card-back{position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; padding: 45px 55px; background-color:transparent;}.card-front{}.card-back{transform: rotateY(-180deg);}.text-input, .start-button{padding:20px;background-color:#fafafa;color:black;border:3px solid #f3f3f3;font-size:20px;font-family:Sora;margin:30px 0 0 0;outline:none;text-align:center;width:calc(100%);transition: border 0.2s;}.start-button{background-color: orange;color:white;border:0;cursor:pointer;margin:15px 0;transition: filter 0.2s;}.text-input:focus{border: 3px solid orange;}.start-button:hover{filter:brightness(90%);}.notifcontainer{position:absolute;z-index:20;width:100%;top:20px;left:0;text-align:center;}.notif{padding:10px;min-width:450px;width:450px;max-width:100%;border-radius:5px;text-align:center;border:1px solid lightgrey;background-color:#feffc8;box-shadow: 0px 0px 7px #b5b5b5;color:black !important;z-index:30;}.error{background-color:#ffc8c8;}.success{background-color:#d3ffcb;}.disabled:hover{filter: brightness(1);}.disabled{background-color: #cfcfcf; color: grey; border: 3px solid grey; user-select: none; cursor: not-allowed;}.disabled:focus{border:3px solid grey;}#game-preview{animation: centerscale 0.7s;text-align:center;padding:40px;border-radius:10px;border:1px solid lightgrey;max-width:100%;max-height:100%;background-color:white;overflow:auto;}@keyframes rainbow{0%{background:#E91E63}10%{background:#FF5722}20%{background:#FF9800}30%{background:#FFEB3B}40%{background:#8BC34A}50%{background:#4CAF50}60%{background:#00BCD4}70%{background:#3F51B5}80%{background:#673AB7}90%{background:#9C27B0}100%{background:#E91E63}}@keyframes frombottom{from{bottom:-300px;opacity:0}to{bottom:0;opacity:1}}#question_container{position:fixed;z-index:10;padding:75px;width:100%;height:100%;bottom:0;left:0;background-color:#5d00ffb3;color:white;font-size:30px;overflow:auto;text-align:center;animation:frombottom 0.45s;display:none;}#question_span{margin:30px 0 30px 0;display:inline-block;}#question_image{border-radius:7px;width:100px;height:100px;margin:20px;display:none;vertical-align:middle;}#question_math{display:none;margin:0 0 30px 0;user-select:none;}#answers{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;min-height:300px;width:100%;}#answer1, #answer2, #answer3, #answer4{padding: 25px; border-radius: 10px; word-wrap: break-word !important; border: 0; cursor: pointer; background-color: #32a4ff; color: white; margin: 10px; width: 275px; font-size:27px; min-height: 100%; outline:none;}@keyframes correct{0%{background-color:#32a4ff;}20%{background-color:#39ec36;}100%{background-color:#39ec36;}}@keyframes wrong{0%{background-color:#32a4ff;}20%{background-color:#fd3939;}100%{background-color:#fd3939;}}#hud{z-index:99;font-size:17px;color:black;display:none;}#left_hud, #right_hud{background-color:white;padding:8px;position:fixed;top:10px;border-radius:6px;z-index:99;}#left_hud{left:10px;}#right_hud{right:10px;}#score{background-color:#fafafa;padding:5px;margin-left:7px;border-radius:6px;}#chat{position:fixed;height:40%;bottom:8px;left:8px;z-index:9.5;width:250px;background-color:#ffffff54;display:none;}#chat_content{padding:10px;overflow-y: scroll;height: calc(100% - 40px);}#chat_bar, #chat_send{padding:7px;font-size:15px;color:white;outline:none;border:0;width:calc(100% - 33px);position:absolute;bottom:0;background-color:transparent;border-bottom:2px solid white;}#chat_bar{left:0;transition:border-bottom 0.3s;}#chat_send{width:auto;left:calc(100% - 36px);cursor:pointer;}#chat_bar::placeholder{color:white;}#chat_bar:focus{border-bottom:2px solid orange;}#end_screen{position:fixed;z-index:10;padding:75px;width:100%;height:100%;bottom:0;left:0;animation: rainbow 30s infinite, fadein 1s;color:white;overflow:auto;text-align:center;}#end_credit{animation:centerscale 0.5s;font-weight:bold;}