:root {
  --global-background-color: #f8f7f5;
  --global-color: #212121;

  --link-color: #212121;
  --link-hover-background-color: #fde047;

  --nav-hover-link-color: inherit;
  --nav-hover-link-background-color: #fde047;

  --footer-background-color: transparent;
  --footer-color: #212121;
  --footer-link-color: var(--footer-color);
  --footer-link-hover-background-color: transparent;
  --footer-link-hover-color: #616161;
}

.dark {
  --global-background-color: #212121;
  --global-color: #f8f7f5;

  --link-color: #fafafa;
  --link-hover-background-color: #ca8a04;

  --nav-hover-link-color: inherit;
  --nav-hover-link-background-color: #ca8a04;

  --footer-background-color: transparent;
  --footer-color: #fafafa;
  --footer-link-color: var(--footer-color);
  --footer-link-hover-background-color: transparent;
  --footer-link-hover-color: #f8f7f5;
}

body {
  background-color: var(--global-background-color);
  color: var(--global-color);
  font-family: 'Noto Sans', sans-serif;
}

a {
  color: var(--link-color);
}

.logo-box {
  margin-top: 7%;
}

.logo {
  width: 10rem;
  height: 10rem;
}

footer {
  background-color: var(--footer-background-color);
  color: var(--footer-color);

  a {
    color: var(--footer-link-color);

    &:focus,
    &:hover {
      background-color: var(--footer-link-hover-background-color);
      color: var(--footer-link-hover-color);
      text-decoration-color: var(--footer-link-hover-color);
    }
  }
}

::selection {
  background-color: #212121;
  color: #fafafc;
  text-shadow: none;
}
::-moz-selection {
  background-color: #212121;
  color: #fafafc;
  text-shadow: none;
}
.dark ::selection {
  background-color: #fafafc;
  color: #212121;
  text-shadow: none;
}
.dark ::-moz-selection {
  background-color: #fafafc;
  color: #212121;
  text-shadow: none;
}

.nav-link {
  padding: .25rem .75rem; 

  &:hover {
    background-color: var(--nav-hover-link-background-color);
    color: var(--nav-hover-link-color);
  }
}

/* link animation */
.animated-link {
  position: relative;
  padding: 0 .25rem .125rem;

  &::before {
    background-color: var(--link-hover-background-color);
    content: '';
    inset: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease-in-out;
    z-index: -1;
  }

  &:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }
}