* {
box-sizing:border-box
}

@font-face {
    font-family: FreePixel;
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/FreePixel.ttf");
}

body {
    /*font-family: "FreePixel";
     *   font-size:16px;*/
    
    font-family: var(--font-family);
    font-size: var(--font-size);
    color:var(--main-fg-color);
    
    background-image: /*url(../images/light.png)*/var(--background-image);
    background-repeat: repeat-x;
    background-color: var(--main-bg-end-color);
    background-position: left top;
    
    padding-bottom:26px;
    
    text-rendering: optimizelegibility;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
    
}

main{
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

.content,#footnote{    
    min-height: calc(80vh - 200px);
    border-style: solid;
    border-width: 1px;
    background: var(--main-color);
    
    padding: 10px 10px 10px 10px;
    
    .titlebar {
        margin: -10px -10px 0 -10px;
        background: var(--main-bg-color);
        color: var(--main-title-fg-color);
        padding: 5px 5px 5px 10px;
        margin-bottom: 10px;
        text-align: var(--title-align);
        border-style: var(--border-style);
        border-width: var(--border-width);
    }
    
    
}

.fit,#footnote{
    min-height: fit-content;
}

.smol{
    max-height: 200px;
    
    div{
        overflow: auto;
        max-height: 150px;
    }
}

footer{
    height:fit-content;
    background-color: var(--main-color);
    color: var(--main-fg-color);
    display:flex;
    padding:0 10px;
    align-items:center;
    overflow-x:hidden;
    position:fixed;
    
    font-family: "FreePixel";
    
    bottom:0;
    width:100%
}

#footnote{
    margin-bottom: 20px;
    height: max-content;
    border-style: solid;
    border-width: 1px;

    padding: 10px 10px 10px 10px;

    margin-right: auto;
    margin-left: auto;

    background-color: var(--main-color);
}

#gif{
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    scale: 100%;

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;

    margin-bottom: 40px;

}

.text-center{
    text-align:center;
    display: block;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}


.columnsplitter{
    display: grid;
    
    columns: 2;
    grid-template-columns: auto 300px;
    column-gap: 20px;
}

.singlecolumn{
    grid-template-columns: auto;
}

.rowsplitter{
    display: grid;
    
    columns: 1;
    row-gap: 20px;
}

.chatbox{
    margin-top: 10px;
    
    textarea {
        font-family: "FreePixel";
        resize: none;
    }
    
    input{
        border-style: solid;
        border-width: 1px;
        border-color: black;

    }
}

.info {
    background-color: red;
    color: var(--main-bg-color);
}

.tworowtext {
    dl dt{
        float:left;
        clear:left;
        text-align:right;
        width:130px;
        font-weight:700
    }
    
    dl dd{
        margin-left:calc(130px + 20px)
    }
}

.button-container{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    
    margin-bottom: 20px;
}

.squeeze{
    width: auto;
    img{
        width: 100%;
        image-rendering: optimizespeed;
    }
}

.leftpad{
    float: right;
}

.list-left{
    ul{
        text-align: left;
        list-style: disclosure-closed;
        list-style-position: inside;
        padding-left: 0px;
    }
}

.centered{
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

.rndText {
    
    
}