body, html {
  margin: 0;
  overflow: hidden;
  background-color: #3d3d4b;
}

@media screen and (max-width: 960px) {
  .info {
    font-size: 2rem; /* Smaller text on smaller devices */
  }
  body, html {
    max-width: 960px;
  }
}

.title {
  margin: 2rem;
  text-align: center;
}

#ca {
  color: #ffffff;
  font-size: 6rem;
}

.ticker {
  margin: 2rem;
  text-align: center;
  font-size: 2rem;
  color: #ffffff;
}

.cat {
  margin: 0 auto;
  max-width: 600px;
}

#gecatImage {
  width: 100%;
}

.left {
  margin-left: 12rem;
}

.right {
  margin-right: 12rem;
}

.info {
  margin: 2rem;
  text-align: center;
  font-size: 2rem;
}

.text {
  font-size: 4rem;
}

a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

.corner {
  text-align: center;
  overflow: hidden;
  display: table-row;
}

.psychedelic {
  animation: psychedelicBackground 0.5s infinite alternate;
}

.psychedelic .title, .psychedelic .ticker, .psychedelic .info, .psychedelic #ca, .psychedelic p, .psychedelic a {
  animation: psychedelicText 0.5s infinite alternate;
}

.psychedelic img {
  animation: psychedelicImage 0.5s infinite alternate;
}

@keyframes psychedelicBackground {
  0% { background: linear-gradient(45deg, #3d3d4b, #ff69b4); }
  12.5% { background: linear-gradient(45deg, #ff69b4, #8a2be2); }
  25% { background: linear-gradient(45deg, #8a2be2, #7fff00); }
  37.5% { background: linear-gradient(45deg, #7fff00, #ff4500); }
  50% { background: linear-gradient(45deg, #ff4500, #1e90ff); }
  62.5% { background: linear-gradient(45deg, #1e90ff, #ff1493); }
  75% { background: linear-gradient(45deg, #ff1493, #ffa500); }
  87.5% { background: linear-gradient(45deg, #ffa500, #00ff7f); }
  100% { background: linear-gradient(45deg, #00ff7f, #3d3d4b); }
}

@keyframes psychedelicText {
  0% { color: #ffffff; font-size: 2rem; transform: rotate(0deg); }
  20% { color: #ff69b4; font-size: 3rem; transform: rotate(10deg); }
  40% { color: #8a2be2; font-size: 4rem; transform: rotate(-10deg); }
  60% { color: #7fff00; font-size: 5rem; transform: rotate(15deg); }
  80% { color: #ff4500; font-size: 6rem; transform: rotate(-15deg); }
  100% { color: #ffffff; font-size: 2rem; transform: rotate(0deg); }
}

@keyframes psychedelicImage {
  0% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.2) rotate(15deg); }
  40% { transform: scale(1.4) rotate(-15deg); }
  60% { transform: scale(1.6) rotate(30deg); }
  80% { transform: scale(1.8) rotate(-30deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.psychedelicCubes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.cube {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.3);
  animation: rotateCube 1s infinite linear, moveCube 2s infinite alternate ease-in-out;
}

@keyframes rotateCube {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes moveCube {
  0% { top: -10%; left: -10%; }
  25% { top: 10%; left: 10%; }
  50% { top: 50%; left: 50%; }
  75% { top: 75%; left: 75%; }
  100% { top: 110%; left: 110%; }
}

.floatingTextContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999; /* High z-index to ensure it stays on top */
  overflow: hidden;
}

.floatingText {
  position: absolute;
  color: white;
  font-weight: bold;
}

.floatingTextAnimation0 {
  animation: floatingTextAnimation0 5s infinite alternate ease-in-out;
}

.floatingTextAnimation1 {
  animation: floatingTextAnimation1 5s infinite alternate ease-in-out;
}

.floatingTextAnimation2 {
  animation: floatingTextAnimation2 5s infinite alternate ease-in-out;
}

.floatingTextAnimation3 {
  animation: floatingTextAnimation3 5s infinite alternate ease-in-out;
}

@keyframes floatingTextAnimation0 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0.5; }
  12.5% { transform: translate(-10px, 20px) rotate(15deg); opacity: 0.7; }
  25% { transform: translate(20px, -10px) rotate(-15deg); opacity: 0.9; }
  37.5% { transform: translate(-20px, 30px) rotate(30deg); opacity: 0.6; }
  50% { transform: translate(10px, -20px) rotate(-30deg); opacity: 1; }
  62.5% { transform: translate(-30px, 10px) rotate(45deg); opacity: 0.8; }
  75% { transform: translate(30px, -30px) rotate(-45deg); opacity: 0.9; }
  87.5% { transform: translate(-40px, 40px) rotate(60deg); opacity: 0.7; }
  100% { transform: translate(40px, -40px) rotate(-60deg); opacity: 0.5; }
}

@keyframes floatingTextAnimation1 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0.5; }
  12.5% { transform: translate(15px, -10px) rotate(-20deg); opacity: 0.7; }
  25% { transform: translate(-15px, 25px) rotate(20deg); opacity: 0.9; }
  37.5% { transform: translate(25px, -20px) rotate(-35deg); opacity: 0.6; }
  50% { transform: translate(-25px, 35px) rotate(35deg); opacity: 1; }
  62.5% { transform: translate(35px, -30px) rotate(-50deg); opacity: 0.8; }
  75% { transform: translate(-35px, 45px) rotate(50deg); opacity: 0.9; }
  87.5% { transform: translate(45px, -40px) rotate(-65deg); opacity: 0.7; }
  100% { transform: translate(-45px, 55px) rotate(65deg); opacity: 0.5; }
}

@keyframes floatingTextAnimation2 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0.5; }
  12.5% { transform: translate(-20px, 10px) rotate(10deg); opacity: 0.7; }
  25% { transform: translate(30px, -15px) rotate(-10deg); opacity: 0.9; }
  37.5% { transform: translate(-30px, 20px) rotate(20deg); opacity: 0.6; }
  50% { transform: translate(40px, -25px) rotate(-20deg); opacity: 1; }
  62.5% { transform: translate(-40px, 30px) rotate(30deg); opacity: 0.8; }
  75% { transform: translate(50px, -35px) rotate(-30deg); opacity: 0.9; }
  87.5% { transform: translate(-50px, 40px) rotate(40deg); opacity: 0.7; }
  100% { transform: translate(60px, -45px) rotate(-40deg); opacity: 0.5; }
}

@keyframes floatingTextAnimation3 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0.5; }
  12.5% { transform: translate(25px, -15px) rotate(-25deg); opacity: 0.7; }
  25% { transform: translate(-25px, 30px) rotate(25deg); opacity: 0.9; }
  37.5% { transform: translate(35px, -25px) rotate(-40deg); opacity: 0.6; }
  50% { transform: translate(-35px, 45px) rotate(40deg); opacity: 1; }
  62.5% { transform: translate(45px, -35px) rotate(-55deg); opacity: 0.8; }
  75% { transform: translate(-45px, 55px) rotate(55deg); opacity: 0.9; }
  87.5% { transform: translate(55px, -45px) rotate(-70deg); opacity: 0.7; }
  100% { transform: translate(-55px, 65px) rotate(70deg); opacity: 0.5; }
}