body {
    background: linear-gradient(#F050AE, #FFAB00, #FDF148, #A0E420, #52E3E1, #9336FD);
    background-repeat: no-repeat;
    min-height: 100vh;
}

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, #FE6DAC, #F54692);
    
   /* 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-image: linear-gradient(#00000040, #00000040), url("https://file.garden/ZnnMpjCCUQ_QbjHz/neocities/ocs/misdc/leopard.jpg");
    background-repeat: repeat;
}

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);
}

.art {
    height:150px;
    width: 150px;
    background-size: cover;
    border-radius: 10px;
    transition: all ease-in-out .75s;
}

.art:hover {
    transform: scale(110%);
}