: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;
}

button {
  font-family: var(--font-family);
  color: var(--line-color, black);
  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;
  padding: .5rem 1rem;

  &:hover {
    color: var(--color-hover, black);
    background: var(--background-hover, black);
  }

  &.sm {
    font-size: .75rem;
    padding: .25rem .5rem;
  }

  &.lg {
    font-size: 1.25rem;
    padding: .75rem 1.5rem;
  }

  &.xl {
    font-size: 1.5rem;
    padding: 1rem 2rem;
  }
}