.skip-link {
  position: absolute;
  top: auto;
  left: -10000px;
  width: 1px;
  height: 1px;
  background-color: var(--color-secondary);
  color: #fff;
  font-size: 1.125rem;
  overflow: hidden;

  &:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    padding: 0.5em;
  }
}

[class^="link"]:not(.link-codepen) {
  min-height: 3em;
  background-color: var(--color-primary);
  color: #fff;
  box-shadow: 0.18em 0.18em var(--color-secondary);
}

[class^="link"]:not(.link-codepen),
.profile .container > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75em;
  transform: translate(0, 0);
  transition: 180ms all ease-in-out;
  font-size: 1.125rem;
  line-height: 1;
  text-align: center;
  text-decoration: none;

  &:hover,
  &:focus {
    transform: translate(-0.15em, -0.15em);
    box-shadow: 0.3em 0.3em var(--color-secondary);
  }

  &:focus {
    outline-color: transparent;
    outline-style: solid;
  }
}

// stylelint-disable-next-line no-descending-specificity
.page-footer [class^="link"] {
  width: 100%;
  min-height: 2.5em;
  background-color: var(--color-background);
  color: var(--color-primary);
}

.link-codepen {
  display: block;
  margin-top: 3rem;
  font-size: var(--font-size-h4);

  &::before {
    position: absolute;
    padding-right: 1.25em;
    transform: translate(15%, -90%) rotate(-3deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 79.6 187.1'%3E%3Cpath fill='#{svgColor(primary-alt)}' d='M12 131l-2 13-3 26a10 10 0 000 2 1 1 0 001 0 24 24 0 002-3 37 37 0 016-8 73 73 0 007-9l24-33 4-5a70 70 0 006-7l15-20a8 8 0 001-1 1 1 0 000-1 16 16 0 00-2-1l-8-3a69 69 0 01-13-6 7 7 0 00-1-1l-16-6-13-7a57 57 0 00-10-4 17 17 0 01-2-1 2 2 0 01-1-4 18 18 0 012-2 93 93 0 0011-13 95 95 0 018-8l10-11a32 32 0 003-4c3-5 7-9 12-13a12 12 0 011-1 1 1 0 012 0 2 2 0 010 2 27 27 0 01-3 3 104 104 0 00-10 12 115 115 0 01-11 13 102 102 0 00-11 13 78 78 0 01-5 7l-2 2a1 1 0 000 1l19 8 9 4 3 2a77 77 0 0113 5 22 22 0 003 2l17 8a8 8 0 011 1 2 2 0 010 2 22 22 0 01-1 3l-11 14a33 33 0 00-2 3 98 98 0 01-10 13l-5 7-23 31a87 87 0 01-7 9 60 60 0 00-6 8l-2 3a1 1 0 000 1l9-4 12-6 10-6 13-7a10 10 0 012 0 2 2 0 012 1 2 2 0 010 3 24 24 0 01-3 1l-8 4-20 11-24 12a19 19 0 01-2 1 2 2 0 01-3-2 10 10 0 010-2l1-7 3-24 3-21a39 39 0 011-5 2 2 0 013-1 2 2 0 011 2v4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 130%;
    background-size: 14%;
    color: #6f6ffd;
    font-size: 0.85em;
    content: "Jump right in";
  }
}

.link-allstyles {
  font-size: var(--font-size-h4);

  @media (max-width: 400px) {
    margin-left: 6rem;
  }
}

.link-github {
  svg {
    width: 1em;
    height: 1em;
    margin-right: 0.25em;
    fill: currentColor;
  }
}
