#story {

    flex-flow: column-reverse nowrap;
    justify-content: flex-end;

    width: 20em;

    margin-right: 4em;

    overflow-y: auto;

    color: var(--text-color);

}

.storyLine {

    margin: 0.5em;

    text-align: center;

    transition-duration: 500ms;

}

.storyLine:last-of-type {

    margin-top: 0px;

    animation: fade-in 1000ms linear 0ms 1;

}

#lightCanvas {

    width: 10em;

}

#invAct {

    width: 20em;

    margin-left: 4em;

}

#inventory {

    justify-content: flex-start;
    align-items: flex-start;

    height: 50%;
    width: 100%;

}

.item {

    color: var(--text-color);

    animation: fade-in 1000ms linear 0ms 1;

}

#actions {

    justify-content: flex-start;

    height: 50%;
    width: 100%;

}

.actionContainer {

    width: 100%;

    margin-bottom: 1em;

}

.action {

    position: relative;

    width: 100%;

    margin: none;
    outline: none;
    border: 2px solid var(--text-color);
    border-radius: 0.5em;
    padding: 0.5em 0.5em;

    background-color: transparent;

    font-family: "Times New Roman", Times, serif;
    font-size: 1em;

    color: var(--text-color);

    transition-duration: 500ms;

    animation: fade-in 1000ms linear 0ms 1;
    
}

.action:hover:not([disabled]) {

    background-color: var(--action-highlight);
    box-shadow: 0em 0em 1em var(--text-color);

}