body {
  background-image: url("../img/bkg/cs-04.jpg");
  color: white;
}

.main-container-parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.main-container-child {
  padding-left: 70px;
  padding-right: 70px;
  padding-bottom: 20px;
  border-radius: 10px;
  margin-top: 55px;
  margin-bottom: 80px;
}
.main-title {
  font-size: 72px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  margin-bottom: 8px;
  /* text-shadow: 0px 0px 4px rgb(100, 100, 100); */
  justify-content: center;
  display: flex;
  align-items: center;
}

.main-subtitle {
  font-size: 25.5px;
  font-weight: 100;
  font-family: Swanky And Moo Moo;
  text-shadow: 0px 0px 2px rgb(100, 100, 100);
  justify-content: center;
  text-align: center;
  margin-bottom: 20px;
}

.buttons {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.get-started, .login {
  height: 55px;
  width: 100%;
  max-width: 280px;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: 16px;
  font-family: quicksand, "Nunito", Arial, sans-serif;
  font-weight: 400;
  cursor: pointer;
}

.get-started {
  border: 1px solid white;
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
}

.get-started:hover {
  background-color: white;
  color: black;
}

.login {
  border: none;
  background-color: rgba(255, 255, 255, 0.75);
  color: black;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.login:hover {
  background-color: white;
}

/* Narrow screens: the 70px side padding pushed the container (and the big title)
   past the viewport edge. Trim the padding and scale the title down to fit. */
@media (max-width: 560px) {
  .main-container-child {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  .main-title {
    font-size: 56px;
  }

  .main-subtitle {
    font-size: 22px;
  }
}
/* Touch devices keep :hover applied after a tap; reset the visible hover states
   to base there so nothing looks stuck/selected. */
@media (hover: none) {
  .get-started:hover { background-color: rgba(0, 0, 0, 0.2); color: white; }
  .login:hover { background-color: rgba(255, 255, 255, 0.75); }
}