.ascii-art {
    display: grid;
    place-items: center;
    font-family: monospace;
    white-space: pre;
    color: white;
    font-size: .75vw;
}
.centering {
    display: grid;
    place-items: center;
}
#statuscafe {
    padding: .5em;
    background-color: #f9e4ec;
    border: 1px outset #f587af;
    border-radius: 8px;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}
@font-face {
   font-family: 'Cartridge';
    src: url('Cartridge.ttf');     
}
h1, h2, h3 {
    font-family: Cartridge;
    color: #f587af;  
}
badges {
float: right;
}
body {
    background-color: lightpink;
    background-image: url('https://i.postimg.cc/XXh0t8Q1/pinkfallingstars.gif');
    background-repeat: repeat;
    background-attachment: fixed;
   place-items: center;
    display: grid;
}

.container {
    display:grid;
    background-color: black;
    border: 5px black outset;
    border-radius: 9px;
    column-gap: 0.5rem;
    grid-template-areas:
        'header'
        'nav'
        'main'
        'sidebar'
        'footer';
    width: 74vw;
}


.header , .footer {
    background-color: black;
    background-image: linear-gradient(to bottom, black, grey);
}

.main, .sidebar {
    background-color: grey; 
    overflow-wrap: break-word;
    border-radius: 8px;
    margin: 5px;
    padding: 5px;   
    z-index: 0;
}

.container > .header {
    grid-area:header;
}

.container > .nav {
    grid-area: nav;
    background-color: gray;
    margin-bottom: 10px;
    place-items: center;
}

.nav ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

.nav ul li {
    float: left;
    text-decoration: none;
    place-items: center;
    padding-left: 15px;
}

.nav img:hover {
opacity: .5;
}

.container > .main {
    grid-area:main;
}
.container > .sidebar {
    grid-area:sidebar;
    height: max-content;
}
.container > .footer {
    grid-area: footer;
}

.main-content, .sidebar-content1, .sidebar-content2 {
    background-color: white;
    border-radius: 8px;
    border: 5px black outset;
    margin: 5px;
    padding: 5px;
    overflow-wrap: break-word;
    z-index: 1;   
    
}
.sidebar li {
list-style-image: url('https://i.postimg.cc/QCPsHTzL/triagle%20buttletpoint.gif');
}

@media (min-width:768px) {
    .container {
        grid-template-columns: 0.5fr repeat(2, 1fr);
        column-gap: 10px;
        grid-template-areas:
            'header header header'
            'nav nav nav'
            'sidebar main main'
            'footer footer footer';
    }
}