/** ** ** ** ** ** ** **
------nuel ISLAND------
** ** ** ** ** ** ** **/
@font-face {
  font-family: 'Neue Haas Unica';
  src: url('haas/NeueHaasUnica-Regular.woff') format('woff'),
    url('haas/NeueHaasUnica-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Haas Unica';
  src: url('haas/NeueHaasUnica-Black.woff') format('woff'),
    url('haas/NeueHaasUnica-Black.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

* {
  box-sizing: border-box
}

::selection {
  background-color: #f00;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: url('plaatjes/jun.cur'), auto;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: none;
  background: #000;
  font-family: 'Neue Haas Unica', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 1.15rem;
  overflow: hidden;
}

/**
 * About
 */
#nuel {
  position: fixed;
  display: flex;
  top: 3vw;
  left: 45vw;
  width: 6vw;
  height: 6vw;
  min-width: 5rem;
  min-height: 5rem;
  max-width: 7rem;
  max-height: 7rem;
  background: #fff url('plaatjes/nuel.png') center / cover;
  border-radius: 50%;
  box-shadow: 0 0 2em #fff4, 0 0 .2em #fff, 0 0 3vw 1vw #ece7c76a;
  cursor: url('plaatjes/jun.cur'), auto;
  z-index: 1000;
  transition: opacity 0.3s;
}

#nuel:hover {
  background-image: url('plaatjes/nuel_wink.png') !important;
}

/**
 * Now Playing
 */
.now-playing {
  display: none;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  font-size: .5em;
  line-height: 1;
  z-index: 400;
  cursor: pointer;
  padding: 0.25rem 0.15rem 0.3rem 0.4rem;
  border-radius: 3px;
  background: #000a;
}

.now-playing span {
  display: block;
  font-size: .9rem;
}

.now-playing img {
  width: 1rem;
  vertical-align: middle;
  margin-right: .5em;
  opacity: .6;
}

.now-playing:hover img {
  opacity: 1;
}

/**
 * Welcome to nuel island
 */
#planet-background,
#planeet {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#planeet a {
  text-decoration: none
}

/**
 * Sky, clouds and explosions far away
 */
#planet-background {
  background: url('plaatjes/lucht.jpg') no-repeat center / cover;
  height: 100%;
}

#exploder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: 3s opacity ease-out;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0), #fff 50%);
  z-index: 1000;
}

#exploder.exploding {
  opacity: 0.95;
  mix-blend-mode: lighten;
  transition: .2s opacity ease-in-out;
}

#planeet {
  overflow: hidden;
}

#wolk {
  position: fixed;
  left: 0;
  width: 2451px;
  height: 100%;
  background: url('plaatjes/wolken.png') repeat-x center;
  animation: wolk-marquee 120s linear infinite;
}

.--night #wolk {
  opacity: .03;
}

@keyframes wolk-marquee {
  0% {
    transform: translateX(100vw);
  }

  100% {
    transform: translateX(-100%);
  }
}

/**
 * Towards the horizon
 */
#berg {
  position: fixed;
  bottom: -3rem;
  left: 5vw;
  width: 80vw;
  height: 55vw;
  max-width: 60rem;
  max-height: 50rem;
  background: url('plaatjes/berg.png') no-repeat center / contain;
  pointer-events: none;
}

#oceaan {
  position: fixed;
  bottom: -4rem;
  left: -3vw;
  width: 125%;
  height: 25vw;
  max-height: 20rem;
  background: url('plaatjes/oceaan.jpg') top / cover;
  animation: ocean-waves 20s infinite linear;
}

@keyframes ocean-waves {
  0% {
    transform: skew(0)
  }

  50% {
    transform: skew(12deg)
  }

  100% {
    transform: skew(0)
  }
}

#zeil {
  display: block;
  position: absolute;
  top: -1.8rem;
  right: 0;
  width: 3rem;
  height: 2rem;
  background: url('plaatjes/zeil.png') top / cover;
  animation: sailing 130s infinite linear;
  cursor: url('plaatjes/jun.cur'), auto;
  pointer-events: all;
}

@keyframes sailing {
  from {
    right: -10%
  }

  to {
    right: 110%
  }
}

#fisharereal {
  position: absolute;
  bottom: 65%;
  right: 25%;
  width: 2em;
  height: 4em;
  z-index: 1000;
  pointer-events: all;
}

/**
 * In focus
 */
#eiland {
  position: fixed;
  left: 0;
  bottom: -4rem;
  width: 100%;
}

