@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

/* Base Layout and Structure */
html, body {
    height: 100%;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--wuufy-background);
}

main {
    flex: 1;
}

/* Main content area */
main.container {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 2.7rem 2rem 2rem 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 1rem auto;
    max-width: 600px;
    width: 90%;
}

/* Make navbar container match main container width */
@media (max-width: 991.98px) {
    header .container {
        max-width: 600px;
        width: 90%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.alert {
    border-radius: 6px;
    margin-bottom: 1rem;
}