:root {
  /* green color palette: https://coolors.co/00b837-31af57-058a2d-2f6c65 */
  --green-100: #00b837;
  --green-200: #31af57;
  --green-300: #058a2d;
  --green-400: #03541b;
}

body { transition: all 0.25s ease; }

main { margin-top: 103px; } /* for the fixed navbar */

/* BOOTSTRAP-LIKE CLASSES: */
/* Colors  */
.text-green-100 { color: var(--green-100); }
.bg-green-100 { background-color: var(--green-100); }

.text-green-200 { color: var(--green-200); }
.bg-green-200 { background-color: var(--green-200); }

.text-green-300 { color: var(--green-300); }
.bg-green-300 { background-color: var(--green-300); }

.text-green-400 { color: var(--green-400); }
.bg-green-400 { background-color: var(--green-400); }

/* Display */
.d-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.d-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.d-flex-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Breakpoints classes (https://getbootstrap.com/docs/5.3/layout/breakpoints/#media-queries) */
@media (min-width: 768px /* md */) {
  .md\:d-flex-center {
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  .md\:d-flex-col {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 768px /* max-md */) {
  .max-md\:d-flex-col-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

@media (max-width: 992px /* max-lg */) {
  .max-lg\:d-flex-col {
    display: flex;
    flex-direction: column;
  }
  
  .max-lg\:p-3 { padding: 1rem !important; }

  .max-lg\:w-50 { width: 50% !important; }
  .max-lg\:w-75 { width: 75% !important; }
}

@media (min-width: 992px /* lg */) {
}

/* Sizing */
.w-fit { width: fit-content; }
.w-35 { width: 35%; }
.w-max-250px { max-width: 350px; }

.h-fit { height: fit-content; }
.h-550px { height: 550px; }

.size-25px {
  width: 25px;
  height: 25px;
}

/* Text */
.fw-900 { font-weight: 900; }

/* Buttons */
.btn-cta {
  letter-spacing: 1px;
  background-color: var(--green-200);
  &:hover {
    background-color: var(--green-200);
  }
}

/* Hover animations */
.hover\:text-underline {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

.hover\:scale {
  transition: 0.25s ease-in-out;
  &:hover {
    transform: scale(1.1);
  }
}
/* END BOOTSTRAP-LIKE CLASSES */

/* signup.php */
#signup {
    & #logo {
        width: 10%;
    }
}

/* signin.php */
#signin {
    & #logo {
        width: 10%;
    }
}

/* courses.php */
#courses {
    & .course-img {
        aspect-ratio: 1/1;
        height: 160px;
        background-size: cover;
        background-position: center;
    }
}

/* contact.php */
#contact {
    & #message {
        height: 100px;
    }
}