:root {
    font-family: w95fa, sans-serif;
    --bg-color: #008080;
    --content-bg-color: #f0e9d0;
    --text-color: #000000;
    --window-bg-color: #b0aa9b;
    --light-shade: #ddd4c6;
    --dark-shade: #747064;
    --window-deco-color: #00007f;
    --seperator-color: #979285;
}

@font-face {
    font-family: w95fa;
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.cdnfonts.com/s/45697/W95FA.woff);
}

.title-bar {
    background-color: var(--window-deco-color);
    color: white;
    font-size: 14pt;
    padding: .25em;
    margin: 0;
}

.window {
    background-color: var(--window-bg-color);
    border: 3px solid;
    border-color: var(--light-shade) var(--dark-shade) var(--dark-shade)
        var(--light-shade);
    min-height: 5em;
    margin: 0.5em;
}

.button {
    border: 3px solid;
    border-color: var(--light-shade) var(--dark-shade) var(--dark-shade)
        var(--light-shade);
    padding: 5px;
}

.window-content {
    background-color: var(--content-bg-color);
    border: 3px solid;
    border-color: var(--dark-shade) var(--light-shade) var(--light-shade) var(--dark-shade);
    min-height: 5em;
    margin: 1em .5em;
}

.button:hover {
    background-color: var(--light-shade);
}

.vruler{
    border-left: 3px solid var(--seperator-color);
    height: 30px;
    margin: 0 5px 0 5px;
    align-self: center;
}

/*BODY*/
body {
    background-color: var(--bg-color);
}