/* 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." */
   
   /* FONTS */
   
.crafty-girls-regular {
  font-family: "Crafty Girls", cursive;
  font-weight: 400;
  font-style: normal;
}

.livvic-thin {
  font-family: "Livvic", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.livvic-extralight {
  font-family: "Livvic", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.livvic-light {
  font-family: "Livvic", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.livvic-regular {
  font-family: "Livvic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.livvic-medium {
  font-family: "Livvic", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.livvic-semibold {
  font-family: "Livvic", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.livvic-bold {
  font-family: "Livvic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.livvic-black {
  font-family: "Livvic", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.livvic-thin-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.livvic-extralight-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.livvic-light-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.livvic-regular-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.livvic-medium-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.livvic-semibold-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.livvic-bold-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.livvic-black-italic {
  font-family: "Livvic", sans-serif;
  font-weight: 900;
  font-style: italic;
}



body {
  
  background-color: white;
  color: black;
  font-family: 'Livvic','helvetica';
  font-size: 12px;
  text-align: center;
}

h1 {
  display: inline-block;
  margin: 1.5em 10% .25em 10%;
  padding: .25em .5em .5em .5em;
  color: #692e3e;
  font-family: "Crafty Girls", cursive;
  font-size: 3em;
  letter-spacing: .025em;
  line-height: 1em;    
}

p {
  display: inline-block;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: .5em;
}

form {
    display: inline-block;
    text-align: center;
}

/* note to self: make styles/padding (like width of screen and whatever) for other content */

a {
  color: #0fa899; 
}

  a:visited {
  color: #045970;
}





/* Gallery Grid Layout */
.gallery-container {
    display: grid;
    /* Automatically creates columns that are at least 250px wide */
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 20px; /* Space between the items */
    max-width: 500px;
    margin: 0 auto;
}

/* Gallery Item Box */
.gallery-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out;
}

/* Image Scaling */
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Prevents stretching by cropping nicely */
    display: block;
}

/* Caption Styling */
.gallery-item figcaption {
  font-family: 'Livvic','helvetica';
  font-size: 12px;
    padding: 15px;
    text-align: center;
    color: #333;
    font-weight: 500;
}