* {
    font-family: "Pixelated MS Sans Serif";
    font-size: 14px;
}

a {
    color: #445577;
    text-decoration: none;
}

.banner {
    background-color: #ccddff;
    border: 1px solid #000000;
    box-sizing: border-box;
    height: 150px;
    margin: 0 auto 10px;
    width: min(800px, 100%);
}

body {
    background-color: #667799;
}

.buttons {
    border: 1px solid #000000;
    box-sizing: border-box;
    margin: 10px auto 0;
    padding: 10px;
    width: min(800px, 100%);
}

.buttons-set {
    display: flex;
    gap: 10px;
    overflow-x: auto;
}

@font-face {
    font-family: "Pixelated MS Sans Serif";
    src: url("../fonts/ms_sans_serif.woff2") format("woff2");
}

@font-face {
    font-family: "Pixelated MS Sans Serif";
    font-weight: bold;
    src: url("../fonts/ms_sans_serif_bold.woff2") format("woff2");
}

.footer {
    margin: 0 auto;
    text-align: center;
    width: min(800px, 100%);
}

.about,
.blog,
.index,
.left-links,
.left-navigation,
.photos,
.projects,
.right-photography,
.right-updates {
    border: 1px solid #000000;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.about-content,
.blog-content,
.index-content,
.left-links-content,
.left-navigation-content,
.photos-content,
.projects-content,
.right-photography-content,
.right-updates-content {
    background-color: #ccddff;
    padding: 10px;
}

.about-header,
.blog-header,
.index-header,
.left-links-header,
.left-navigation-header,
.photos-header,
.projects-header,
.right-photography-header,
.right-updates-header {
    background-color: #667799;
    border-bottom: 1px solid #000000;
    box-sizing: border-box;
    color: #ccddff;
    font-weight: bold;
    padding: 3px 5px;
}

.left {
    box-sizing: border-box;
    padding: 5px;
    width: 200px;
}

main {
    border: 1px solid #000000;
    box-sizing: border-box;
    display: flex;
    margin: 0 auto;
    padding: 5px;
    width: min(800px, 100%);
}

.middle {
    box-sizing: border-box;
    padding: 5px;
    width: 400px;
}

.navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin: 0 auto;
    padding: 10px;
    width: min(800px, 100%);
}

.right {
    box-sizing: border-box;
    padding: 5px;
    width: 200px;
}

.window-close {
    float: right;
}