#eiland-inner {
  position: relative;
  margin: 0 auto;
  width: 100rem;
  height: 50rem;
}

/* -- The Mushroom */
#paddenstoel {
  position: absolute;
  bottom: 10%;
  left: 12%;
  width: 36rem;
  height: 40rem;
  background: url('plaatjes/paddenstoel.png') no-repeat center / contain;
}

#sandwich {
  display: block;
  position: relative;
  top: 11%;
  left: 23%;
  width: 20%;
  height: 12%;
  z-index: 1000;
  background: url('plaatjes/sandwich.png') no-repeat center / contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4));
  pointer-events: all;
  cursor: url('plaatjes/jun.cur'), auto;
  transition: 0.1s transform ease;
}

#globby {
  position: absolute;
  top: 21%;
  left: 61%;
  width: 42%;
  pointer-events: all;
  cursor: url('plaatjes/jun.cur'), auto;
  transition: 0.1s transform ease;
}

#globby img {
  position: absolute;
  left: 0;
  top: 0;
  width: 42%;
}

#raket {
  position: absolute;
  bottom: 32%;
  left: 36%;
  background: url('plaatjes/rocket_spritesheet.png');
  width: 8rem;
  height: 10rem;
  background-size: 3000% 100%;
  animation: raket-tank-anim 2s steps(30) infinite;
  cursor: url('plaatjes/jun.cur'), auto;
  pointer-events: all;
}

#raket.exploding {
  background: url('plaatjes/rocket.png') no-repeat center;
  background-size: 80%;
  background-position: 10% 30%;
  animation: raket-vlieg 2s;
  filter: none !important;
}

#raket.reenter {
  animation: raket-reenter 1s forwards;
}

@keyframes raket-tank-anim {
  from {
    background-position-x: 0%
  }

  to {
    background-position-x: -3000%
  }
}

@keyframes raket-vlieg {
  from {
    transform: translate(0)
  }

  to {
    transform: translate(100vw, -80vw)
  }
}

@keyframes raket-reenter {
  from {
    transform: translateY(100vh)
  }

  to {
    transform: translateY(0)
  }
}

/* -- The hill and the house */
#heuvel {
  position: absolute;
  bottom: 0;
  width: 100rem;
  height: 25rem;
  background: url('plaatjes/heuvel.png') no-repeat center / contain;
  pointer-events: none;
}

#huis {
  position: absolute;
  right: 15rem;
  top: -2rem;
  width: 26rem;
  height: 15rem;
  background: url('plaatjes/huis.png') no-repeat center / contain;
  cursor: url('plaatjes/jun.cur'), auto;
  pointer-events: all;
}

@media (hover: hover) and (pointer: fine) {
  #nuel:hover,
  #huis:hover,
  #sandwich:hover,
  #globby:hover,
  #raket:hover,
  #zeil:hover {
    filter: drop-shadow(0px 0 5px #ffffff55);
  }

  #sandwich:hover,
  #globby:hover {
    transform: translateY(-3px) rotate(2deg);
  }
}

/* -- Now leaving the island */
/**
 * And, close up, grass
 */
#langgras {
  position: fixed;
  left: -3vw;
  bottom: -15rem;
  width: 106vw;
  height: 30rem;
  background: url('plaatjes/langgras.png') repeat-x center;
  pointer-events: none;
}

#hoekgras {
  position: fixed;
  left: -3vw;
  bottom: -3vh;
  width: 35vw;
  height: 40vh;
  background: url('plaatjes/hoekgras.png') no-repeat left bottom / contain;
  transform-origin: bottom center;
}

/**
 * A sign hangs from a strange tree
 */
#broccoli {
  position: fixed;
  top: -2.5rem;
  right: -2rem;
  width: 50vw;
  height: 32vw;
  max-width: 40rem;
  max-height: 23rem;
  background: url('plaatjes/broccoliseq.png') no-repeat;
  background-size: 300% 100%;
  animation: 3s broccoliseq steps(3) infinite;
  z-index: 1000;
}

@keyframes broccoliseq {
  from {
    background-position-x: 0%
  }

  to {
    background-position-x: 150%
  }
}

#boom {
  position: fixed;
  top: -2.5rem;
  left: -15vw;
  width: 70vw;
  height: 50vw;
  max-width: 60rem;
  max-height: 43rem;
  background: url('plaatjes/boom-r.png') no-repeat center / contain;
  pointer-events: none;
}

/**
 * Tooltips
 */
