:root {
    --index-background: #f0f0f0;
    --database-background: #ff218c;
    --game-background: #ffd800;
    --about_me-background: #21b1ff;

}

/* Page-specific background colors */
body.index {
    background-color: var(--index-background);
}
body.database {
    background-color: var(--database-background);
}
body.game {
    background-color: var(--game-background);
}
body.about_me {
  background-color: var(--about_me-background);
}

/* General styles for all buttons and menu */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    font-size: 0.8rem; /* Optional styling */
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    }
  
  /* The container for the buttons */
  .button-container {
    display: flex;
    gap: 30px; /* Gap between buttons */
    position: absolute; /* To position the button container */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1; /* Set buttons' z-index to make them not on the top */
  }
  
  /* Button style for all buttons */
  .circle-button {
    width: 40px; /* Button width */
    height: 40px; /* Button height */
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.9); /* Black with 80% opacity */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  /* Button hover effect */
  .circle-button:hover {
    background-color: rgba(0, 0, 0, 0.7); /* Black with 60% opacity on hover */
  }
  
  /* Iframe wrapper with specified distances */
  .iframe-wrapper {
    position: absolute;
    top: 120px; /* 120px padding from top */
    left: 40px; /* 40px padding from left */
    right: 40px; /* 40px padding from right */
    bottom: 40px; /* 40px padding from bottom */
    width: calc(100% - 80px); /* Adjust for 40px padding on left and right */
    min-height: 600px; /* Minimum height of iframe */
    max-width: 600px; /* Maximum width of iframe */
    max-height: 600px; /* Maximum height of iframe */
    margin: 0 auto; /* Center the iframe */
    z-index: 0; /* Set buttons' z-index to make them not on the bottom */
    opacity: 1; /* Initially set opacity to 0 for fade-in effect */
    transition: none /*opacity 1s ease-in; /* Add transition for fade-in */
  }

  /* Add class to control the visibility when the iframe is fading out */
.iframe-wrapper.fade-out {
  opacity: 0; /* Fade out the iframe */
}

/* Full size iframe inside wrapper */
.iframe-wrapper iframe {
  background-color: transparent;
  width: 100%;
  height: 100%;
  border: none;
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.2);
}

/* Add bottom border when iframe reaches min height of 600px */
.iframe-wrapper.min-height-reached {
  border-bottom: 60px solid #000; /* Add a 60px solid black border at the bottom */
}
  
  iframe {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }

/* Specific page styles */
  body.index {
    background-color: #f0f0f0; 
  }
  body.database {
    background-color: #ff218c; 
    color: black; /* Or any color you prefer */
    font-size: 1.2rem; /* Optional styling */
  }
  body.game {
    background-color: #ffd800; 
  }
  body.about_me {
    background-color: #21b1ff; 
  }

  body.test {
    background-color: transparent; 
  }

  /* Specific page styles (optional if different pages need different positioning) */
  body.index .button-container {
    top: 45%; /* Index page button container */
  }
  
  body.database .button-container,
  body.game .button-container,
  body.about_me .button-container {
    top: 40px; /* Menu2 and Menu3 button container */
  }