body {
  background-image: url("resources/image/bg.png");
  background-size: contain;
  cursor: url("/resources/image/arrow.png"), auto;
}

a {
  cursor: url("/resources/image/hand.png"), pointer;
}

a:link {
  color: #B9BDF5;
}

a:visited {
  color: #8187db;
}

a:hover {
  color: #afb2d8;
}

a:active {
  color: #bec2f7;
}

.banner {
  position: relative;
  width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.bg-image {
  width: 100%;
  display: block;
  border-radius: 12px;
  filter: drop-shadow(8px 8px 10px black);
}

.text-image {
  position: absolute;
  right: 90px;
  top: 50%;
  transform: translateY(-50%);

  width: auto;
  cursor: url("/resources/image/hand.png"), pointer;

  transition:
    transform 0.3s ease,
    filter 0.3s ease,
    box-shadow 0.3s ease;
}

.text-image:hover {
  transform: translateY(-50%) scale(1.05);

  filter: brightness(1.5);
}

@font-face { 
  font-family: din;
  src: url(/resources/font/DIN.ttf);
}

.btn {
  display: inline-block;
  width: auto;
  text-decoration: none;
  line-height: 1;
  border: 1px solid rgba(0, 0, 0,.4);
  color: white;
  text-align: center;
  border-radius: 4px;
  background-color: rgba(185, 189, 245, 0.75);
  box-shadow: inset 2px 2px 0px 0px  rgba(255 255 255 / 20%), inset -2px -2px 0px 0px rgb(0 0 0 / 10%);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  filter: drop-shadow(2px 2px 8px gray);
  font-family: din;
}

.btn a {
  color: white;
}

.btn:active {
  box-shadow: inset -2px -2px 0px 0px rgba(255 255 255 / 20%),
    inset 2px 2px 0px 0px rgba(0 0 0 / 10%);
}

.niv {
  padding: 5px;
}

.niv:hover {
  box-shadow:
    0 0 10px rgba(79, 70, 229, 0.6),
    0 0 20px rgba(79, 70, 229, 0.4);

  transform: translateY(-2px);
}

#navbar {
  height: 50px;
  width: 900px;
  margin: 0 auto;
}

#lastfm {
  position: absolute;
  z-index: 3;
  top: 0px;
  right: 0px;
}

#updt {
  position: absolute;
  z-index: 3;
  top: 250px;
  left: 0px;
}

#navbar ul {
  display: flex;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

#navbar li {
  padding-top: 10px;
}

#container {
  width: 900px;
  margin: 0 auto;
  animation: float 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

@keyframes float {
  0% { 
    transform: translate(0, 0px);
  }

  50% {
    transform: translate(0, 8px);
  }

  100% {
    transform: translate(0, -0px);
  }
}

.marquee {
  position: absolute;
  top: 460px;

  z-index: 1;

  overflow: hidden;

  display: flex;
  align-items: center;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll 20s linear infinite;
  gap: 20px;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-track img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}

.marquee2 {
  position: absolute;
  top: 730px;

  z-index: 1;

  overflow: hidden;

  display: flex;
  align-items: center;
}

.marquee2-track {
  display: flex;
  width: max-content;
  animation: scroll 20s linear infinite;
  gap: 20px;
}

.marquee2-track:hover {
  animation-play-state: paused;
}

.marquee2-track img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 10px));
  }
}
  
#hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

p {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 30px;
  margin-left: 30px;
}

.bubble {
  position: fixed;
  bottom: -10%;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;

  /* blue/aqua bubble look */
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,1),
    rgba(160,220,255,0.9),
    rgba(80,180,255,0.8),
    rgba(0,200,255,0.7)
  );

  box-shadow:
    0 0 12px rgba(160,220,255,0.9),
    0 0 20px rgba(80,180,255,0.8),
    0 0 28px rgba(0,200,255,0.7),
    inset 0 0 8px rgba(255,255,255,0.8);

  animation-name: bubbles-rise, bubbles-drift;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

/* rise upward */
@keyframes bubbles-rise {
  0%   { bottom: -10%; opacity: 0; }
  8%   { opacity: 1; }
  100% { bottom: 110%; opacity: 0; }
}

/* side drifting */
@keyframes bubbles-drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(30px); }
  100% { transform: translateX(0); }
}

