1159cl/css/home-layout.css

body {
    font-size: 12px;
    display: grid;
    grid-template-areas:
    "header header"
    "content calendar"
    "content clock"
    "content nav"
    "content status"
    "content radio"
    "netverse netverse"
    "footer footer";
    grid-template-columns: minmax(15em, 35em) minmax(10em, 15em);
    margin: 1em 5em;
    column-gap: 1em;
    row-gap: 1em;
    grid-template-rows: auto;
    justify-content: center;
}

header {
    grid-area: header;
    text-align: center;
}

header #title {
    display: flex;
    align-items: center;
}

header h1 {
    flex-grow: 1;
}

header label {
    flex-grow: 0;
}

content {
    grid-area: content;
}

#projects ul {
    padding: 0;
}

#calendar {
    grid-area: calendar;
}

#clock {
    grid-area: clock;
}

#nav {
    grid-area: nav;
}

nav ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
}

#status {
    grid-area: status;
}

#radio {
    grid-area: radio;
}

#netverse {
    grid-area: netverse;
}

footer {
    grid-area: footer;
    text-align: center;
}

@media (max-width: 768px) {
    body {
        font-size: 10px;
        grid-template-areas:
        "header"
        "content"
        "calendar"
        "nav"
        "status"
        "radio"
        "netverse"
        "footer";
        grid-template-columns: minmax(15em, 35em);
        margin: 1em 2em;
        column-gap: 0.5em;
        row-gap: 1em;
    }
    #calendar { display: none; }
    #status { display: none; }
    #radio { display: none; }

    nav ul {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    nav li {
        padding: 0 .2em;
    }
}