body { min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: Roboto; background-image: url(../img/background.jpg); background-size: cover; } body .screen { width: 800px; max-width: 90vw; min-height: 60vh; background-color: rgba(240, 240, 240, 0.8); } body h1 { font-family: "Kaushan Script"; font-size: 200%; } body h2 { font-weight: regular; } body button:hover { background-color: #eee; } .start-screen, .end-screen { display: flex; align-items: center; justify-content: center; flex-direction: column; } .start-screen .logo, .end-screen .logo { max-width: 130px; } .start-screen .btn-start, .end-screen .btn-start { padding: 0.25em; border: 1px solid lightgray; border-radius: 0; width: 25%; } .start-screen .score, .end-screen .score { text-align: center; } .ingame-screen { display: grid; grid-template-rows: 2fr 6fr 2fr; } .ingame-screen header, .ingame-screen footer { padding: 1rem 2rem; } .ingame-screen .header { display: flex; justify-content: space-between; align-items: center; background-color: black; color: white; } .ingame-screen .header h1 { margin: 0; padding: 0; } .ingame-screen .question { padding: 2rem; } .ingame-screen .question.revealed .answer { background-color: lightgray; } .ingame-screen .question.revealed .answer.chosen { background-color: #b34040; color: white; } .ingame-screen .question.revealed .answer.correct { background-color: #8fb340; color: white; } .ingame-screen .question.revealed .answer.correct.chosen { background-color: #8fb340; color: white; } .ingame-screen .question .question-answers .answer { display: block; padding: 0.5rem; width: 100%; margin-bottom: 2px; border: 1px solid lightgray; border-radius: 0; text-align: left; } .ingame-screen .btn-continue { display: block; margin-top: 1rem; width: 100%; border-radius: 0; border: 1px solid lightgray; padding: 0.5rem; } /*# sourceMappingURL=style.css.map */