.tooltip {
  display: none;
  position: fixed;
  color: #fff;
  background: #000;
  border-radius: 3px;
  font-size: 1.2rem;
  letter-spacing: -.4px;
  z-index: 10000;
  pointer-events: none;
  margin: 1.2rem 1rem;
  padding: .25rem .9rem .3rem;
  transform-origin: top left;
  animation: .2s pop cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes pop {
  from {
    transform: rotate(5deg) scale(.6)
  }

  to {
    transform: rotate(7deg) scale(1)
  }
}

.mtt-c {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mtt {
  display: inline-block;
  color: #fff;
  background: #333;
  text-shadow: 1px 1px 3px #000;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: -.2px;
  text-align: center;
  border-radius: 50px;
  padding: .15rem .3rem .25rem;
  position: relative;
  animation: inout 10s forwards;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 10000;
}

.exploding .mtt {
  display: none;
}

#nuel:hover .mtt,
#huis:hover .mtt,
#sandwich:hover .mtt,
#globby:hover .mtt,
#raket:hover .mtt {
  opacity: 0 !important;
}

@keyframes inout {
  0% {
    opacity: 0
  }

  50% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/**
 * Utility
 */
@media (pointer: coarse) {
  .u-coarse {
    display: inline;
  }

  .u-fine {
    display: none;
  }
}

@media (pointer: fine) {
  .u-coarse {
    display: none;
  }

  .u-fine {
    display: inline;
  }
}

/**
  * Break-
  * Points
  */
@media (max-width: 1800px) {
  .about {
    padding-top: 13vw;
  }

  .menu a {
    font-size: 1.25rem;
  }

  #heuvel {
    left: -14vw;
    width: 128vw;
    height: 25vw;
    background-size: 100%;
    background-position: center;
  }

  #paddenstoel {
    bottom: 6.4vw;
    left: 14.4vw;
    width: 36vw;
    height: 40vw;
  }

  #raket {
    bottom: 18.2vw;
    left: 38.2vw;
    width: 8.03vw;
    height: 10vw;
  }

  #huis {
    position: absolute;
    left: 69.6vw;
    top: auto;
    bottom: 13vw;
    width: 26vw;
    height: 15vw;
  }

  #langgras {
    left: -16vw;
    bottom: -3rem;
    width: 156vw;
    height: 15vw;
    background-size: contain;
  }

  #broccoli {
    top: -6rem;
  }

  .bord {
    top: 42%;
    left: 24%;
  }

  .mtt {
    font-size: .9rem;
  }

  #fisharereal {
    bottom: 69%;
  }
}

@media (max-width: 1400px) {
  #broccoli {
    right: -6rem;
  }
}

@media (max-width: 1080px) {
  #nuel {
    top: 2rem;
    left: calc(50% - 2em);
    transform: none!important;
    text-decoration: none;
  }

  .about {
    padding-top: 10rem;
  }

  #broccoli {
    top: -4rem;
  }

  .bord {
    top: 6rem;
    left: auto;
    right: 1rem;
    width: 95%;
    min-width: 1rem;
    transform: none;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, .25);
  }
}

@media (max-width: 820px) {
  .menu {
    margin-left: -.9rem;
  }

  #berg {
    bottom: 2rem;
    width: 100vw;
    height: 60vw;
  }

  #oceaan {
    height: 32vw;
    bottom: -4vw;
  }

  #eiland {
    bottom: 0vw;
  }

  #paddenstoel {
    bottom: 1.2vw;
    left: -5vw;
    width: 65vw;
    height: 76vw;
  }

  #raket {
    bottom: 18.2vw;
    left: 40.4vw;
    width: 13.03vw;
    height: 16vw;
  }

  #huis {
    left: 67.6vw;
    bottom: 8.5vw;
    width: 44vw;
    height: 32vw;
  }

  #langgras {
    bottom: -2rem;
    height: 6rem;
  }
}

@media (max-width: 40rem) {
  .about .columns {
    display: block;
  }

  .about .columns div {
    max-width: 20rem;
  }

  .menu a {
    font-size: .9rem;
    padding-right: .8rem;
  }

  .menu a sup {
    font-size: .5em;
  }

  @media (pointer: fine) {
    .menu a:hover {
      padding: .25rem 1.35rem .3rem 1rem;
    }

    .menu a:hover sup {
      right: .7rem;
    }
  }

  .now-playing {
    bottom: .5rem;
    right: .25rem;
  }

  .now-playing img {
    width: .75rem;
  }

  .now-playing span {
    font-size: 0.55rem;
    max-width: 2.75rem;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}