/* Contain site content in a window in the middle */
body {
  background-color: #653c98;
  background-image: url("/assets/images/bg1.png");
  font-family: "Courier", monospace;
  text-align: center;
  image-rendering: smooth;
}

#wiggle span, #wiggle2 span, #wiggleside span {
  animation-delay: var(--n);
  animation: wave 1.5s linear var(--n) infinite forwards running;
  position: relative;
}

div.center-wrapper {
  color: rgb(255, 255, 255);
  width: 60%;
  height: auto;
  margin: 5px auto;
}

div.vbox {
  display: flex;
  align-items: stretch;
  flex-direction: column;
}

div.hbox {
  display: flex;
  align-items: stretch;
  flex-direction: row;
}

div.wrapper {
  position: relative;
  margin: 5px;
  padding: 3px;
  border: 3px solid white;
  background-attachment: local;
  background-color: #2e268b;
  background-image: url("/assets/images/bg2.png");
}

div.sidebar-content {
  width: 250px;
  background-color: black;
  border: 3px solid white;
  padding: 10px;
  margin: 5px;
}

div.content {
  flex: 1;
  padding: 5px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 5px;
  border: 3px solid white;
  position: relative;
  background-attachment: local;
  background-color: #2e268b;
  background-image: url("/assets/images/bg2.png");
}

img.homeimg {
  border-radius: 16px;
  height: 250px;
  width: auto;
}

hr {
  color: #000000;
}

a.highlight-hover {
  color: #ffcc00;
  text-decoration: none;
  background: linear-gradient(to bottom, #ffa600 0%, #ffa600 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 0 1px;
  color: #ffa600;
  text-decoration: none;
  transition: background-size 0.3s;
}

a:visited {
  color: #ffa600;
}

a.current {
  color: red;
}

/* Background size is modulated by the transition tag. If it is foregone, the change is instant. */
a.highlight-hover:hover {
  background-size: 4px 50px;
  color: black;
  text-decoration: underline;
}

h1, h2, h3 {
  /* Fallback: Set a background color. */
  background-color: #ffa600;
  /* Create the gradient. */
  background-image: linear-gradient(90deg, #fcde45 3.125%, #ffbf00 28%, #ff6f00 53%, #fd575a 78%, #ff3fcc 100%);
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;
  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

.gay-scroller {
  overflow: hidden;
  white-space: nowrap;
}

.gay-scroller-inner {
  display: inline-block;
  animation: scroll 2s linear infinite normal;
  animation-name: gayscroll;
}

@keyframes gayscroll {
  0% {
    transform: translateX(115%);
  }
  20% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-115%); /* Adjust based on content width */
  }
}

/*# sourceMappingURL=styles.css.map */