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

    .question-estimate
      display: grid
      grid-template-columns: 7fr 3fr

      .input-estimate
        margin: 0
        box-sizing: border-box

      .btn-submit-estimate
        padding: auto .25rem
        margin: 0
        box-sizing: border-box

    .question-result-wrapper
      padding-top: 1px
      margin-top: 2rem
      display: none
      background-color: white

      &.visible
        display: block

    .question-result
      position: relative
      height: 100px
      width: 80%
      margin: 0 auto
      margin-top: 7rem
      border-top: 2px solid black

      .correct-result, .estimate
        position: absolute
        transform: translateX(-50%) translateY(20px)
        text-align: center

        &::before
          content: ''
          display: block
          position: absolute
          width: 30px
          height: 30px
          border-radius: 50%
          left: 50%
          transform: translateX(-50%) translateY(-40px)

      .correct-result
        z-index: 5
        transform: translateX(-50%) translateY(-70px)

      .correct-result::before
        background-color: green
        transform: translateX(-50%) translateY(50px)

      .estimate::before
        background-color: black

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