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

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

/*
Source - https://stackoverflow.com/a/77985588
Posted by Gerard Reches, modified by community. See post 'Timeline' for change history
Retrieved 2026-05-18, License - CC BY-SA 4.0
*/

/* Core functionality */
#animated-text-strip{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  overflow: hidden;
}
#animated-text-strip .marquee {
  white-space: nowrap;
  animation: marquee 5s linear infinite;
  max-width: none;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

/* Styles for the sake of the demonstration */
#animated-text-strip{
  background:black;
  padding: 1rem 0;
}
.marquee{
  font-family: 'Open Sans', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  color: white;
}
@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*
Source - https://stackoverflow.com/a/48030340
Posted by Caner, modified by community. See post 'Timeline' for change history
Retrieved 2026-05-18, License - CC BY-SA 4.0
*/

.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

.imghover {
   background-repeat:no-repeat;
   background-size:contain;
   height:200px;width:230px;
   background-image: url("/MOUTHCLOSED.webp");
}

.imghover:hover {
   background-repeat:no-repeat;
   background-size:contain;
   height:200px;width:230px;
   background-image: url("/MOUTHOPEN.webp");
}


.imginstahover {
   background-repeat:no-repeat;
   background-size:contain;
   height:200px;width:230px;
   background-image: url("/MOUTHCLOSED.webp");
}

.imginstahover:hover {
   background-repeat:no-repeat;
   background-size:contain;
   height:200px;width:230px;
   background-image: url("/MOUTHINSTA.webp");
}

.imgabouthover {
   background-repeat:no-repeat;
   background-size:contain;
   height:200px;width:230px;
   background-image: url("/MOUTHCLOSED.webp");
}

.imgabouthover:hover {
   background-repeat:no-repeat;
   background-size:contain;
   height:200px;width:230px;
   background-image: url("/MOUTHABOUT.webp");
}






#masonary-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 280px);
  grid-auto-rows: 10px;
}

.container{
  max-width: 1224px;
  width: 90%;
  margin: auto;
  padding: 40px 0;
}

.photo-gallery{
  display: flex;
  gap: 20px;
}

.column{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.photo img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}




/* Button to open the modal */
.open-modal-btn {
  padding: 12px 24px; /* Padding for button sizing */
  background-color: #74ebd5; /* Background color matching the gradient */
  border: none;
  border-radius: 5px; /* Rounded corners for a modern look */
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s; /* Smooth background transition on hover */
}

/* Hover effect for button */
.open-modal-btn:hover {
  background-color: #acb6e5; /* Change background on hover */
}

/* Modal styling */
.modal {
  display: none; /* Modal is hidden by default */
  position: fixed; /* Stays in place when scrolling */
  z-index: 1; /* Ensures modal appears above other content */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background to focus attention on the modal */
  justify-content: center; /* Center modal horizontally */
  align-items: center; /* Center modal vertically */
}

/* Modal content box */
.modal-content {
  background-color: #fff; /* White background for the content */
  padding: 30px; /* Padding for spacing */
  border-radius: 10px; /* Rounded corners for modern look */
  text-align: center; /* Centered text inside the modal */
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.3); /* Box shadow for depth */
  max-width: 400px;
  width: 100%; /* Responsive width */
  animation: fadeIn 0.5s ease; /* Fade-in animation when modal appears */
}

/* Close button styling */
.close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  cursor: pointer;
}

/* Email input styling */
.email-input {
  padding: 10px;
  width: 80%; /* Set width relative to the modal content */
  margin: 15px 0;
  border-radius: 5px; /* Rounded input fields */
  border: 1px solid #ddd; /* Subtle border */
  font-size: 16px;
}

/* Submit button styling */
.submit-btn {
  padding: 10px 20px;
  background-color: #74ebd5;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn:hover {
  background-color: #acb6e5; /* Background color change on hover */
}

/* Close button for inside modal */
.close-modal-btn {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #ddd;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.close-modal-btn:hover {
  background-color: #bbb; /* Hover effect for close button */
}

/* Fade-in animation for the modal */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}