.home {
  font-size: calc(0.75rem + 5.5vmin);

  hr {
    width: 75%;
    border: 1px solid;
  }
}

#home-grabber {
  font-family: 'Domine', 'Times New Roman', Times, serif;
  color-scheme: dark;
  color: var(--fg);

  padding-top: 4rem;

  background-image: url(https://images.unsplash.com/photo-1601733969387-031f1b300d44?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&dl=mike-bravo-H8nYVhBORW8-unsplash.jpg);
  background-size: cover;

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

  hr {
    border-color: var(--accent);
  }

  h1 {
    font-size: 200%;
    text-align: center;
    height: min-content;
  }

  p {
    width: 100%;
    padding: 0;
    text-align: center;
    font-weight: bold;
  }
}

#home-summary {
  color-scheme: dark;
  color: var(--fg);
  background-image: url(https://images.unsplash.com/photo-1605810230434-7631ac76ec81?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&dl=maxim-hopman-IayKLkmz6g0-unsplash.jpg);
  background-size: cover;
  background-position: bottom;

  font-family: Roboto, sans-serif;

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

  h2 {
    font-size: 125%;
    text-align: center;
  }

  hr {
    border-color: var(--accent);
  }

  p {
    width: 75%;
    padding: 0;
    text-align: justify;
    font-size: 50%;
    font-weight: bold;
    font-family: 'Domine', 'Times New Roman', Times, serif;
    
    padding: 1rem;
    border-radius: .5rem;
    color: var(--fg);
    background-color: rgba(from var(--bg) r g b / 0.5);
  }
}

#home-login {
  color-scheme: dark;
  color: var(--fg);
  background-image: url(https://images.unsplash.com/photo-1565591452825-67d6b7df1d47?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&dl=parker-coffman-8EYMcqG5GRU-unsplash.jpg);
  background-size: cover;

  font-family: Roboto, sans-serif;

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

  h2 {
    font-size: 125%;
    text-align: center;
  }

  hr {
    border-color: var(--accent);
  }

  .btns {
    display: flex;
    flex-direction: row;
    width: 50%;
    justify-content: space-evenly;

    button, a {
      all: unset;

      background-color: var(--bg);

      padding: 1rem 2rem;

      border-radius: 0.5rem;

      box-shadow: 0 0 2px 1px hsl(from var(--fg) h s calc(l / 2)) inset;

      font-size: 50%;
      font-family: 'Domine', 'Times New Roman', Times, serif;

      cursor: pointer;
    }
  }
}