#dictionary {
    --padding: 2.5rem;
    --gap-to-content: 2.5%;
    --gap-to-sides: 1rem;

    width: calc(90% - calc(var(--padding) * 2));
    max-width: 40rem;

    padding: var(--padding);
    margin-inline: auto;

    transition: 250ms;

    background-color: var(--bg-colour-500);
    color: var(--fg-colour-500);

    border-radius: calc(var(--padding) / 5) 0 0 calc(var(--padding) / 5);

    overflow-y: scroll;

    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    
    h1 {
        text-align: left;
    }

    @media (min-width: 35rem) {   
        position: fixed;
        top: var(--gap-to-sides);
        bottom: var(--gap-to-sides);

        right: calc(calc(min(90%, calc(40em + calc(var(--padding) * 2))) * -1) + var(--gap-to-content));

        box-shadow: 0 0 1em 0.2em var(--fg-colour-500);

        &:hover, &:focus {
            right: 0;
        }
    }
}

.word-definition {
    position: relative;
    width: max-content;
    max-width: 90%;

    display: grid;
    gap: 0.5em;

    .word::after {
        color: var(--fg-colour-700);
        font-size: small;
        padding-left: 0.5em;
        font-weight: bold;
    }
    ol {
        list-style: none;

        counter-reset: list;
        
        li::before {
            counter-increment: list;
            content: counter(list) " : ";
        }
    }
}
.word-definition.noun .word::after {
    content: '· noun';
}
.word-definition.adjective .word::after {
    content: '· adjective';
}
.word-definition.verb .word::after {
    content: '· verb';
}