@font-face {
    font-family: 'snake';
    src: url("snake.woff2")format("woff2");
}
* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  font-family: 'snake', serif;
}

.title-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1vh;
  height: 100vh;
  width: 100%;
  padding: 2vh 0;
}

.title-line {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  margin-top: -4vw;
  font-size: 15vw;
  font-weight: 400;
  color: #c90000; 
  transform: rotate(-30deg);
  transition:transform 0.2s cubic-bezier(.31,.71,.63,.91);
}

.title-line span {
  margin: 0 2vw;
}

.title-line span:hover {
  color: rgb(236, 255, 130);
  transform: scale(1.4) rotate(0deg); 
  animation: snakeSwing 0.5s ease-in-out infinite;
}
body:hover {
  background-color: #da82d7;
}
@keyframes snakeSwing {
  0% { transform: scale(1) rotate(-5deg); }
  50% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1.3) rotate(-5deg); }
}