body {
    background-image: url(bg/gothgreen.png);
    cursor: url(cursors/12244a.gif), auto;
}

main {
    display: grid;
    grid-template-columns: 220px auto 300px;
    grid-gap: 15px;
    width: 90%;
    margin: auto;
}

h2, h3 {
    margin: 0;
}

header {
    text-align: center;
    grid-column: 1 / 4;
}

header > .window,
section > .window {
    --window-background-color: #71d85f;
}

#head-image {
    max-width: 100%;
}

button {
    cursor: url(cursors/12244b.gif), auto;
}

#blinkies {
    text-align: center;
}

#x88 {
    width: 180px;
    display: block;
    margin: auto;
}

#middle {
    display: grid;
    grid-template-columns: 33% 30% 35%;
    grid-gap: 5px;
    padding: 5px;
    margin-inline: 10px;
}

#middle > div:nth-child(2) {
    grid-column: 2 / 3;
}

#middle > div:nth-child(6) > img {
    max-width: 100%;
}

#middle > div:nth-child(4) {
    grid-column: 1 / 3;
}

#middle > div:nth-child(6) {
    grid-column: 1 / 4;
    text-align: center;
    margin-bottom: 20px;
}

#middle > div:nth-child(8) {
    grid-column: 2 / 4;
    margin-left: 25px;
}

#likes {
    display: grid;
    grid-template-columns: auto;
}

#about-edit-3 {
    max-width: 240px;
    margin: auto;
    display: block;
}

#userboxes {
    width: 240px;
    display: block;
    margin: auto;
}

main > section:nth-child(5) {
    grid-column: 2 / 3;;
}

@media (max-width: 1400px) {
    #middle > div:nth-child(1),
    #middle > div:nth-child(2),
    #middle > div:nth-child(3),
    #middle > div:nth-child(4),
    #middle > div:nth-child(5) {
        grid-column: 1 / 4;
    }

    #about-edit-3 {
        max-width: 300px;
    }
}

@media (max-width: 1000px) {
    main {
        grid-template-columns: 50% auto;
    }

    header {
        grid-column: 1 / 3;
    }

    main > section:nth-child(3) {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }

    main > section:nth-child(2) {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        width: 240px;
        justify-self: end;
        margin-right: 60px;
    }

    main > section:nth-child(4) {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        width: 300px;
        justify-self: start;
    }

    #about-edit-3 {
        margin: 0;
    }
}

@media (max-width: 680px) {
    main > section:nth-child(2) {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
        width: 100%;
        justify-self: start;
        margin-right: 0px;
    }

    main > section:nth-child(4) {
        grid-column: 1 / 3;
        grid-row: 4 / 5;
        width: 100%;
        justify-self: start;
    }
}