#spell-container {
    max-width: 400px;
    margin: 20px auto;
    border: 1px solid rgba(var(--color-bglight));
    border-radius:5px;
    background-image: linear-gradient(to bottom, rgba(var(--color-textlight)),rgba(var(--color-textmid)));
    filter:drop-shadow(0 0 10px black)
}

#spell-container > div {
    padding: 10px 20px;    
}

#spell-container #spell-image img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position:center top;
}

#spell-container #spell-image {
    border: 1px solid rgba(var(--color-bglight));
    border-width: 1px 0 1px 0;
    padding:0;
}

#spell-container hr {
    border-color:rgba(var(--color-bglight),0.5);
    width:50%;
}

#spell-container strong {
    color:var(--color-fade)
}

#spell-name {
    font-size: 2rem;
    font-weight: bold;
    color:var(--color-high)
}

#article.dark #spell-container {
    filter:drop-shadow(0 0 10px black);
    background-image: linear-gradient(to bottom, rgba(var(--color-bgmid)),rgba(var(--color-bgdark)));
}