@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter&display=swap"); * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .scoreboard { background: #fefefe; width: 100vw; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .scoreboard .container { width: 80%; height: 85%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; } .scoreboard .container .scores { width: 100%; height: 30%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; } .scoreboard .container .scores #a { border-right: 2px solid black; } .scoreboard .container .scores #b { border-left: 2px solid black; } .scoreboard .container .scores .col { width: 30%; height: 100%; } .scoreboard .container .scores .col div { height: 50%; width: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .scoreboard .container .scores .col .year { font-size: 4em; font-family: "Inter", sans-serif; } .scoreboard .container .scores .col #current { font-size: 5em; font-family: monospace; font-style: italic; background: #00b3ff; border-radius: 25%; color: white; } .scoreboard .container .scores .col .score { font-size: 6em; font-family: monospace; } .scoreboard .container .scores .col .header { color: #cf00da; font-family: "Bebas Neue", cursive; font-size: 3em; } .scoreboard .container .board { width: 100%; height: 70%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; } .scoreboard .container .board .row { width: 100%; height: 20%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .scoreboard .container .board .row .question { width: 95%; height: 80%; border-radius: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #ffae00; text-align: center; } .scoreboard .container .board .row .question h1 { font-family: "Inter", sans-serif; width: 80%; height: 50%; margin: auto auto; } .scoreboard .container .board .row .answer { width: 45%; height: 90%; border-radius: 25px; text-align: center; font-family: "Inter", sans-serif; font-size: 4em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #2193b0; background: -webkit-gradient(linear, left bottom, left top, from(#2193b0), to(#6dd5ed)); background: linear-gradient(to top, #2193b0, #6dd5ed); color: white; } /*# sourceMappingURL=styles.css.map */