body {
	background-image: url("../images/bg.gif");
    background-color: #639bff;
	background-attachment: fixed;
	background-position: center;
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.container {
    display: grid;
    grid-template-columns: 250px minmax(400px, 900px);
    grid-template-areas:
        "header header"
        "nav content"
        "nav footer";
    justify-content: center;
    gap: 8px;
    border-color: #ff0000;
    color: #ffffff;
}

.box {
    background-image: url("../images/wood.png");
    border: 6px outset #dd9060;
    border-radius: 6px;
    padding 12px;
    color: #5d3b18;
}

.box h3 {
    margin: 6px 0px;
}

.box p {
    margin: 0px;
}

.box a {
    font-family: "Ibm Plex Mono", serif;
    color: #704030;
}

.window {
    background-color: #090909f0;
    background-image: linear-gradient(to bottom, #090909, #3d2a00);
    color: #ffaa33;
    border: 4px inset #dd9060;
    border-radius: 8px;
    padding: 6px;
}

.window a {
    font-family: "Ibm Plex Mono", serif;
    color: #ffcc55;
}


.title {
    grid-area: header;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 8px;
}

.title h1 {
    font-size: 56px;
    text-align: center;
}

.title p {
    margin: auto;
}

.nav {
    grid-area: nav;
    padding: 0px 12px;
}

.content {
    grid-area: content;
    padding: 12px;
}