/* Responsive layout and zoom styles extracted from layout.ejs */

/* Auto-scale content for smaller viewports */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
}

@media (max-width: 2560px) and (min-width: 1920px) {
    body {
        zoom: 0.9 !important;
    }
    .container {
        min-height: 111.11vh; /* 100vh / 0.9 to compensate for zoom */
    }
}

@media (max-width: 1919px) and (min-width: 1700px) {
    body {
        zoom: 0.88 !important;
    }
    .container {
        min-height: 113.64vh; /* 100vh / 0.88 to compensate for zoom */
    }
}

@media (max-width: 1699px) and (min-width: 1366px) {
    body {
        zoom: 0.85 !important;
    }
    .container {
        min-height: 117.65vh; /* 100vh / 0.85 to compensate for zoom */
    }
}

@media (max-width: 1365px) {
    body {
        zoom: 0.8 !important;
    }
    .container {
        min-height: 125vh; /* 100vh / 0.8 to compensate for zoom */
    }
}

/* Default for larger screens */
@media (min-width: 2561px) {
    .container {
        min-height: 100vh;
    }
}