@font-face {
  font-family: 'unixel';
  src: url(https://humantooth.neocities.org/fonts/unixel-Regular.woff2) format('woff2');
  font-weight: normal;
}

@font-face {
  font-family: 'MachineLearning';
  src: url(https://humantooth.neocities.org/fonts/MachineLearningFont-v1.woff) format('woff');
  font-weight: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: 'unixel', monospace;
  background: white;
  cursor: default;
}

button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

#startup-screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: white;
}

#background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: backgroundAppear 0.7s ease forwards;
  z-index: 1;
}

@keyframes backgroundAppear {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pop-item {
  opacity: 0;
  transform: scale(0.4);
  animation: popIn 0.45s steps(2, end) forwards;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }

  60% {
    opacity: 1;
    transform: scale(1.12);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#title-img {
  position: absolute;
  left: 6vw;
  top: 18vh;
  width: 68vw;
  max-width: 1050px;
  z-index: 3;
  animation-delay: 0.8s;
  image-rendering: pixelated;
}

#top-icons {
  position: absolute;
  top: 4.5vh;
  right: 2vw;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 5;
  animation-delay: 1.1s;
}

.icon-btn {
  display: block;
}

.icon-btn img {
  display: block;
  height: 78px;
  image-rendering: pixelated;
}

#camera-btn img {
  height: 76px;
}

#alert-btn img {
  height: 74px;
}

#exit-btn img {
  height: 78px;
}

#textbox {
  position: absolute;
  top: 15vh;
  right: 6vw;
  width: 360px;
  z-index: 9998;
  display: none;
  image-rendering: pixelated;
}

#textbox.show {
  display: block;
  animation: textboxPop 0.25s steps(2, end) forwards;
}

@keyframes textboxPop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

#start-btn {
  position: absolute;
  left: 39vw;
  bottom: 8vh;
  z-index: 4;
  animation-delay: 1.4s;
}

#start-btn img {
  width: 380px;
  image-rendering: pixelated;
}

#cursor-img {
  position: absolute;
  right: 11vw;
  bottom: 16vh;
  width: 230px;
  z-index: 9999;
  image-rendering: pixelated;
  pointer-events: none;
  opacity: 0;
  display: block;
  visibility: visible;
  animation: cursorPop 0.45s steps(2, end) 1.7s forwards;
  transform-origin: top left;
}

@keyframes cursorPop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }

  60% {
    opacity: 1;
    transform: scale(1.12);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#startup-screen.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

#paint-page {
  display: none;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #ffffff, #b7d8ff, #5fbdff);
  color: #1268d8;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

#paint-page.show {
  display: flex;
}

#paint-page h1 {
  font-family: 'MachineLearning', sans-serif;
  font-size: 90px;
  letter-spacing: 3px;
  margin-bottom: 20px;
}

#paint-page p {
  font-size: 28px;
}

@media (max-width: 900px) {
  #title-img {
    width: 82vw;
    left: 5vw;
    top: 20vh;
  }

  #start-btn {
    left: 26vw;
  }

  #start-btn img {
    width: 300px;
  }

  #cursor-img {
    width: 160px;
    right: 8vw;
    bottom: 18vh;
  }

  .icon-btn img {
    height: 55px;
  }

  #textbox {
    width: 280px;
    right: 4vw;
  }
}