/* 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." */

h1 {
    font-size: 80px;
    text-align: center;
    border-color: black;
}
h3{
    text-align: center;
    color: white;
    
}

h4 {
    color: white;
    text-align: center;
    font-size: 30px;
}
p {
    text-align: center;
    
}



.rainbow-text {
    /* Same basic properties as static text */
    background: linear-gradient(to right, red, orange, yellow, lightgreen, lightblue, #d18cff, red); /* Add red at the end to create a seamless loop */
    background-size: 200% auto; /* Make the background wider than the container */
    font-weight: bold;
    text-align: center;

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* Apply the animation */
    animation: rainbow_animation 2s linear infinite;
}

/* Define the animation keyframes */
@keyframes rainbow_animation {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; } /* Move the background across the text */
}

img {
    width: 450px;
    display: block; /* Images are inline by default, must be block for margins to work */
  margin-left: auto;
  margin-right: auto
  
}

body {
        font-family: 'Comic Relief', sans-serif;
        background-image: url("background.jpg");
        
        }
        
p {
    color: white;
    

}
.side-gif {
    width: 110px;          /* make it smaller */
    position: static;    /* take it out of normal flow */
    top: 300px;             /* distance from top */
    left: 200px;           /* distance from right */
    
}
.backstory {
    color: lightblue;
}
.quote {
    font-size: 60px;
}
.story {
    font-size: 25px;
    text-align: center;
}

.tabler {
    margin: auto;
    color: white;
    height: 800px;
}

.pictures-text {
    color: white;
    text-align: center;
    font-size: 50px;
}
td, th {
  /* Ensure the text color is set to an opaque value */
  color: white; 
  /* Add padding for better readability */
  padding: 10px; 
  text-align: center;
}

table {
    background-color: darkgreen;
}

hr {
  border: 10px solid lightgreen;
  border-radius: 10px;
  
  
}