/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url('/background.jpg');
  background-repeat: repeat;
  background-size: 50%;
  color: black;
  font-family: Verdana;
}

.container {
  background-color: black;
  color: pink;
  padding: 20px;
  margin: 50px;
  width: 80%
  border: 5px solid grey;
  border-radius: 8px;
}

h1 {
  text-align: center;
  font-style: italic;
  font-weight: bold;
}

@keyframes blink {
    0% { opacity: 1; }   /* Fully visible */
    50% { opacity: 0; }  /* Invisible */
    100% { opacity: 1; }  /* Fully visible */
}

.blinking {
    animation: blink 1s infinite; /* Apply the blink animation */
    font-size: 2rem; /* Font size */
    color: pink; /* Text color */
    text-align: center; /* Center the text */
}
.wordart {
    font-size: 5rem; /* Large font size */
    font-weight: bold; /* Bold text */
    color: white; /* Text color */
    text-align: center; /* Center the text */
    text-shadow: 
        2px 2px 0 rgba(255, 0, 0, 0.7), /* Red shadow */
        4px 4px 0 rgba(0, 255, 0, 0.7), /* Green shadow */
        6px 6px 0 rgba(0, 0, 255, 0.7); /* Blue shadow */
    background: linear-gradient(45deg, #ff007f, #7f00ff); /* Gradient background */
    -webkit-background-clip: text; /* Clip background to text */
    -webkit-text-fill-color: transparent; /* Make text fill transparent */
    transform: rotate(-20deg); /* Slight rotation for effect */
}