@import "../node_modules/fullpage.js/dist/fillpage.css"

html, body
  margin: 0
  padding: 0

body
  font-family: sans-serif

*
  box-sizing: border-box

h1, h2
  text-align: center

.score
  display: none
  margin: 1rem

  &.active
    display: inherit

$headerHeigth: 150px
.header
  height: $headerHeigth
  position: fixed
  background: #EDE0D4
  width: 100%
  z-index: 1

#fullpage
  margin-top: $headerHeigth

.section
  max-height: calc(100vh - $headerHeigth)
  padding: 1rem
  font-size: 1.5rem

  .choice
    margin: 1rem

  input
    padding: 1rem

// https://coolors.co/palette/ede0d4-e6ccb2-ddb892-b08968-7f5539-9c6644
.section0
  background: linear-gradient(#EDE0D4, #E6CCB2)
.section1
  background: linear-gradient(#E6CCB2, #DDB892)
.section2
  background: linear-gradient(#DDB892, #B08968)
.section3
  background: linear-gradient(#B08968, #7F5539)
.section4
  background: linear-gradient(#7F5539, #9C6644)