:root {
    --line-width: 2px;
    --line-color: black;

    --color: black;
    --background: white;

    --color-hover: white;
    --background-hover: #111;

    --font-family: 'Virgil', sans-serif;
}

* {
    box-sizing: border-box;
    min-width: 0;
}

@font-face {
    font-family: 'Virgil';
    src: url('https://salteadorneo.github.io/wireframes/fonts/Virgil.woff2') format('woff2'),
        url('https://salteadorneo.github.io/wireframes/fonts/Virgil.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

div.img,
img {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background, white);
    border-width: var(--line-width, 2px);
    border-style: solid;
    border-color: var(--line-color, black);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    aspect-ratio: 1 / 1;
    position: relative;
    font-family: var(--font-family);
    color: var(--line-color, black) !important;
    box-sizing: border-box;

    &.empty {
        background-image: linear-gradient(to top left,
                transparent 0%,
                transparent calc(50% - var(--line-width, 2px)),
                var(--line-color, black) 50%,
                transparent calc(50% + var(--line-width, 2px)),
                transparent 100%),
            linear-gradient(to top right,
                transparent 0%,
                transparent calc(50% - var(--line-width, 2px)),
                var(--line-color, black) 50%,
                transparent calc(50% + var(--line-width, 2px)),
                transparent 100%);
    }
}