body {
  background: url('stars.gif') repeat; /* or use a neon solid color */
  font-family: "Tahoma", Tahoma, sans-serif;
  color: #000000; /* neon white text */
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
}

li {
  margin-left: 20px;   /* indent */
  padding: 4px 0;      /* vertical padding, no horizontal */
}

a:link {
  color: #0000FF; /* cyan links */

}
a:visited {
  color: #FF00FF; /* purple visited links */
}
a:hover {
  color: #FFFF00; /* bright yellow hover */
  background: #000080; /* dark blue background highlight */
}
p {
  color: #FFFFFF
}
h1 {
font-family: "Comic Sans MS", Georgia, sans-serif;
color: #294665;
max-width: 95%;
text-align: center;

}
.webring-box {
  border: 4px ridge #CCCCCC;
  padding: 10px;
  margin: 0px auto;
  background: #644264; /* black background for contrast */
  width: 400px;
max-width: 90%;
}

.text-box {
  font-family: "Georgia", Georgia, sans-serif;
  border: 4px ridge #CCCCCC;
  padding: 10px;
  margin: 20px auto;
  background: #D7EBF0; /* background for contrast */
  width: 600px;
max-width: 90%;
  text-wrap: wrap;
  text-align: left;
}

.webring-title {
  font-size: 24px;
  color: #00aaff; /* bright blue title */
  text-shadow: 1px 1px #000000; /* fake pixel-y shadow */
}

.nav-buttons {
  margin-top: 10px;
}

.nav-buttons a {
  border: 2px outset #666;
  padding: 5px 10px;
  margin: 0 5px;
  background: #3333FF;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: bold;
}

.nav-buttons a:hover {
  border: 2px inset #666;
  background: #ffaaff;
}

.marquee {
  width: 100%;
  align: center;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  animation: scroll 33s linear infinite;
}

@keyframes scroll {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}