@font-face {
  font-family: 'Liddell';
  src: url('https://solen.neocities.org/Liddell-Regular.woff2') format('woff2'),
       url('https://solen.neocities.org/Liddell-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  background-color: #798e9a;
  color: white;
  font-family: 'Liddell', 'Comic Neue', sans-serif;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  position: relative;
  width: 100%;
  padding-bottom: 60px;
}

/* Hover effect */
.hover-container {
  position: relative;
  display: inline-block;
}

.hover-container img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

.hover-container img.hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

.hover-container:hover img.hover {
  opacity: 1;
}

/* Center image sizing fix */
.center-image {
  position: relative;
  z-index: 10;
}

.center-hover img.default,
.center-hover img.hover {
  width: min(45vw, 600px);
  height: auto;
  margin: 100px auto 0 auto;
  display: block;
  pointer-events: none;
}

.below-center {
  display: flex;
  justify-content: center;
  gap: clamp(30px, 5vw, 60px);
  margin-bottom: 40px;
}

.character {
  position: relative;
  z-index: 40;
}

.flight img { width: min(25vw, 400px); }
.littleguy img { width: min(30vw, 550px); }
.shanisse img { width: min(35vw, 420px); margin-top: -60px; }
.bear img { width: min(45vw, 900px); object-fit: cover; object-position: left center; }

.flight { position: absolute; top: 5vh; left: 5vw; z-index: 20; }
.littleguy { position: absolute; top: 0; right: 0; margin: 0; z-index: 20; }
.bear { transform: translateX(40px); }

.site-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 20px; }


.description {
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  max-width: 600px;
  margin: 0 auto 40px;
}

.signature img { width: min(20vw, 100px); height: auto; }

@media (max-width: 900px) {
  .flight { top: 3vh; left: 3vw; }
  .below-center { gap: 4vw; }
  .center-hover img.default, .center-hover img.hover { width: min(60vw, 500px); }
  .video-container { width: 70%; max-width: 400px; }
  .shanisse img { margin-top: -40px; }
  .bear { transform: translateX(40px); }
}

@media (max-width: 600px) {
  .flight { top: 2vh; left: 2vw; }
  .littleguy { top: 10px; right: 10px; }
  .flight img, .littleguy img, .shanisse img, .bear img { width: min(45vw, 200px); }
  .center-hover img.default, .center-hover img.hover { width: min(70vw, 320px); }
  .below-center { flex-wrap: wrap; gap: 6vw; }
  .video-container { width: 80%; max-width: 360px; }
  .shanisse img { margin-top: -20px; }
  .bear { transform: none; }
}