#continueEasterHunt
  display: none

.easter-menu
  position: fixed
  align-items: center
  justify-content: center
  top: 0
  right: 0
  background-color: $red
  color: #fff
  z-index: 100
  width: 90px
  border-radius: 0 0 500px 500px
  flex-wrap: wrap
  padding: 20px 15px
  display: none

.easter-timer
  font-size: 1.2em
  font-weight: medium()
  padding-bottom: 20px

.easter-menu__menubutton--stop
  &::after
    content: 'STOP'
    font-size: 0.9em

.easter-menu__menubutton--start
  &::after
    content: '?'
    font-size: 1.8em

.easter-menu__menubutton
  position: relative
  display: flex
  align-items: center
  justify-content: center
  cursor: pointer
  padding: 30px 0

  &::after
    position: absolute
    width: 100%
    text-align: center
    font-weight: bold()
    transform: scale(0.3)
    transition: 0.3s

  svg
    width: 50px
    overflow: visible
    z-index: 2

    path
      transform-origin: center
      transition: 0.3s

  &:hover
    &::after
      transform: scale(1)
    .easter-menu__menubutton--up
      transform: translate(0, 100px)

    .easter-menu__menubutton--down
      transform: translate(0, -100px)

.easter-menu__menubutton--inner
  fill: $red
.easter-menu__menubutton--outer
  fill: #ffd200

.easter-menu__statusbar
  display: flex
  flex-wrap: wrap
  position: relative
  justify-content: center
  align-items: center
  width: 30px

.statusbar-easteregg
  position: relative
  padding: 5px 0
  display: flex
  align-items: center

  svg
    width: 30px
    position: relative

.statusbar-easteregg__path
  fill: none
  stroke: #ffd200

.statusbar-easteregg--filled
  fill: #ffd200

.easter-popUp
  position: fixed
  display: none
  justify-content: center
  align-items: center
  width: 100%
  height: 100%
  top: 0
  left: 0
  z-index: 999

.easter-close-popUp
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  background: rgb(2,0,36);
  background: linear-gradient(45deg, rgba(2,0,36,1) 0%, rgba(255,50,60,1) 0%, rgba(255,210,0,1) 100%);
  opacity: 0.8

.easter-modal__closebutton
  position: absolute
  z-index: 2
  overflow: hidden
  top: -15px
  right: -15px
  background-color: $red
  border: 3px solid #fff
  height: 40px
  width: 40px
  border-radius: 50%
  text-align: center
  color: #fff
  font-weight: book()
  font-size: 46px
  line-height: 23px
  transform: rotate(45deg)
  cursor: pointer
  transition: 0.3s

  &:hover
    transform: rotate(225deg)

.easter-modal--bold
  font-weight: semibold()

.easter-popUp__modal
  position: relative
  z-index: 2
  width: calc(100vw / 14 * 12)
  padding: calc(100vw / 14 / 2) 380px calc(100vw / 14/2) calc(100vw / 14 / 2)
  max-width: 960px
  background-color: #fee688
  border-radius: 25px

  h1
    position: relative
    background: $red
    border-radius: .4em
    padding: 20px 20px
    margin-top: 0
    margin-bottom: 30px
    color: #fff
    font-weight: semibold()
    font-size: 2.5em

    &::after
      content: ''
      position: absolute
      right: 0
      top: 50%
      width: 0
      height: 0
      border: 54px solid transparent
      border-left-color: $red
      border-right: 0
      border-bottom: 0
      margin-top: -27px
      margin-right: -54px
  p
    font-size: 24px

.easter-modal__startButton
  padding: 10px 25px
  margin-right: 20px
  color: $red
  border: 2px solid $red
  font-weight: semibold()
  font-size: 0.9rem
  width: fit-content
  border-radius: 4px
  cursor: pointer
  display: inline-flex
  justify-content: center
  align-items: center
  transition: all 0.2s ease-out
  &:hover
    border: 2px solid transparent
    background-color: $red
    color: #fff
    svg
      transform: translateX(10px)

  svg
    height: 15px
    padding-left: 20px
    transition: transform 0.2s

.easter-popUp__modal-background
  width: 100%
  height: 100%
  position: absolute
  top: 0
  right: 0
  z-index: -1
  overflow: hidden
  border-radius: inherit

  svg
    min-height: 100%
    min-width: 1024px

    width: 100%
    height: auto

    path
      fill: #FFEDA1
    polygon
      fill: #FFEDA1
    circle
      fill: #FFEDA1

