.link.separator {
  border-top: 0.125rem solid var(--standard-bg);
}

.link {
  margin: 0 0 1rem 2rem;
  border-radius: 0.1rem;
}
.link:hover {
  transition: all ease-in-out 0.3s;
}
.link:hover > a {
  color: var(--text-white);
}

.link > a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.link > a .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  width: 3rem;
  height: 3rem;
}
.link > a .icon img {
  width: 1.5rem;
}
.link > a .name {
  flex-grow: 1;
  margin-left: 0.25rem;
  font-size: 1.5rem;
  line-height: 1.2;
}
.link:last-of-type {
  margin-bottom: 0;
}

/* SOCIAL COLOURS */

.link:hover {
  transition: all ease-in-out 0.3s;
}
.link {
  border-color: rgb(var(--standard) / 0);
  background-color: rgb(var(--standard) / 0.8);
}
.link > a .name {
  color: var(--text-white);
}
.link > a .icon {
  filter: grayscale(1) brightness(1.7) invert(1);
}
.link:hover {
  border-color: var(--standard-hover);
  background-color: var(--standard-hover);
  box-shadow: none;
}

#bsky.link {
  border-color: rgb(var(--bsky) / 0);
  background-color: rgb(var(--bsky) / 0.8);
}
#bsky.link > a .name {
  color: var(--text-white);
}
#bsky.link > a .icon {
  filter: grayscale(1) brightness(3);
}
#bsky.link:hover {
  background-color: var(--bsky-blue);
  box-shadow: none;
}

#twitter.link {
  border-color: rgb(var(--twitter) / 0);
  background-color: rgb(var(--twitter) / 0.8);
}
#twitter.link > a .name {
  color: var(--text-white);
}
#twitter.link > a .icon {
  filter: grayscale(1) brightness(3);
}
#twitter.link:hover {
  background-color: var(--twitter-blue);
  box-shadow: none;
}

#twitch.link {
  border-color: rgb(var(--twitch) / 0);
  background-color: rgb(var(--twitch) / 0.8);
}
#twitch.link > a .name {
  color: var(--text-white);
}
#twitch.link > a .icon {
  filter: grayscale(1) contrast(3.6);
}
#twitch.link:hover {
  background-color: var(--twitch-purple);
  box-shadow: none;
}

#ref-sheet.link > a .icon {
  filter: grayscale(1) brightness(1.7);
}

@media only screen and (width <= 1668px) {
  .link:hover {
    transition: none;
  }
}

@media only screen and (orientation: portrait) and (width < 600px),
only screen and (orientation: landscape) and (width < 700px) {
  .link {
    margin: 0 0 0.5rem 1rem;
  }
  .link > a .icon {
    margin-left: 0.25rem;
    width: 2rem;
    height: 2rem;
  }
  .link > a .icon img {
    width: 1.25rem;
  }
  .link > a .name {
    margin-left: 0.875rem;
    font-size: 1.25rem;
    line-height: 1.25;
  }
}