/* randomized sizes + timing (no gaps) */
.bubble:nth-of-type(1)  { left: 5%;  width: 14px; height: 14px; animation-duration: 11s, 4s; animation-delay: 0s, 0s; }
.bubble:nth-of-type(2)  { left: 12%; width: 18px; height: 18px; animation-duration: 13s, 5s; animation-delay: 2s, 1s; }
.bubble:nth-of-type(3)  { left: 20%; width: 10px; height: 10px; animation-duration: 9s, 3s; animation-delay: 1s, 2s; }
.bubble:nth-of-type(4)  { left: 28%; width: 22px; height: 22px; animation-duration: 14s, 6s; animation-delay: 3s, 0s; }
.bubble:nth-of-type(5)  { left: 36%; width: 16px; height: 16px; animation-duration: 10s, 4s; animation-delay: 5s, 2s; }
.bubble:nth-of-type(6)  { left: 44%; width: 20px; height: 20px; animation-duration: 12s, 5s; animation-delay: 1s, 1s; }
.bubble:nth-of-type(7)  { left: 52%; width: 12px; height: 12px; animation-duration: 9s, 3s; animation-delay: 4s, 2s; }
.bubble:nth-of-type(8)  { left: 60%; width: 24px; height: 24px; animation-duration: 15s, 6s; animation-delay: 0s, 0s; }
.bubble:nth-of-type(9)  { left: 68%; width: 14px; height: 14px; animation-duration: 11s, 4s; animation-delay: 6s, 1s; }
.bubble:nth-of-type(10) { left: 76%; width: 18px; height: 18px; animation-duration: 13s, 5s; animation-delay: 2.5s, 0s; }
.bubble:nth-of-type(11) { left: 84%; width: 12px; height: 12px; animation-duration: 10s, 4s; animation-delay: 3.5s, 2s; }
.bubble:nth-of-type(12) { left: 92%; width: 20px; height: 20px; animation-duration: 14s, 6s; animation-delay: 1.5s, 1s; }

/* extra bubbles for constant flow */
.bubble:nth-of-type(13) { left: 15%; width: 16px; height: 16px; animation-duration: 12s, 4s; animation-delay: 0.5s, 1s; }
.bubble:nth-of-type(14) { left: 35%; width: 12px; height: 12px; animation-duration: 10s, 3s; animation-delay: 3s, 0s; }
.bubble:nth-of-type(15) { left: 55%; width: 18px; height: 18px; animation-duration: 13s, 5s; animation-delay: 2s, 2s; }
.bubble:nth-of-type(16) { left: 75%; width: 14px; height: 14px; animation-duration: 11s, 4s; animation-delay: 4s, 1s; }

footer {
  color: white;
  text-shadow: 2px 2px 4px black;
  text-align: center;
  font-family: din;
}

.space {
  height: 130px;
}

/* Firefox Support */
html {
  scrollbar-width: auto;
  /* Track is the second color. The '33' at the end of the hex code makes it translucent */
  scrollbar-color: #a3b2f0 rgba(18, 19, 36, 0.75); 
}

/* Chrome, Edge, and Safari Support */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(18, 19, 36, 0.75); /* 0.4 = 40% opacity */
}

::-webkit-scrollbar-thumb {
  background: #a3b2f0;
  border-radius: 4px;
}

.limb {
  width: 900px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.textmarquee {
  z-index: 0;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 45px;
  height: 100%;
  overflow: hidden;
}

@font-face { 
  font-family: toxigenesis;
  src: url(/resources/font/toxigenesis.otf);
}

.textlist {
  display: flex;
  flex-direction: column;
  animation: VertMarquee 10s linear infinite;
}

.marquee-group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 20px; 
  padding-bottom: 20px; 
}

.textlist span {
  writing-mode: vertical-rl;
  font-size: 36px;
  display: block;
  text-align: center;
  filter: drop-shadow(0 3px #8184a8) drop-shadow(2px 0 #8184a8) drop-shadow(0 -1px #d4d7fc) drop-shadow(-1px 0 #8184a8) drop-shadow(0 3px white) drop-shadow(3px 0 white) drop-shadow(0 -3px white) drop-shadow(-3px 0 white) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow(0 0 2px #424242);
  color: #B9BDF5;
  font-family: toxigenesis;
}

@keyframes VertMarquee {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}