body 
  min-height: 100vh
  display: flex
  align-items: center
  justify-content: center
  font-family: Roboto
  background-image: url(../img/background.jpg)
  background-size: cover
  
  .screen
    width: 800px
    max-width: 90vw
    min-height: 60vh
    background-color: rgba(240, 240, 240, .8)

  h1
    font-family: 'Kaushan Script'
    font-size: 200%

  h2 
    font-weight: regular

  button:hover 
    background-color: #eee

.start-screen, .end-screen
  display: flex
  align-items: center
  justify-content: center
  flex-direction: column

  .logo
    max-width: 130px

  .btn-start 
    padding: .25em
    border: 1px solid lightgray
    border-radius: 0
    width: 25%

  .score
    text-align: center

.ingame-screen
  display: grid
  grid-template-rows: 2fr 6fr 2fr

  header, footer
    padding: 1rem 2rem

  .header
    display: flex
    justify-content: space-between
    align-items: center
    background-color: black
    color: white

    h1 
      margin: 0
      padding: 0

  .question
    padding: 2rem

    &.revealed
      
      .answer
        background-color: lightgray

        &.chosen
          background-color: #b34040
          color: white
      
        &.correct
          background-color: #8fb340
          color: white

          &.chosen
            background-color: #8fb340
            color: white

    .question-answers
      .answer
        display: block
        padding: .5rem
        width: 100%
        margin-bottom: 2px
        border: 1px solid lightgray
        border-radius: 0
        text-align: left

  .btn-continue
    display: block
    margin-top: 1rem
    width: 100%
    border-radius: 0
    border: 1px solid lightgray
    padding: .5rem