css
/* Styles for Utopian Games Tower */
body {
  background-color: #ff00ff;
  color: #000;
  font-family: 'Arial Black', sans-serif;
}

a {
  text-decoration: none;
  color: #00ff00;
}

a:hover {
  text-decoration: underline;
  color: #ff0000;
}

h1, h2, h3, h4, h5, h6, p {
  font-family: 'Arial Black', sans-serif;
  color: #000;
  border-bottom: 4px solid #000;
  margin-bottom: 0;
  padding-bottom: 4px;
}

h1 {
  font-size: 36pt;
  color: #ff0000;
}

h2 {
  font-size: 24pt;
  color: #0000ff;
}

h3, p {
  font-size: 18pt;
  color: #00ff00;
}

h4, h5, h6 {
  font-size: 14pt;
  color: #000;
}

h1, h2, h3, h4, h5, h6, p {
  text-shadow: 2px 2px 2px #000;
  border-bottom: 4px solid #000;
  margin-bottom: 0;
  padding-bottom: 4px;
}

/* Add a box shadow to h1 and h2 to give them a sense of depth */
h1 {
  box-shadow: 4px 4px 4px #000;
}

h2 {
  box-shadow: 4px 4px 4px #000;
}

/* Add a drop shadow to the background of the page to give it some texture */
body {
  background-image: linear-gradient(to bottom, #000, #333);
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: 1px 100%;
  -webkit-background-size: 1px 100%;
  -moz-background-size: 1px 100%;
  -ms-background-size: 1px 100%;
  -o-background-size: 1px 100%;
  background-attachment: scroll;
  background-clip: border-box;
  background-origin: padding;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -ms-background-clip: border-box;
  -o-background-clip: border-box;
  background-clip: border-box;
  background-size: auto 100px;
  background-attachment: fixed;
  background-position: 0 0;
  background-origin: padding;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -ms-background-clip: border-box;
  -o-background-clip: border-box;
  background-clip: border-box;
  background-size: 100% 100px;
  background-attachment: fixed;
  background-position: 0 0;
  background-origin: padding;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -ms-background-clip: border-box;
  -o-background-clip: border-box;
  background-clip: border-box;
}

/* Make the text inside the h1 and h2 elements have a slight gradient effect */
h1:after {
  content: attr(style, 'linear-gradient(90deg, #000, #000, #fff)');
  background: linear-gradient(90deg, #000, #000, #fff);
  -webkit-background: linear-gradient(90deg, #000, #000, #fff);
  background-size: 100px 100px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-origin: padding;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

h2:after {
  content: attr(style, 'linear-gradient(90deg, #000, #fff, #000)');
  background: linear-gradient(90deg, #000, #fff, #000);
  -webkit-background: linear-gradient(90deg, #000, #fff, #000);
  background-size: 100px 100px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-origin: padding;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}