/* Kayla Perez, ITWP 1050, Homework 3 - based on my favorite characters from the game League of Legends */

/*ID that centers the validation text */
 #validation {
    text-align: center;
}

/* Centers the header content */
header {
    text-align:center;
}

/* Createss a gradient behind the first header text */
.gradient1 {
    background-image: linear-gradient(tan, orange,red);
    width: 20rem;
    height: 5rem;
    display: flex; 
    align-items: center; 
    justify-content: center; /* Centers content horizontally */
    color: rgb(255, 255, 255);
    font-weight: bold;
    border-radius: 0.5rem;

}
/* Creates a gradient behind the second header text */
.gradient2 {
    background-image: linear-gradient(tan,maroon,purple);
    width: 20rem;
    height: 5rem;
    display: flex; 
    align-items: center; /* Centers content vertically */
    justify-content: center; /* Centers content horizontally */
    color: rgb(255, 255, 255);
    font-weight: bold;
    border-radius: 0.5rem;
}

/* Sets header font to 'Underdog' */
@font-face {
    font-family: 'Underdog'; 
    font-style: normal;
    font-weight: 400; /*sets font weight to 400*/
    font-display: swap;
        src: url('https://fonts.googleapis.com/css2?family=Underdog&display=swap') format('woff2');
}


.underdog-regular {
    font-family: 'Underdog'; 
    font-weight: 400;
    font-style: normal;
    color: rgb(255, 255, 255);
  }

h1 {
    font-family: 'Underdog', Arial, sans-serif; /* Font stack: Underdog, Arial, sans-serif */
    font-weight: 400; /* Regular weight */
    font-style: normal; /* Normal style */
    font-variant: small-caps; /* Small caps */
    letter-spacing: 2px; /* Adds spacing between letters */
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.651); /* Adds text shadow for depth */
    white-space: nowrap;
}

 /* Sets the margins to 3px on the left and right */
p {
    margin: 3px;
    margin-bottom: 2rem;  /* Adds 1rem space below each paragraph */
    font-size: 20px;
    line-height: 1.5;
    }
 
/* Creates a border around each image */
img {
    border:1px solid rgb(0, 0, 0);
    border-radius:30px;
    display: block;
    margin: auto;
    width: 50%;
}

.footer_validation {
    padding: 20px; /* Adds 20px of padding on all sides */
    text-align: center; /* Centers the text */
    font-size: 11px; /* Sets font size to 11px */
}