/*
Theme Name:   Twenty Twenty-Five Child
Template:     twentytwentyfive
Description:  A custom child theme
Author:       Andrew Stratton
Version:      1.0.1
*/
/* Your custom CSS starts after this line */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@490&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


/* gets rid of space between header and title */
main {
    margin-top: 0 !important;
}

/*
.wp-block-image img {
    border: 1px solid black !important;
}

.painting-shadow {
     box-shadow: 7px 7px 4px rgba(0, 0, 0, 0.4); 
}
*/

/* 
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];
*/

.main-title-style {
    font-family: "Caveat", cursive;
  font-weight: 500;
  font-style: normal;
  /* animation: fade-in-title 2.5s ease-in; */
}

.main-text-style {
    font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  /* animation: fade-in-text 5.5s ease-in; */
  margin-top: 8px;
}

/*
.fade-in-image-1 {
    animation:  fade-in-text 3s ease-in, press-animation 16s 1s infinite ease-in-out; 
}

.fade-in-image-2 {
    animation: fade-in-text 3.4s ease-in, press-animation 16s 7s infinite ease-in-out;
}


.fade-in-image-3 {
    animation:  fade-in-text 3.8s ease-in, press-animation 16s 10s infinite ease-in-out;
}


.fade-in-image-4 {
    animation: fade-in-text 4.2s ease-in, press-animation 16s 4s infinite ease-in-out;
}

.fade-in-image-5 {
    animation: fade-in-text 4.8s ease-in, press-animation 16s 13s infinite ease-in-out;
}
*/

@keyframes fade-in-title {
    0% {
    opacity: 0; /* Start completely transparent */
  }
  10% {
    opacity: 0; /* pause before starting */
  }
  100% {
    opacity: 1; /* End fully opaque */
  }
}

@keyframes fade-in-text {
    0% {
    opacity: 0; /* Start completely transparent */
  }
  70% {
    opacity: 0; /* pause before starting */
  }
  100% {
    opacity: 1; /* End fully opaque */
  }
}


@keyframes press-animation {
  0% {
    transform: scale(1);
  }
  20% {
      transform: scale(1);
       box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.4); 
  }
  25% {
      transform: scale(0.97);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); /* No shadow */
  }
  30% {
      transform: scale(1);
       box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.4); 
  }
  100% {
      transform: scale(1);
  }
}












/* breathing pictures animation */
.grow-shrink {
    animation: grow-shrink 8s infinite normal; /* Loops forever */
}


@keyframes grow-shrink {
  20% {
    transform: scale(1); /* Original size */
  }
  40% {
    transform: scale(1.03); /* Grows to a bit */
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
  }
  60% {
    transform: scale(1); /* Shrinks back to original size */
  }
}