/* styles.css Kayla Perez. ITWP 1050; This project is based off of another one of my favorite characters, who has some of my favorite skins */

/* This changes the color of the page to a very light blue */
:root {
    --pageColor: #aed8ff; 
    --link-color: rgb(255, 0, 179);

  }

  /* Sets the font for the header text */
  @font-face {
    font-family: 'headerfont';
    src: url('./webfonts/Bonbon/Bonbon-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  /* Sets the font for the body text */
  @font-face {
    font-family: 'bodyfont';
    src: url('./webfonts/Signika/static/Signika-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  /* Sets font to bodyfont and adds margins, along with a background image*/
body{
    font-family: 'bodyfont', Arial, Helvetica, sans-serif;
    margin: 3rem;
    padding: 0;
    box-sizing: border-box;
    background: url(./images/background.jpg) no-repeat center center fixed;
    background-size: cover;
  }

  /* Sets the header font and adds a text shadow*/
h1{
    font-family: 'headerfont', Arial, Helvetica, sans-serif;
    text-shadow: 2px 2px 4px rgb(9, 34, 255);
    text-align: center;
  }

a:first-child {
    text-decoration: underline;
    color: var(--link-color);
  }

a:link {
    text-decoration: underline;
    color: var(--link-color);
    font-weight: bold;
}

a:visited {
    text-decoration: underline;
    color: violet;
}

a:hover {
    text-decoration: none;
    color: teal;
    font-weight: bold;
}

a:active {
    text-decoration: underline wavy;
    text-decoration-color: rgb(7, 0, 104);
    font-weight: bold;
}

.responsive-text {
    font-size: 3rem;
    line-height: 1.5;
    color: black;
}

p.responsive-text {
    font-size: 1rem;
    line-height: 1.5;
    color: black;
    text-align: justify;
}

.image-text {
    font-size: 1rem;
    text-align: center;
    margin-top: 20px;
    font-family: 'bodyfont', Arial, Helvetica, sans-serif; 
  }

  @media (max-width: 600px) {
    .responsive-text {
      font-size: 1.5rem;
    }
  }

  /* Grid layout */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  /* Grid columns and adds padding and a gap*/
.gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 20px;
    padding: 10px;
}

/* changes the transition of the image in the gallery*/
.gallery img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 2px 4px 8px 10px rgba(0, 4, 255, 0.1);
    transition: transform 0.4s ease-in-out;
}

/* Scales the image when hovered*/
.gallery img:hover {
    transform: scale(1.3);
}

  /* Footer element, sets the font to body font and centers the text*/
footer {
    font-family: 'bodyfont', Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 0.75rem; /*Changes the font size */
    margin: 50px 0; /* Sets the top and bottom margins to 50px */
  }