/* VARIABLES */

:root {
  --page-background: #E5E5E5;
  --card-background: #FFFFFF;
  --primary: #10A352;
  --text: #1B0C2B;
}

/* FONTS */
@font-face {
  font-family: "Avenir Roman";
  src: url("./Avenir-Roman.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

/* BODY */

body {
  background-color: var(--page-background);
  color: var(--text);
  font-family: "Avenir Roman", serif;
}

/* CONTAINER */

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CARD */

.card {
  background-color: var(--card-background);
  box-shadow: 0px 2px 8px rgba(12, 15, 43, 0.1);
  border-radius: 14px;
}

@media only screen and (max-width: 767px) {
  .card {
    width: 80%;
    padding: 50px 5% 80px;
  }
}

@media only screen and (min-width: 768px) {
  .card {
    /* width: 640 - 140 - 140 = 360 */
    width: 360px;
    padding: 100px 140px 160px;
  }
}

/* ICON */

.bus-icon {
  margin: 0 auto 30px;
  display: block;
  margin-bottom: 30px;
}

/* TEXTS */

h1 {
  font-weight: 900;
  font-size: 42px;
  line-height: 28px;
  margin-bottom: 54px;
}

p {
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  margin-bottom: 15px;
}

h1, p {
  text-align: center;
}

/* LOADER */

.loader-dots {
  display: flex;
  justify-content: center;
  margin-top: 35px;
}

.loader-dots__dot {
  background-color: var(--primary);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 4px;
  animation: loading 0.5s ease-out infinite alternate;
}

.loader-dots__dot:nth-child(2) {
  animation-delay: 0.25s;
}
.loader-dots__dot:nth-child(3) {
  animation-delay: 0.5s;
}

@keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}