/* styles.css */

/* Define some colors that are sure to clash */
body {
  background-color: #ff69c0; /* Bright pink */
  color: #fff; /* White, but not really */
}

/* Make everything bold and loud */
h1, h2, h3, h4, h5, h6, p, span, a, button {
  font-weight: bold;
  text-shadow: 1px 1px 1px #333333; /* Harsh shadows */
}

/* Define the border of the page */
border: 4px solid #333; /* Thick black borders */

/* Define some fun colors for links and visited links */
a {
  color: #00f; /* Bright blue */
  text-decoration: none;
  border-bottom: 4px solid #000; /* Black borders on hover */
}

a:visited {
  color: #ff0; /* Bright yellow */
  text-decoration: none;
  border-bottom: 4px solid #000; /* Black borders on visited link */
}

/* Add some fun hover effects to links */
a:hover {
  color: #0f0; /* Bright green */
  border-bottom: 4px solid #000; /* Black borders on hover */
}

/* Define some fun font styles for headers */
h1 {
  font-size: 24pt;
  letter-spacing: 2px;
  font-family: 'Bangers', cursive; /* A fun, bold font */
  font-weight: bold;
  color: #000; /* Black text */
  border: 4px solid #000; /* Black border */
  background-color: #f00; /* Red background */
  padding: 10px;
  margin: 20px;
  text-align: center;
  text-transform: uppercase;
}

h2 {
  font-size: 20pt;
  letter-spacing: 1.5px;
  font-family: 'Bangers', cursive;
  font-weight: bold;
  color: #000;
  border: 4px solid #000;
  background-color: #f0f;
  padding: 10px;
  margin: 20px;
  text-align: center;
  text-transform: uppercase;
}

/* Define some fun font styles for paragraphs */
p {
  font-size: 16pt;
  letter-spacing: 1px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  color: #000;
  margin: 10px;
  padding: 5px;
  text-align: left;
  text-transform: none;
}

/* Define some fun font styles for spans */
span {
  font-size: 14pt;
  letter-spacing: 1px;
  font-family: 'Arial Black', sans-serif;
  font-weight: bold;
  color: #000;
  margin: 5px;
  padding: 2px;
  text-align: left;
  text-transform: none;
}

/* Define some fun font styles for buttons */
button {
  font-size: 14pt;
  letter-spacing: 1px;
  font-family: 'Bangers', cursive;
  font-weight: bold;
  color: #000;
  border: 4px solid #000;
  border-radius: 5px;
  background-color: #f00;
  padding: 5px 10px;
  margin: 5px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #f0f; /* Brighter red */
  color: #fff; /* White text on hover */
  border: 4px solid #000;
  border-radius: 5px;
  transition: background-color 0.2s;
}

button:visited {
  background-color: #0f0; /* Brighter green on visited link */
  color: #000;
  border: 4px solid #000;
  border-radius: 5px;
  transition: background-color 0.2s;
}