body {
        display: flex;
        justify-content: center;

        background-image: url("files/resources/background.gif");        
        margin: 1%;
        overflow: hidden;

        position: relative;
    }

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: #7b7253;
        mix-blend-mode: color;
        pointer-events: none;
        z-index: -1;
    }

    .blendColor{
        mix-blend-mode: color;
    }

    .blendExclusion{
        mix-blend-mode: exclusion;
    }

    #site{
        width: 1436px;
        height:900px;
        display: flex;
        justify-content: center;
    }

    .main{
        height: 97%;
        width: 71%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        color: white;
        gap: 10px;
    }

    .entries{
        max-height: 866px;
        width: 60%;
        background-color: #fefff1;
        display: flex;
        justify-content: center;
        
    }

    .journalList{
        width: 32%;
        background-color:#0e422c;
    }
    .buttonEntry{
        max-width: 350px;
        height: 4%;
        background-color: #a3ac6b;
        font-family: 'DOS';
        color: black;
        display: flex;
        align-items: center;
        font-size: x-large;
        margin-bottom: 2%;
        box-shadow: 4px 4px 0 #000;
        padding: 0% 0% 0% 0.5%;
        position: relative;

    }

    .buttonEntry.active{
        background-color: #5c5394;
        color: white;
        left: 0% !important;
    }

    .buttonEntry:hover{
        background-color: #5c5394;
        cursor: pointer;
        color: white;
    }

    .entry{
        display: none;
        height: 94%;
        width: 92%;
        overflow-y: scroll;
        scrollbar-width: thin;
        scrollbar-color: #08090d transparent;   
        padding: 1% 4% 1% 4%;
        margin: 2%;
        max-height: 864px;
        font-family: 'Pixel Times';
        color: #08090d;
    }

    .entry a{
        color: #a3ac6b;
        text-decoration: underline;
    }

    .entry.active {
        display: block;
        max-height: 864px;
    }

    .entry p{
        color: #08090d;
        font-family: inherit;
    }

    p img{
        max-width: 100%;
    }

    .entry h1{
        font-family: inherit;
        color: #08090d;
        margin: 0%;
        padding: 0%;
    }

    .entriesContainer{
        height: 96.2%;
        width: 25%;
        position: absolute;
        overflow-y: scroll;
        margin-left: -1%;
        scrollbar-width: none;

    }

    .buttonContainer {
        color: white;
        display: flex;
        width: 66%;
        justify-content: space-between;
        font-family: 'DOS';
        padding-top: 1%;
        font-size: larger;
        text-align: center;
    }

    .buttonContainer div:hover{
        color: #a3ac6b;
        cursor: pointer;
    }

    #site{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    a{
        text-decoration: none;
        color: inherit;
    }

    #changeFont{
        font-size: medium;
    }

    censor {
        background: #08090d;
        color: #08090d !important;
        padding: 0 3px;
        user-select: none;
        text-decoration: none !important;
    }

    censor a{
        color: #08090d !important;
        cursor: default;
    }

    .emote{
        width: auto;
        display: inline-block;
        vertical-align: middle;
        width: 2em;
        height: 2em;
        object-fit: contain;
    }

    details{
        border: 1px solid #08090d;
        padding: 2%;
    }