body {
    background-image: linear-gradient(#00000080, #00000080), url("https://file.garden/ZnnMpjCCUQ_QbjHz/neocities/ocs/nigel%20-%20pfps/backgrounds/repeatingbggreen.png");
    background-repeat: repeat;
}

header, nav, main, aside, footer {
   /* box, border, drop shadow, etc */
    border: 2px white solid;
    box-shadow: 0 0 5px 2px black, inset 0 0 0 2px black;
    
    
    border-radius: 10px;
    background: linear-gradient(white, #90a955, #4f772d);
    
   /* text */
    text-align: center;
    font-family: cursive;
}

#box {
        max-width: 1000px;
        margin: 50px auto;
        display:grid;
        grid-gap: 10px;
        grid-template-columns: 200px 550px minmax(0, 1fr);
        padding: 20px;
    
        border: 3px black solid;
        border-radius: 30px;
        box-shadow: 0 0 5px 2px black, inset 0 0 0 2px white;
    
        background-color: #31572c;
}

header {
   grid-row: 1 / 2;
grid-column: 1 / 4;
margin-top: auto;
}


nav {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    height: max-content;
}

main {
    grid-row: 2 / 4;
    grid-column: 2 / 3;
    height: 450px;
    overflow: auto;
    padding: 2px;
}

aside {
    grid-row: 2 / 3;
    grid-column: 3 / 4;
    height: 350px;
    overflow: auto;
    padding: 10px;
}

footer {
    grid-row: 4 / 5;
    grid-column: 1 / 4;
    
}

/* decor */

.pfp {
    height: 125px;
    width: 125px;
    border-radius: 10px;
}

.ocs {
    padding:5px;

}

.png {
    height: 175px;
    width: 175px;
    margin-top: 10px;
    transition: all ease-in-out .5s;
}

.png:hover {
    transform: rotate(360deg);
}