body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.board {
  position: relative;        /* SUPER IMPORTANT */
  width: 100vw;
  height: 100vh;
  background-image: url('assets/corkboard.png');
  background-size: cover;
  background-position: center;
}

/* CONTENT WARNING */
.note.warning {
  position: absolute;
  left: 45.52%;
  top: 40.19%;
  width: 8.70%;
  aspect-ratio: 0.994;
  background-image: url('assets/contentwarning.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(-3deg);
}

/* PROCEED NOTE */
.note.proceed {
  position: absolute;
  left: 50.78%;
  top: 51.85%;
  width: 8.91%;
  aspect-ratio: 1;
  background-image: url('assets/Proceed.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(1deg);
}

/* UPDATE LOG NOTE */
.note.log {
  position: absolute;
  left: 58.96%;
  top: 30.56%;
  width: 8.96%;
  aspect-ratio: 0.983;
  background-image: url('assets/updatelog.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(-2deg);
}

/* CREDITS NOTE */
.note.credits {
  position: absolute;
  left: 29.17%;
  top: 27.22%;
  width: 8.91%;
  aspect-ratio: 1.036;
  background-image: url('assets/credits.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(3deg);
}

/* CAT PHOTO */
.note.kittens {
  z-index: 9999;
  position: absolute;
  left: 43.07%;
  top: 51.76%;
  width: 4.48%;
  aspect-ratio: 1;
  background-image: url('assets/cat.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(-1deg);
}

.note:hover {
  transform: scale(1.04) rotate(var(--angle));
  filter: brightness(1.08);
  cursor: pointer;
}