body {
  background: linear-gradient(transparent, transparent, #ffdef060), 
    url(../images/bg/pattern.png);
  display: flex;
  flex-direction: column;
  align-items: center;
  --yres: 524px;
}

header {
  text-align: center;
  min-width: 520px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 28px #cc4b0d solid;
  border-image: url(../images/border/chalkboard.png) 28;
  background: url(../images/bg/doodle.png) center no-repeat,
    url(../images/bg/board.png) center;
  color: white;
  margin: 1em 0;
}

nav {
  margin-top: 60px;
  display: flex;
  align-items: center;
}

#multinote {
  min-width: 210px;
  height: 384px;
  background: url(../images/note/note_plans.png);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  display: none;
}

#the-weird-one {
  position: absolute;
  left: calc(50vw - 250px);
}

#popup {
  position: absolute;
  bottom: 5vh;
  right: calc(50vw - 400px);
  animation: rotate 1s infinite alternate ease-in-out;
}