.easter-popUp__bunny-frame
  position: absolute
  right: -60px
  bottom: -100px
  height: 110%
  border-radius: 50%

.easter-popUp__bunny
  position: relative
  height: 100%


+respond-to-width(960)

  .easter-popUp
    overflow-y: scroll

  .easter-popUp__modal
    padding: 120px calc(100vw / 14) 50px calc(100vw / 14)
    margin: 830px 0 50px 0
    display: flex
    justify-content: center
    flex-wrap: wrap
    h1
      text-align: center
      width: 100%
      margin: 0 auto
      margin-bottom: 30px
      font-size: 2em
      &::after
        top: 0
        left: 50%
        border: 20px solid transparent
        border-bottom-color: $red
        width: 0
        height: 0
        border-top: 0
        margin-left: -20px
        margin-top: -20px
    p
      text-align: center

  .easter-modal__startButton
    margin: 0 auto

  .easter-popUp__bunny-frame
    width: 100%
    left: 0
    right: unset
    bottom: unset
    top: -400px
    display: flex
    justify-content: center

  .easter-popUp__bunny
    height: 460px

+respond-to-width(768)
  .easter-menu
    width: 100%
    margin-top: 60px
    height: 50px
    border-radius: unset
    padding: 0
    flex-wrap: nowrap
  .easter-timer
    padding-bottom: 0
    padding-right: 20px
  .easter-menu__menubutton
    padding: 0 20px
    svg
      height: 40px
      width: auto
    &::after
      z-index: 3
      transform: scale(0.6)
      color: $red
  .easter-menu__menubutton--stop
    &::after
      content: 'x'
      transform: scale(2)
  .easter-menu__statusbar
    flex-wrap: nowrap
    width: auto
  .statusbar-easteregg
    padding: 0 2px
    svg
      width: 20px
  .easter-menu__menubutton--inner
    fill: #ffd200
  #easter-menu__start
    width: 50px
    border-bottom-right-radius: 500px
    border-bottom-left-radius: 500px
    height: 120px
    padding-top: 40px
    margin-top: 0

+respond-to-width(420)
  .easter-popUp__modal
    margin: 600px 0 50px 0

  .easter-popUp__bunny-frame
    top: -300px

  .easter-popUp__bunny
    height: 360px



//EASTEREGGS

.easteregg__frame
  position: absolute
  width: 100%
  height: 100%

.easteregg
  height: 82px
  width: 60px
  cursor: pointer
  display: none
  transform-origin: center
  transition: 0.2s
  &:hover
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both
    transform: translate3d(0, 0, 0)

.easteregg--found
  z-index: 100
  transition: opacity 0.5s
  opacity: 0

.easteregg-text__frame
  position: fixed
  width: 100%
  height: 100%
  top: 0
  left: 0
  z-index: 99
  //background: rgb(2,0,36)
  //background: linear-gradient(45deg, rgba(2,0,36,0.6) 0%, rgba(255,50,60,0.6) 0%, rgba(255,210,0,0.6) 100%)
  background-color: rgba(255, 255, 255, 0.8)
  display: none
  justify-content: center
  align-items: center

.easteregg-text__frame--visible
  display: flex
  opacity: 0
  animation: fadeinFadeout 2s cubic-bezier(.36,.07,.19,.97) both

.easteregg-text
  position: relative
  width: 60%
  text-align: center
  h1
    font-size: 60px
    color: $blue

#easteregg-1
  position: absolute
  right: 30%
  top: -60px
  transform: rotate(-15deg)
  +respond-to-width(768)
    left: unset
    right: 15%


#easteregg-2
  position: absolute
  left: 10%
  top: 10%

#easteregg-3
  position: absolute
  top: 15%
  left: 40%
  z-index: 10
  +respond-to-width(1080)
    top: 7.5%
  +respond-to-width(768)
    left: 80%

#easteregg-4
  position: absolute
  top: 10%
  left: 30%
  z-index: 10
  +respond-to-width(1080)
    top: 5%
  +respond-to-width(768)
    left: 50%


#easteregg-5
  position: absolute
  transform: rotate(25deg)
  top: -60px
  right: 10px
  z-index: 0

@keyframes shake
  10%, 90%
    transform: translateX(-1px)

  15%, 85%
    transform: translateY(-2px)

  20%, 80%
    transform: translateX(2px)

  30%, 50%, 70%
    transform: translateX(-4px) translateY(-3px)

  40%, 60%
    transform: translateX(4px)

@keyframes fadeinFadeout
  1%, 99%
    opacity: 0

  15%, 85%
    opacity: 100