body{
        background-image: url(/writing/files/resources/background.png);
        display: flex;
        justify-content: center;
        cursor: crosshair;
        margin: 1.5%;
        height: 100vh;
        width: 98%;
        overflow: hidden;

    }

    #site{
        width: 56%;
    }

    .main{
        width: 100%;
        height: 90%;
    }

    .mainUI{
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .topDisplay{
        height: 75%;
        display: flex;
        gap: 10px;
    }

    .inventory{
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .screen{
        width: 75%;
        background-image: url(/writing/files/resources/desk.png) !important;
        background-size: cover;
    }

    .bottomDisplay{
        height: 24%;
    }

    .textContainer{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .screenUI{
        border: 10px solid #797353;
        border-width: 10px 6px 10px 6px;
        border-radius: 5px;
        background-image: url(/general/files/thoughtsBg.png);
        box-shadow:
                inset -2px -2px 0 #afab97,
                -2px -2px 0 #afab97,
                4px 4px 0 black;
    }

    .title{
        font-family: 'Pixel Script';
        color: #afab97;
        position: absolute;
        transform: rotate(-90deg);
        font-size: 170px;
        padding: 0%;
        margin: 0%;
        left: 3%;
        top: 20%;
        opacity: 0.8;
    }

    .text{
        width: 90%;
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .userReads{
        padding: 0%;
        font-family: 'DOS';
        color: #afab97;    
        font-size: larger;
    }

    .buttons{
        height: 20%;
        width: 70%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .buttonInteract{
        font-family: 'DOS';
        color: #afab97;
        font-size: xx-large;
        width: max-content;
        cursor: pointer;
    }

    .buttonInteract:hover{
        color: white;
    }

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

    .highlight{
        color: white;
        text-decoration: underline;
    }

    .iconContainer{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;    
        width: 100%;
        gap: 15px;
        align-content: flex-start;
        justify-content: center;

    }

    .icon{
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 90px;
        max-width: 90px;
        width: auto;
        border: 2px dotted #afab97;
        border-radius: 5px;

    }

    .icon img{
        height: 80px;
    }

    .icon img:hover{
        transform: rotate(5deg);
        cursor: pointer;
    }

    .topInventory{
        height: 50%;
        width: 80%;
    }

    .subtitle{
        font-family: 'Pixel Script';
        color: #afab97;
        font-size: x-large;
        text-align: left;
        padding: 0%;
        margin: 5%;
        width: 90%;
    }

    .translateButton{
        font-family: 'Pixel Script';
        color: #afab97;
        text-decoration: underline;
        cursor: pointer;
        text-align: right;
    }

    .translateButton p {
        border: 0%;
        padding: 0%;
    }

    .portrait{
        height: 74%;
    }

    .portrait img {
        width: 99%;
        height: 99%;
    }

    .imgIcon {
        height: 131px !important;
    }

    .storyLink{
        position: absolute; 
        width: 80px; 
        height: 80px; 
        cursor: pointer;
    }

    #cat{
        top: 25%;
        left: 50%;
    }

    #cables{
        top: 51%;
        left: 62%;
    }

    #football{
        left: 75%;
        top: 3%;
    }

    #pedals{
        top: 63.4%;
        left: 63%;
    }

    #mic{
        top: 35%;
        left: 51%;
    }