/* Apply Inter font and basic styling */

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

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

.fondamento-regular-italic {
  font-family: "Fondamento", cursive;
  font-weight: 400;
  font-style: italic;
}

.milonga-regular {
  font-family: "Milonga", serif;
  font-weight: 400;
  font-style: normal;
}

/*--*******************************************************************--*/
.sign-container {
  position: relative; /* This is the parent container. It establishes the positioning context for its child elements. */
  width: fit-content; /* This makes the container's width fit the image, which is good practice. */
  margin: 0 auto; /* Optional: Centers the container on the page */
}

.sign-container img {
  display: block; /* Removes any extra space below the image */
  width: 100%; /* Makes sure the image fills the container */
  height: auto; /* Maintains the aspect ratio */
  transform-origin: center center; /* Sets the center as the point of origin for the transformation */
  transform: scale(1.3); 
}

.button-1 {
  border: 16px solid transparent;
  padding: 0;
  font-family: "Meddon", cursive;
  font-size: 1.2rem;
  flex-grow: 1;
  color: #E2EACC;
  cursor: pointer;
  
  
  border-image-source: url('button-border-2-96px.png');
  border-image-slice: 24 fill;
  border-image-repeat: round;
  background-color: transparent;
  
}

.button-1:hover {
  border: 16px solid transparent;
  border-image-source: url('button-border-2-hover-96px.png');
  border-image-slice: 24 fill;
  border-image-repeat: round;
  background-color: transparent;
} 

.button-group {
      display: flex; /* Make it a flex container */
      flex-wrap: wrap; /* Allow buttons to wrap to the next line if needed */
      justify-content: center; /* Center buttons horizontally within the group */
      gap: 0.1rem; /* Space between individual buttons */
      margin-top: auto; /* Pushes the entire button group to the bottom of the flex container (.left-panel) */
      width: 100%; /* Ensure the button group takes full width to center effectively */
}

body {
    font-family: "Inter", sans-serif;
    margin: 0;
    min-height: 100vh; /* Ensure body takes full viewport height */
    display: flex; /* Use flex to center the grid container vertically if needed */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    background-image: url("pattern-04-128px.png");
    background-repeat: repeat;
    background-size: 128px 128px;
}

.grid-container {
    display: grid;
    background-color: transparent;
    
    grid-template-areas:
    "menu side"
    "main side"
    "footer footer";
   
    grid-template-columns: 2fr 1fr;
   
    width: 90%;
    max-width: 1200px;
    overflow: hidden;
    gap: 24px;
    
}

.grid-item {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main-menu {
    
    grid-area: menu;
    align-items: stretch;
    border-style: solid;
    border-color: transparent;
    border-image-source: url('border-round.png');
    border-image-slice: 64 fill;
    border-image-width: 24px 24px 24px 24px;
    border-image-repeat: round;
}

.main-content {
    min-height: 400px;
    
    border-style: solid;
    border-color: transparent;
    border-image-source: url('border-round.png');
    border-image-slice: 64 fill;
    border-image-width: 24px 24px 24px 24px;
    border-image-repeat: round;

}

.right-panel {
  
    grid-area: side;

    border-style: solid;
    border-color: transparent;
    border-image-source: url('border-round.png');
    border-image-slice: 64 fill;
    border-image-width: 24px 24px 24px 24px;
    padding-right: 64px;
    border-image-repeat: round;
   
}

h2 {
    font-family: "Meddon", cursive;
    font-size: 3rem;
    font-weight: 400;
    margin-bottom: 1rem;
    line-height: 1.25;
    color: #E2EACC;
    display: inline-block;
    text-align: center;
    text-shadow: 1px 1px 2px pink;
}

.sign-text {
    position: absolute;
    top: 50%; /* Position from the top */
    left: 50%; /* Position from the left */
    transform: translate(-50%, -50%); /* Centers the text perfectly */
    z-index: 1; 
}

.sign-text h2 {
  padding: 0;
  line-height: 1.2; /* Adjust as needed */
  font-size: 2.3rem; /* Or whatever size you prefer */
  margin: 0;
}

p {
    font-family: "Milonga", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.3rem;
    line-height: 1.25;
    color: #E2EACC;
    padding-left: 24px;
    text-align: left;
}

.floating-element {
      position: absolute; /* Positioned relative to its nearest positioned ancestor (.main-content) */
      top: 0; /* 20px from the top of .main-content */
      right: 0; /* 20px from the right of .main-content */
      background-image: url("daisy.png");
      background-repeat: no-repeat;
      background-size: 128px 128px;
      border: solid transparent;
      padding: 0;
      z-index: 10; /* Ensures it appears above other content */
}
        
.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;
    }
}