html, body {
    min-height: 100vh;
}

body {
    background: url('/assets/images/about/clouds.jpg') repeat;
    position: relative;
}

#wrapper:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url('/assets/images/about/window/window-frame-left.png') repeat-y;
    width: 6px;
    height: 100%;
}

#wrapper:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background: url('/assets/images/about/window/window-frame-right.png') repeat-y;
    width: 6px;
    height: 100%;
}

#window-top {
    position: relative;
    z-index: 2000;
}

.window-titlebar {
    background: url('/assets/images/about/window/window-bar.png') repeat-x;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.window-titlebar .window-x {
    margin-left: auto;
}

#window-bottom {
    height: 5px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    background: url('/assets/images/about/window/window-frame-bottom.png') repeat-x;
    z-index: 1000;
}

.window-frame-corner-right {
    margin-left: auto;
}

main {
    font-family: serif;
    position: relative;
    z-index: 20;
    max-width: 100%;
}

main p {
    margin: 0;
    padding: 1.5rem;
    font-size: 2rem;
    color: rgb(255, 0, 0);
    text-shadow: #000 2px 2px 0px, #000 -1px -1px 0px, #000 1px 1px 0px,
        #fff -2px -2px 0px, #fff -1px -1px 0px, #fff 1px 1px 0px;
}

.line {
    position: relative;
}

.random-images {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.random-image {
    position: absolute;
}

.layer-top .random-image {
    z-index: 10;
}

.layer-bottom {
    z-index: -1000;
}

.layer-middle {
    z-index: -100;
}

.layer-middle .random-image {
    z-index: 0;
}

.layer-bottom .random-image {
    z-index: -1;
}