:root {
  --color-primary: #fff;
  --default-spacing: 2rem;
  --animation-duration: 1s;
  --text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

body {
  margin: 0;
  min-height: 100vh;

  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  color: var(--color-primary);
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;

  text-shadow: var(--text-shadow);

  background-color: #333;

  &::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("images/background.jpg") no-repeat center center;
    background-size: cover;
    filter: blur(6px);
    transform: scale(1.05);
    z-index: -1;
  }

  figure {
    text-align: center;
    margin: 0;

    img {
      width: 75%;
      border-radius: 50%;
      margin: var(--default-spacing);
    }

    img:hover + figcaption {
      color: transparent;
      text-shadow: none;

      &::after {
        opacity: 1;
        text-shadow: var(--text-shadow);
        color: var(--color-primary);
      }
    }

    figcaption {
      font-size: 1.4rem;
      position: relative;

      &::after {
        content: attr(data-hover);
        position: absolute;
        inset: 0;
        opacity: 0;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      img {
        opacity: 0;
        transform: scale(0.9);
        animation: fadeNscale var(--animation-duration) ease-out forwards;
      }
      figcaption {
        opacity: 0;
        animation: fadeNscale var(--animation-duration) ease-out forwards;
      }
    }
  }

  nav {
    height: 2.4rem;
    margin: var(--default-spacing);

    a {
      display: inline-block;
      margin: 0.2rem;

      i {
        font-size: var(--default-spacing);
        transition: transform 0.2s ease;
      }

      &:link, &:visited {
        color: inherit;
        text-decoration: none;
      }

      &:hover, &:active {
        i { transform: scale(1.3); }
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    nav {
      opacity: 0;
      animation: fadeNscale var(--animation-duration) ease-out forwards;
    }
  }
}

@keyframes fadeNscale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}