* 
  box-sizing: border-box

body 
  height: 100vh
  box-sizing: border-box
  display: flex
  align-items: center
  justify-content: center
  font-family: Roboto
  background-image: url(../img/background.jpg)
  background-size: cover
  background-attachment: fixed
  
  .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: normal

  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

  .score.focus
    animation: 1s attention

  .header
    display: flex
    padding: 1rem 2rem
    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
        counter-increment: answer

        &::before 
          content: counter(answer)
          color: lightgray
          padding: .5em

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

      .input-estimate
        padding: .25rem
        margin: 0
        box-sizing: border-box
        border-radius: 0
        border: 1px solid lightgray

      .btn-submit-estimate
        padding: auto .25rem
        margin: 0
        box-sizing: border-box
        border-radius: 0
        border: 1px solid lightgray

    .question-result-wrapper
      padding-top: 1px
      margin-top: 2rem
      display: none
      background-color: rgba(21, 45, 59, .7)
      color: white

      &.visible
        display: block

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

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

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

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

      .correct-result::before
        background-image: url(../img/star.png)
        background-size: contain
        transform: translateX(-50%) translateY(55px)

      .estimate::before
        background-image: url(../img/snowflake.png)
        background-size: contain

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

@keyframes attention
  0%
    transform: scale(1)
  25%
    transform: scale(1.2)
  50%
    transform: scale(.9)
  75%
    transform: scale(1.2)
  100%
    transform: scale(1)

@media screen and (max-width: 600px)
  body
    margin: 0
    padding: 0
    display: block
    height: auto

    .screen
      width: 100vw
      height: auto
      max-width: 100vw
      min-height: 100vh

      .headline 
        text-align: center

      .btn-start
        padding: 1rem 2rem
        width: auto

      &.ingame-screen
        display: block
        height: auto

    .header
      width: 100vw
      flex-direction: column

    .question
      display: block
      width: 100vw

      .question-text
        font-size: 14pt
        margin-top: 0

      &.estimate
        height: auto
        box-sizing: border-box

        .question-estimate
          display: block

        .input-estimate,
        .btn-submit-estimate
          width: 100%
          display: block
          padding: .5rem 1rem

        .question-result 
          width: 70%
          margin-top: 5rem
          height: 5rem