/* Styles for Block Y */
#block-y {
    position: absolute;
    top: -625px;
    left: -2px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Transparent background */
    border: 2px solid black; /* Black border */
    border-radius: 10px; /* Rounded edges */
    display: none; /* Initially hidden */
    z-index: 1; /* Ensure it appears on top */
    -webkit-backdrop-filter: blur(20px); /* Strong blur effect */
    backdrop-filter: blur(20px); /* Strong blur effect */
    overflow-y: hidden; /* Hide vertical overflow by default */
    position: relative; /* Ensure proper positioning */
}

#block-y:hover {
    overflow-y: auto; /* Enable vertical scrolling on hover */
}

#block-y::-webkit-scrollbar {
    width: 2px; /* Set vertical scrollbar width to 2px */
}

#block-y::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Light grey scrollbar thumb */
    border-radius: 4px; /* Rounded edges */
}

#block-y::-webkit-scrollbar-thumb:hover {
    background-color: #888; /* Darker grey on hover */
}

#block-y::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

/* Styles for Block Z */
#block-z {
    position: absolute;
    top: -627px;
    left: 474px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Transparent background */
    border: 2px solid black; /* Black border */
    border-radius: 10px; /* Rounded edges */
    display: none; /* Initially hidden */
    z-index: 5; /* Ensure it appears on top */
    -webkit-backdrop-filter: blur(20px); /* Strong blur effect */
    backdrop-filter: blur(20px); /* Strong blur effect */
    overflow-y: hidden; /* Hide vertical overflow by default */
    position: relative; /* Ensure proper positioning */
    justify-content: center;
    text-align: center;
    pointer-events: auto !important;
}

#block-z:hover {
    overflow-y: auto; /* Enable vertical scrolling on hover */
}

#block-z::-webkit-scrollbar {
    width: 2px; /* Set vertical scrollbar width to 2px */
}

#block-z::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Light grey scrollbar thumb */
    border-radius: 4px; /* Rounded edges */
}

#block-z::-webkit-scrollbar-thumb:hover {
    background-color: #888; /* Darker grey on hover */
}

#block-z::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

/* Make block-red class strong enough to override */
.block-red {
  background-color: rgb(250, 220, 220) !important;
}