:root{

  --maincolor: #E3E8EA; /*then use var(--brown)*/
}
 
 body {
   background-color: var(--maincolor);
   overflow-x: hidden;
   font-family: "Alan Sans";
  }
  img {
    border-radius:15px;
    border-color: yellow;
    border:10px}

  .containerGallery {
    display: grid;
    grid-template-columns: 20% 39% 39%;
    gap:1%;
    padding: 0px;
    margin-right: 1%;}
  
  .containerGallery div {
     padding: 0px;}
  
  .containerGallery img {
      width:100%;
      margin-bottom: 2%;}
    

  .containerAbout {
    display: grid;
    grid-template-columns: 20% 80%;
    gap:1%;
    padding: 0px;
    margin-right: 1%;}
  
  .containerAbout div {
     padding: 0px;}
  
  .containerAbout img {
      width:100%;
      margin-bottom: 2%;}
      
  .container2 {
    display: grid;
    grid-template-columns: 25% 50% 10% 15%;
    padding: 0px;
    height: 30%;}

  .container2 div {
    padding: 10px;}
    
  .container3 {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 0px;
    text-align: center;
    margin-top:1%;}

  .container3 div {
    padding: 0px;}
  
  .container3 img {
      margin-bottom: 2%;}

     
/* HOVER TEXT TESTING */
  .image-container {
    position: relative; /* Sets context for absolute positioning */
    width: 100%; /* Adjust to your image size */
    height: 48.2%; /* Adjust to your image size */
    overflow: hidden; /* Hides text outside the container */
    margin:auto;
    }
      
      .image-container img {
        width: 100%;
        height: 100%;
        display: block;
      }
  .overlay-text {
    position: absolute;
    top:0;
    left:0;
     width: 97%;
     height: 100%;
     color: black;
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0; /* Hidden by default */
     transition: opacity 0.3s ease; /* Smooth fade */
     border-radius: 15px;
     font-size: xx-large;
     font-weight: 700;
      }
      
      .image-container:hover .overlay-text {
        opacity: .80; /* Shows text on hover */
        background-color:#FFFFFF;
      }
    
/* HOVER TEXT END */
  .container4 {
    display: grid;
    grid-template-columns: 1% 25% 23% 23% 23% 1%;
    padding: 0px;}

  .container4 div {
    padding: 0px;}

  button {
    background-color: white;
    border-radius: 5px;
    height: 45px;
    width:100%;
    border-color: white;
    margin-bottom: 5px;}
  
  button:hover {
    background-color: black;
    color: white;
    transition: .5s ;}
  
  .caption {
    position: relative;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -500%);
    font-size: xx-large;
    opacity: 50%;
    line-height: 50%;}

  .alan-sans {
    font-family: "Alan Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;}


.click-zoom input[type=checkbox] {
  display: none
}

.click-zoom img {
  transition: transform 0.5s ease;
  cursor: zoom-in
}

.click-zoom input[type=checkbox]:checked~img {
  width:70vw;
  justify-content: center;
  cursor: zoom-out
}

.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, rgb(237, 211, 46) 50%, var(--maincolor) 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}