/* Fonts (we serve our own fonts :D #fuckgoogle) */
@font-face { font-family: 'Share Tech'; src: url(../fonts/Share-Tech/ShareTech-Regular.ttf) format('woff2'); }
@font-face { font-family: 'Share Tech Mono'; src: url(../fonts/Share-Tech/ShareTechMono-Regular.ttf) format('woff2'); }
@font-face { font-family: 'Bitter'; src: url(../fonts/Bitter/Bitter-VariableFont_wght.ttf) format('woff2'); }

body {
    height: 100vh; 

    background-image: url("/img/background.jpg");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* *flexes your boxes*/
.container {
    padding-top: 10vh;
    display: flex;
    flex-direction: column;
} 


img.art_display { /* ackshually nvm, there's not much art at all so i'm not gonna make the gallery thing */
    width: 45%;
    align-self: center;
    padding-top: 5vh;
    padding-bottom: 5vh;
}

div.taskbar {
    position: absolute;

    left: 0px;
    top: 0px;
    width: 100%;

    height: 31px;
    background: #c3c3c3;
    box-shadow: inset -1px -1px black;
}

/* Probably not the right way to do this, but it will suffice I guess. */
div.window_titlebar {
    position: absolute;

    left: 0px;
    top: 0px;
    width: 100%;

    height: 22px;
    background: navy;
}

div.window {
    position: relative;
    border-style: ridge;
    border-width: 5px;
    border-color: #e9e9e9;
    
    overflow-y: auto;
    width: 60vw;
    max-width: 80vw;

    max-height: 60vh;
    padding: 10px;
    align-self: center;
    background-color: #e9e9e9;
}


/* Fonts */

h1 { 
    font-family: 'Bitter', serif;
    font-size: 20pt;
    
    color: white;
    text-shadow: 3px 3px 3px grey;
    display: inline;
    align-self: center;
}

h2 {
    padding-top: 5px;
    font-family: 'Share Tech', serif;
}

h3 {
    display: inline;
    padding-left: 2px;
    font-family: 'Bitter', serif;
    font-size: 11pt;
    
    color: white;
}

p {
    font-family: 'Bitter', serif; 
    font-weight: 450;
}

/* mobile :( */

@media (max-width: 900px) {

    img.art_display {
        width: 80vw;
    }
}