/* Ensure the body and html take up the full height and have no margin or padding */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Make the canvas fill the entire screen */
canvas {
    display: block; /* Removes the scrollbar */
    width: 100vw;
    height: 100vh;
    image-rendering: pixelated;
}


.container {
    position: absolute;
    width: 24%;
    height: 16%;
    top: 42%;
    left: 38%;
    pointer-events: none; /* Prevent default interaction with the panel */
    transition: height 1s ease, top 1s ease, width 1s ease, left 1s ease; /* Transition for height change */
}

.overlay-panel {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    border: 6px solid white; /* Black border */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* Prevent default interaction with the panel */
    transition: transform 0.3s ease-in-out; /* Smooth transition for transform and background color */
}

.overlay-panel:hover{
    transform: scale(1.1); /* Scale up the button */
}
.overlay-panel.no-hover:hover {
    transform: none;
    pointer-events: none; /* Disable pointer events */
}

#enter-button {
    pointer-events: auto; /* Allow interaction with the button */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent; /* Transparent background */
    color: white; /* Black text */
    border: 0px solid white; /* Black border */
    padding: 15px 30px; /* Increased button padding */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 32px; /* Larger font size */
    font-weight: bold; /* Thicker, bold text */
    font-family: 'Press Start 2P', cursive; /* Pixel art font */
    border-radius: 0; /* Sharp corners */
    transition: transform 0.3s ease-in-out, opacity 1s ease; /* Smooth transition for transform and background color */
}

#enter-button:hover {
    /*animation: wiggle 0.5s ease;*/
    transform: translate(-50%, -50%) scale(1.1); /* Scale up the button */
}


.main-section {
    top: -2%;
    left: 5%;
    width:90%;
    height: 102%;
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease; /* Transition for opacity change */
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
}

.main-section::-webkit-scrollbar {
    display: none; /* Hide scrollbar for WebKit browsers */
}

/* Hide scrollbar for Firefox */
.main-section {
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.column-container {
    display:grid;
    grid-template-columns: 3fr 2fr;
    align-items: start; /* Align items to the start */
}

.text-column, .screenshot-column {
    padding: 20px;
}

.screenshot-column img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px; /* Optional: Add some space between screenshots */
}

#main-section h1 {
    color: white;
    text-align: center;
    font-weight: bold; /* Thicker, bold text */
    font-size: 36px; /* Larger font size */
    margin-top: 4%;
    margin-bottom: 4%;
    font-family: 'Press Start 2P', cursive; /* Pixel art font */
}

.column-container h2 {
    color: white;
    text-align: left;
    font-weight: bold; /* Thicker, bold text */
    font-size: 24px; /* Larger font size */
    font-family: 'Press Start 2P', cursive; /* Pixel art font */
}

#image-banner {
    margin-top: 5%; 
    width: 100%;
}

.column-container p {
    color: white;
    text-align: left;
    font-size: 16px;
    margin-bottom: 4%;
    font-family: 'Roboto', sans-serif;
}

.main-section.active {
    opacity: 1; /* Fade in the main section */
}

.hidden {
    opacity: 0; /* Fade out the element */
    pointer-events: none;
}

@keyframes wiggle {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
    25% { transform: translate(-50%, -50%) rotate(5deg); }
    50% { transform: translate(-50%, -50%) rotate(-5deg); }
    75% { transform: translate(-50%, -50%) rotate(5deg); }
}