<section>
  <h1>Link states</h1>
  <p>
    <a href="#" class="link">This is a link</a>
  </p>
  <p>
    <a href="#" class="link focus">This is a focused/active link</a>
  </p> 
  <p>
    <a href="#" class="link hover">This is a hovered link</a>
  </p>
  <p>
    <a href="#" class="link visited">This is a visited link</a>
  </p>
  <p>
    <a href="#" class="link">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce maximus sodales luctus. Duis auctor nisl eget quam aliquet, vel bibendum erat consectetur. 
    </a>
  </p>
</section> 

:root {
  --background-color: #222;
  --text-color: white;
  --link-color: beige;
  --link-alternate: violet;
}

body {
  background: var(--background-color);
  color: var(--text-color);
  font-family: sans-serif;
  font-size: 2rem;
  padding: 3rem;
  
  h1 {
    color: indigo;
    -webkit-text-stroke: .025ch indigo;
    -webkit-text-fill-color: lavender;
    font-family: 'Georgia', sans-serif;
    text-shadow: .1ch .1ch purple;
  }
  
  section {
    display: inline-flex;
    flex-direction: column;
  }
}

.link {
  color: var(--link-color);
  outline-offset: 0.25ch;
  transition: .2s linear;
  outline: .15ch transparent dashed;
  text-underline-offset: 0.25ch;
  
  // State classes are used here to demonstrate all states without preforming at action.
  &:hover,
  &.hover, 
  &:focus,
  &:active,
  &.focus,
  &.active {
    border-radius: .3ch;
    text-decoration: none;
  } 
  
  &:hover,
  &.hover {
   outline: .15ch dashed;
  }
  
  &:focus,    
  &:active,
  &.focus,
  &.active {
    outline: .15ch solid;
  }
  
  // &:visited,
  &.visited {
    color: var(--link-alternate);
  }
}