/* set correct box model */
* {
    box-sizing: border-box;
}

/* flexbox container */
.holy-grail-flexbox {
    display: flex;
    flex-wrap: wrap;
}

/* columns (mobile) */
.holy-grail-flexbox > * {
    width: 100%;
    padding: 1rem;
}

/* background colors */
.holy-grail-flexbox > .header {
    background: #040420;
}
.holy-grail-flexbox > .main-content {
    background: #040420;
}
.holy-grail-flexbox > .left-sidebar {
    background: #515163;
}
.holy-grail-flexbox > .right-sidebar {
    background: #040420;
}
.holy-grail-flexbox > .footer {
    background: #040420;
}

/* tablet breakpoint */
@media (min-width: 768px) {
    .holy-grail-flexbox > .left-sidebar,
    .holy-grail-flexbox > .right-sidebar {
        width: 50%;
    }
}

/* desktop breakpoint */
@media (min-width: 1024px) {
    .holy-grail-flexbox > .header {
        order: -2; /* header first */
    }
    .holy-grail-flexbox > .left-sidebar {
        /* left sidebar second (first in second row) */
        order: -1;
    }
    .holy-grail-flexbox > .main-content {
        width: 50%;
    }
    .holy-grail-flexbox > .left-sidebar,
    .holy-grail-flexbox > .right-sidebar {
        width: 25%;
    }
}
html {
    padding: calc(8px + 1.5625vw);
    color: white;
    background-image: url("https://file.garden/aNEPg4Wwkwe5knVf/231839jm35be5swg.gif");
    font-family: sans-serif;
    text-align: center;
}
#statuscafe {
    padding: 0.5em;
    background-color: 040420;
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: 0.5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}