@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

.vt323-regular {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
}

html {
    overflow: hidden;
}

body {
    background: #e5e5f7;
}

@media (prefers-color-scheme: dark) {
    body {
        background: #1a1a2e;
        color: #e5e5f7;
    }
}

body {
    cursor: default;
    display: flex;
    flex-direction: column; 
    align-items: center;
    /* Remove padding to make gallery fill the viewport */
    overflow: hidden; /* Controlled by #iframeGallery */
    margin: 0;
    height: 100vh;
    position: relative;
    box-sizing: border-box; /* Include padding in height calculation */
}

/* Styles for the main gallery container */
#iframeGallery {
    display: block; /* Stack iframes vertically */
    /* Remove gap, padding, background, and shadow for seamless look */
    gap: 0;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow-y: auto; /* Enable vertical scrolling */
    width: 100%;
    height: 100%; /* Take full height of the body */
    box-sizing: border-box;
}

/* Styles for each individual iframe card (now acting as a container for each full-width iframe) */
.iframe-card {
    background-color: transparent; /* No background for cards */
    border-radius: 0; /* No rounded corners */
    box-shadow: none; /* No shadow */
    overflow: hidden; /* Keep overflow hidden to prevent internal scrollbars if iframe content is larger than its set height */
    transition: none; /* No transitions/hover effects */
    display: block; /* Ensure it takes full width and stacks */
    padding: 0; /* No padding inside the card */
    box-sizing: border-box;

    width: 100%; /* Take full width of the gallery container */
    /* Each iframe card will take 100% of the viewport height */
    height: 100vh; 
    margin-bottom: 0; /* Ensure no vertical gaps between cards */
}

/* Remove hover effects as they no longer fit the seamless design */
.iframe-card:hover {
    transform: none;
    box-shadow: none;
}

/* Styles for the iframe itself */
.iframe-card iframe {
    width: 100%;
    height: 100%; /* Fill the height of its parent card (100vh) */
    border: none; /* No borders */
    border-radius: 0; /* No rounded corners */
    background-color: #f0f0f0; /* Placeholder background, can be transparent if preferred */
    display: block;
}

/* Dark mode adjustment for iframe background */
@media (prefers-color-scheme: dark) {
    .iframe-card iframe {
        background-color: #3b3b52;
    }
}

/* Styles for the title above each iframe - now hidden */
.iframe-card .iframe-title {
    display: none; /* Completely hide the title */
}

/* Loading message style */
.loading-message {
    font-size: 1.5rem;
    color: #666;
    text-align: center;
    margin-top: 50px;
    font-family: 'VT323', monospace;
}

@media (prefers-color-scheme: dark) {
    .loading-message {
        color: #bbb;
    }
}

/* Responsive adjustments for smaller screens - simplified as most elements are now 100% width */
@media (max-width: 768px) {
    body {
        padding: 0; /* Ensure no padding on body */
    }

    #iframeGallery {
        padding: 0; /* Ensure no padding on gallery */
    }

    .iframe-card {
        height: 100vh; /* Maintain full viewport height on mobile */
        padding: 0; /* No padding */
    }
}

@media (max-width: 480px) {
    .iframe-card {
        height: 100vh; /* Maintain full viewport height on very small screens */
    }
}