body {
    background-image: url("resources/freakybg.jpg");
    background-repeat: repeat;
    background-position: right top;
    background-attachment: fixed;
    background-size: cover;
    color: #f3f2ee;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-content: center;
}

.grid-container {
    display: grid;
    grid-template-columns: 250px 300px 300px 200px;
    grid-template-rows: 100px 110px 200px 45vh 7vh;
    gap: 1em;
    grid-template-areas:
    "hdr hdr hdr hdr"
    "quo mt mt id"
    "nav mt mt id"
    "nav mt mt upd"
    "stp stp stp upd";

}

.item {
    background-color: #392735;
    border-style: groove;
    border-color: #8d4b48;
    padding-left: 20px;
    padding-right: 5px;
    background-image: url("resources/background.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
    background-size: cover;

    #maintext {
    height: auto;
    max-height:100%;
    overflow:auto;
    }

    #updates {
        height: auto;
        max-height:100%;
        overflow:auto;
    }

}

.pfp {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    transform: translate(-8px);
}

.header {
    display: flex;
    justify-content: center;
    align-content: center;
    padding-top: 8px;

}