body{
    min-height: 100dvh;
    min-width: 100%;
    padding: 0;
    margin: 0;
}

/*DESKTOP*/
@media only screen and (min-width: 1024px) {
    #main-container{
        grid-template-columns: 250px 1fr;
        grid-auto-flow: column;
    }
    #nav-container{
        height: 100vh;
        position: sticky;
        align-self: start;
        top: 0;
    }
    #nav-links{
        align-self: start;
        display: grid;
        padding: 15px;
    }
    #nav-links a{
        font-size: large;
    }
    #nav-links p{
        margin: 5px;
    }
    #nav-chat{
        border-top: 1px solid var(--border);
        align-self: end;
        height: 280px;
        bottom: 0;
    }
    #site-container{
        grid-template-areas:
                "site-1"
                "site-2"
                "site-3";
        grid-auto-flow: row;
        grid-auto-rows: auto 1fr auto;
        grid-auto-columns: 100%;
    }
    #header{
        align-self: start;
        height: 20px;
    }
    #main{
        min-height: 80vh;
        max-width: 600px;
        justify-self: center;
    }
    #statuscafe{
        display: grid;
        grid-template-columns: auto auto 1fr;
        grid-auto-flow: column;
        align-items: start;
    }
    #statuscafe-content{
        padding: 4px 10px;
    }
}
/*TABLET + MOBILE*/
@media only screen and (max-width: 1023px) {
    #main-container{
        grid-template-areas: "main-2" "main-1";
        grid-auto-flow: row;
    }
    #site-container{
        grid-template-areas:
                "site-2"
                "site-3"
                "site-1";
    }
    #nav-container{
        grid-area: main-1;
        grid-template-areas:
        "nav-2"
        "nav-1";
        grid-template-rows: auto 300px;
        text-align: center;
    }
    #nav-links{
        grid-area: nav-1;
        display: grid;
        padding: 10px;
        margin: 30px;
    }
    #nav-links a{
        font-size: larger;
    }
    #nav-chat{
        grid-area: nav-2;
        margin: 5px;
        height: 280px;
    }
    #site-container{
        grid-area: main-2;
    }
}

/* 📱 Mobile landscape / Large phones
@media (min-width: 480px) { ... }

/* ➔ Tablets (Portrait)
@media (min-width: 768px) { ... }

/* 💻 Laptops and small desktops
@media (min-width: 1024px) { ... }

/* 🖥️ Large desktop monitors
@media (min-width: 1200px) { ... }

/* 📺 Ultra-wide screens
@media (min-width: 1400px) { ... }*/

#main-container{
    display: grid;
    padding:0;
    margin: 0;
}

#nav-links a{
    text-decoration: none;
    font-weight: bold;
}


#header{
    grid-area: site-1;
}
#main{
    grid-area: site-2;
    padding: 10px;
    
}
#footer{
    grid-area: site-3;
    text-align: center;
}
#footer-content{
    margin: 20px;
    display: grid;
    grid-auto-flow: row;
}

#nav-container{
    display: grid;
}

#site-container{
    display: grid;
}

.embed{
    width: 95%;
    max-width: 600px;
}