body {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    padding: 0;
    margin: 0;
    justify-content: center;
    overflow: hidden;

}

/*Background colors for the color palette:
 * desat-red #854a52
 * sat-orange #B85849
 * desat-orange #F2827C
 * peach #F7A180
 * dark sand purple #201823
 * desat-purple #443044
 * lighter desat-purple #5A4158
 * even lighter purple #986375
 */

.bar {
    /*positioning and dimensions*/
    position: absolute;
    bottom: 0;
    height: 60px;
    width: 1000px;
    margin: 0;

    /*alignment*/
    display: flex;
    justify-content: space-evenly;

    /*border styling*/
    color: #B85849;
    background-color: #1e1e1e;
    border-left: 1px solid #854a52;
    border-top: 1px solid #854a52;
    border-right: 1px solid #854a52;
    border-bottom: 4px solid #201823;
}

.break {
    font-size: 3em;
    color: orange;
}

.link {
    text-decoration: underline;
    color: orange;
    font-family: 'alkhemikalmedium';
    font-size: 2em;
    padding-top: 18px;
}

#domain {
    font-family: 'pixeled_english_fontregular';
    font-size: 2em;
    padding-top: 20px;
}
#version {
    font-family: 'alkhemikalmedium';
    font-size: 2em;
    padding-top: 17px;
}

.window {
    position: absolute;
    display: grid;
    background-color: #1e1e1e;
    border-left: 1px solid #854a52;
    border-top: 1px solid #854a52;
    border-right: 4px solid #201823;
    border-bottom: 4px solid #201823;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0;

}

.header {
    /*this is for the image you will have as a decoration*/
    background-clip: content-box;
}

.header h1{
    color: orange;
    margin-top: 15px;
    margin-bottom: 0;
    font-family: 'alagardmedium';
}

.main {
    overflow: scroll;
    color: #B85849;
    margin: 0;
    font-family: 'rat_typewriterregular';
}

.footer {
    text-align: right;
    margin: 10px;
    color: #B85849;
    font-family: 'rat_typewriterregular';
}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 14, 2026 */



@font-face {
    font-family: 'alagardmedium';
    src: url('../fonts/alagard-webfont.woff2') format('woff2'),
    url('../fonts/alagard-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}




@font-face {
    font-family: 'alkhemikalmedium';
    src: url('../fonts/alkhemikal-webfont.woff2') format('woff2'),
    url('../fonts/alkhemikal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}




@font-face {
    font-family: 'blocksteppedregular';
    src: url('../fonts/blockstepped-webfont.woff2') format('woff2'),
    url('../fonts/blockstepped-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}




@font-face {
    font-family: 'blockstepped_3dregular';
    src: url('../fonts/blockstepped_3d-webfont.woff2') format('woff2'),
    url('../fonts/blockstepped_3d-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}




@font-face {
    font-family: 'pixeled_english_fontregular';
    src: url('../fonts/pixeled_english_font-webfont.woff2') format('woff2'),
    url('../fonts/pixeled_english_font-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}




@font-face {
    font-family: 'rat_typewriterregular';
    src: url('../fonts/rat-typewriter-webfont.woff2') format('woff2'),
    url('../fonts/rat-typewriter-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}