/* Apply Inter font and basic styling */

.meddon-regular {
  font-family: "Meddon", cursive;
  font-weight: 400;
  font-style: normal;
}

.lisu-bosa-regular {
  font-family: "Lisu Bosa", serif;
  font-weight: 400;
  font-style: normal;
}

.lisu-bosa-regular-italic {
  font-family: "Lisu Bosa", serif;
  font-weight: 400;
  font-style: italic;
}

.cinzel-decorative-bold {
  font-family: "Cinzel Decorative", serif;
  font-weight: 400;
  font-style: normal;
}




/*--*******************************************************************--*/
.home-button {
  border: 2px solid transparent;
  position: fixed;
  width: 72px;
  height: 72px;
  background-image: url('back-button.png');
  background-size: auto;
  background-repeat: no-repeat;
  margin:0;
  bottom:25px;
  left: 50%;
  transform: translateX(550px);
  z-index: 100;
}

.home-button:hover {
  border: 2px solid transparent;
  position: fixed;
  width: 72px;
  height: 72px;
  background-image: url('back-button-hover.png');
  background-size: auto;
  background-repeat: no-repeat;
  margin:0;
  bottom:25px;
  left: 50%;
  transform: translateX(550px);
  z-index: 100;
}


.leaf {
  position: absolute;
  pointer-events: none; /* Allows mouse clicks to pass through leaves */
  background-size: contain;
  background-repeat: no-repeat;
  will-change: transform; /* Improves animation performance */
  backface-visibility: hidden; /* Prevents flickering */
  z-index: 1; /* Adjust based on where you want leaves to appear */
}


.leaf-container {
  top: -5px;
  width: 70vw;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto; /* centers the container */
  position: fixed;
  height: 100vh; /* or your preferred height */
  overflow: hidden; /* keeps leaves contained */
  pointer-events: none;
  z-index: 1;
  /* border: 1px dashed red; */
}



body {
    margin: 0 auto;
    min-height: 100vh; /* Ensure body takes full viewport height */

    width: 75vw;
    
    border: 150px solid transparent;
    border-image-source: url('page-border.png');
    border-image-slice: 300 fill;
    border-image-repeat: round;
    
    background-image: url("rain-f.gif");
  
    background-repeat: repeat;
    background-size: 1024px 512px;
    
    cursor: url('cursor-d.png'), auto;
     
}

.entry {
  position: relative;
  width: 40vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background-color: rgba(50, 50, 50, 0);
  padding: 20px;
  
  border: 70px solid #E2EACC;
  
  border-image-source: url('blog-border.png'); 
  border-image-slice: 90 fill;
  border-image-repeat: round;
  
}

h3 {
    
    font-family: "Cinzel Decorative", serif;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1rem;
    margin-top: 1rem;
    line-height: 1;
    color: #E2EACC;
    text-align: left;
    text-shadow: 0 3px 5px black;
    z-index: 10;
    
}
  



.rain{
    
    position: fixed; 
    background-image: url('rain-d.gif');
    background-repeat: repeat-x;
    background-size: 512px auto;
    background-position: top;
    width: 100vw;
    margin: 0;
    padding: 0;
    min-height: 128px; 
    top: 0;
    left: 0;

}

body.rain {
  display: block;
}



h2 {
    font-family: "Cinzel Decorative", serif;
    font-size: 3rem;
    font-weight: 400;
    margin-bottom: 4rem;
    margin-top: 4rem;
    line-height: 0;
    color: #E2EACC;
    text-align: center;
    text-shadow: 0 3px 5px black;
    z-index: 10;

}



p {
    font-family: "Lisu Bosa", serif;
    font-weight: 100;
    font-style: normal;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #E2EACC;
    margin: 0;
    text-align: left;

}


        
.inline-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inline-div:nth-child(2) h2:first-child {
  padding-left: 110px; /* Adjust this value to get the spacing you need */
}
    
  








/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .grid-container {
        /* On smaller screens, stack the panels vertically */
        grid-template-columns: 1fr; /* Single column layout */
        width: 95%; /* Take up more width on smaller screens */
        margin: 1rem auto; /* Less margin */
    }

    .left-panel, .right-panel {
        /* Remove borders when stacked */
        border: none;
    }

    /* Reorder content for mobile: Left Panel -> Main Content -> Right Panel */
    .left-panel {
        order: 1;
    }
    .main-content {
        order: 2;
    }
    .right-panel {
        order: 3;
    }
}