<a href="" class="maroon" id="call-to-action">
  call to action
</a>

@layer defaults, components, utilities;

@layer defaults {
  a:is(:link, :visited) {
    /* low-priority layers are easy to override by default */
    color: mediumvioletred;

    /* but take priority with importance */
    text-decoration: underline !important;
  }
}

@layer utilities {
  /* high-priority layers win by default */
  .maroon {
    color: maroon;
  }
}

@layer components {
  #call-to-action {
    /* higher layers have lower priority with important styles */
    text-decoration: none !important;
    color: rebeccapurple;
    font-size: 3em;
    display: inline-block;
    border: medium solid;
    padding: 0.25em 0.5em;
    border-radius: 0.25em;
  }
}

/* page layout */
html {
  height: 100%;
}

body {
  display: grid;
  min-height: 100%;
  place-content: center;
  padding: 1em;
}