:root[data-theme="light"] {
  --board:  white;
  --floor1: hsl(192, 6%, 83%);
  --floor2: hsl(60, 56%, 91%);
  --wall1:  hsl(114.55, 50%, 75%);
  --wall2:  hsl(204.3, 100%, 100%);
}

:root[data-theme="dark"] {
  --board:  darkgreen;
  --floor1: hsl(192, 6%, 40%);
  --floor2: hsl(60, 15%, 50%);
  --wall1:  hsl(114.55, 35%, 40%);
  --wall2:  hsl(204.3, 35%, 40%);
}

@keyframes blink {
  0%   {transform: scaleX(var(--scalex)) scaleY(var(--scaley));}
  10%  {transform: scaleX(var(--scalex)) scaleY(var(--scaley));}
  15%  {transform: scaleX(var(--scalex)) scaleY(0);}
  20%  {transform: scaleX(var(--scalex)) scaleY(var(--scaley));}
  100% {transform: scaleX(var(--scalex)) scaleY(var(--scaley));}
}

@keyframes float {
  0%   {transform: translateY(-var(--floaty));}
  50%  {transform: translateY(var(--floaty));}
  100% {transform: translateY(-var(--floaty));}
}

@keyframes orbit {
  0%   {transform: translateY(calc(-1 * var(--y))) translateX(calc(-1 * var(--x)));}
  49.9%{opacity: 1;}
  50%  {transform: translateY(var(--y)) translateX(var(--x)); opacity: 0}
  99.9%{opacity: 0;}
  100% {transform: translateY(calc(-1 * var(--y))) translateX(calc(-1 * var(--x))); opacity: 1}
}

@keyframes rise {
  0% {opacity: 0; transform: translate(0,0)};
  20% {opacity: 1;}
  80% {opacity: 1;}
  100% {opacity: 0; transform: translate(160px, -150px)}
}

@keyframes scan {
  80% {left: var(--end);}
}

@keyframes oscillate-rotation {
  0%   {transform: rotate(calc(var(--angle) + var(--change)));}
  50%  {transform: rotate(calc(var(--angle) - var(--change)));}
  100% {transform: rotate(calc(var(--angle) + var(--change)));}
}

@keyframes pencil-scratch {
  0%   {transform: rotate(calc(var(--angle) + var(--change)));}
  10%  {transform: rotate(calc(var(--angle) - var(--change)));}
  20% {transform: rotate(calc(var(--angle) + var(--change)));}
  30%  {transform: rotate(calc(var(--angle) - var(--change)));}
  40% {transform: rotate(calc(var(--angle) + var(--change)));}
  50%  {transform: rotate(calc(var(--angle) - var(--change)));}
  60% {transform: rotate(calc(var(--angle) + var(--change)));}
  100% {transform: rotate(calc(var(--angle) + calc(var(--change) * 0.6)));}
}

@keyframes scribble {
  0%   {transform: rotate(calc(var(--deg) + 5deg));}
  50%  {transform: rotate(calc(var(--deg) - 5deg));}
  100% {transform: rotate(calc(var(--deg) + 5deg));}
}

@keyframes snore {
  0% {transform: scale(1);}
  10% {transform: scale(1);}
  40% {transform: scale(2, 1.8);}
  60% {transform: scale(2, 1.8);}
  90% {transform: scale(1);}
  100% {transform: scale(1);}
}

@keyframes spin-in {
  0%   {transform: scale(0.1) rotate(0deg);}
  80% {transform: scale(1.2) rotate(360deg);}
  100% {transform: scale(1)   rotate(360deg);}
}

@keyframes sway {
  0%   {transform: rotate(5deg);}
  50%  {transform: rotate(-5deg);}
  100% {transform: rotate(5deg);}
}

@keyframes wiggle {
  to { transform: translatex(75px);}
}

@keyframes write {
  0% {transform: translate(0px, 0px)}
  20% {transform: translate(-40px, 5px)}
  25% {transform: translate(0px, -10px)}
  45% {transform: translate(-40px, -5px)}
  50% {transform: translate(0px, -20px)}
  70% {transform: translate(-40px, -15px)}
  75% {transform: translate(0px, -30px)}
  95% {transform: translate(-40px, -25px)}
  100% {transform: translate(0px, 0px)}
}

.classroom-board {
  text-align: center;
  border: 3px solid black;
  background-color: var(--board);
  border-radius: 10px;
  padding: 10px;
  width: 500px;
  max-width: 95%;
  position: absolute;
  top: 10px;
  bottom: calc(50% + 10px);
  display: flex;
  flex-direction: column;
  font-family: 'Brush Script MT', cursive;
  justify-content: space-between;
}

.classroom-board:hover {
  cursor: pointer;
}

.classroom-board:hover a {
  color: #72afd2;
}

.classroom-floor {
  --angle: 20deg;
  --width: 45px;
  position: absolute;
  bottom: 0;
  top: 50%;
  left: 0;
  right: 0;
  opacity: 1;
  border-top: 4px solid black;
  background: repeating-linear-gradient(var(--angle), var(--floor1) 0px, var(--floor1) 3px, transparent 2px, transparent var(--width)), repeating-linear-gradient(calc(180deg - var(--angle)), var(--floor1) 0px, var(--floor1) 3px, transparent 2px, transparent var(--width)), var(--floor2);
}

.classroom-wall {
  --width: 60px;
  height: 500px;
  max-height: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 1;
  position: relative;
  background-image: linear-gradient(to right, var(--wall1), var(--wall1) var(--width), var(--wall2) var(--width), var(--wall2));
  background-size: calc(var(--width) * 2) 100%;
}

.mascot-board {
  position: relative;
  text-align: center;
  padding: 20px;
  border: 4px solid black;
  border-radius: 10px;
  background-color: #c07302;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 680px){
  .mascot-board {
    left: 55%;
    max-width: 40vw;
    width: fit-content;
  }
}

@media screen and (max-width: 680px){
  .mascot-board {
    margin: 0 20px;
  }
}


.mascot-container {
  height: 200px;
}

.mascot-container img {
  height: 200px;
  max-height: 100%;
  position: absolute;
}

.mascot-eye {
  background-color: black;
  clip-path: ellipse(10px 12px);
  height: 25px;
  width: 20px;
  position: absolute;
  z-index: 1;
}

.mascot-eye .sparkle {
  background-color: white;
  clip-path: ellipse(3px 4px);
  height: 10px;
  width: 6px;
  position: absolute;
  top: 4px;
  left: 11px;
}

.mascot-frame {
  height: 200px;
}

.question-bubble {
  animation-name: orbit;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  height: 50px !important;
  left: 70px !important;
  top: 70px !important;
}

.sleep-bubble {
  animation: rise 6s infinite linear;
  z-index: 2;
  position: relative;
}

.sleep-bubble img {
  animation: wiggle 1.5s alternate infinite ease-in-out;
  height: 50px !important;
  left: 70px !important;
  top: 125px !important;
  z-index: 2;
}

.sleepy-mouth {
  border: 1px solid black;
  background-color: black;
  height: 10px;
  width: 15px;
  left: 90px;
  top: 140px;
  position: relative;
  border-radius: 10px;
  animation: snore 4s ease-in-out infinite;
  animation-delay: -2s;
  z-index: 2;
}