/* Color Palette */
:root {
  --PrimaryColor: #5f8369; /* Buttons, highlights, logo */
  --SupportingColorWhite: #f8f6f0; /* Backgrounds */
  --SupportingColorGray: #a8b2a1; /* Backgrounds */
  --SupportingColorSlate: #2e2e2e; /* Body text, footer */
  --AccentColorRose: #c27664; /* Accent buttons, sections, icons */
  --AccentColorGold: #d4b483; /* Accent buttons, sections, icons */
  --HighlightColorGrace: #afcfea; /* Quotes, testimonials, spiritual touchpoints */
}

body {
  height: 100dvh;
}

.page-content {
  background-image: url("/public/media/backgrounds/loginBack.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100dvh;
}

.bg-light-custom {
  background-color: var(--SupportingColorWhite);
}

.text-primary-custom {
  color: var(--PrimaryColor);
}

.tf-patrick {
  font-family: "Patrick Hand";
}

.btn-primary-custom {
  background-color: var(--PrimaryColor) !important;
  color: white !important;
  border: none;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  border-radius: 0.375rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
  width: 300px;
}

.btn-primary-custom:hover,
.btn-primary-custom:focus {
  background-color: #4a6653;
  box-shadow: inset 0 0 12px -2px var(--SupportingColorSlate) !important;
}

.welcomeHeader {
  font-size: 28pt;
}

.chosenLogo {
  height: 200px;
  box-shadow: 0 0 8px 5px var(--SupportingColorSlate);
  border-radius: 50%;
}

.signin3rdbtn {
  height: 3em;
  width: 300px;
  display: flex;
  box-shadow: 0 0 4px -2px var(--SupportingColorSlate);
}

.signin3rdbtn:hover,
.signin3rdbtn:focus {
  box-shadow: 0 0 3px 2px var(--SupportingColorSlate);
}

.signin3rdbtn > img {
  height: 1.5em;
  width: 1.5em;
  margin: auto;
}

/* Container for each input/label pair */
.floating-group {
  position: relative;
  margin-bottom: 1.5rem;
}

/* Style the input */
.floating-group input {
  width: 100%;
  padding: 1rem 0.75rem 0.25rem;
  font-size: 1rem;
}

/* Style the label inside the input */
.floating-group label {
  position: absolute;
  top: 0.8rem;
  left: 0.2rem;
  transition: all 0.2s ease;
  color: #777;
  padding: 0 0.25rem;
  pointer-events: none;
  font-size: 1rem;
}

/* Move label up and shrink when input is focused or not empty */
.floating-group input:focus + label,
.floating-group input:not(:placeholder-shown) + label {
  top: -0.2rem;
  font-size: 0.8rem;
  color: var(--PrimaryColor); /* Your primary color */
}

.form-control {
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3) !important;
  background: var(--SupportingColorWhite) !important;
  transition: all 0.3s ease;
}

.form-control:hover,
.form-control:focus {
  box-shadow: none !important;
  border-bottom: 1px solid var(--SupportingColorSlate) !important;
}

.logoSection {
  width: 50%;
  height: 100dvh;
}

.logoSection > img {
  height: 400px;
}

.formSection {
  width: 50%;
  min-height: 100dvh;
}

@media (max-width: 768px) {
  body {
    overflow-y: scroll;
    height: fit-content;
  }
  .logoSection {
    width: 100%;
    height: 30%;
    padding: 2rem 0;
  }

  .formSection {
    position: absolute;
    width: 100%;
    min-height: 70dvh;
    bottom: 0;
    border-radius: 2rem 2rem 0 0;
    overflow-y: hidden;
  }

  .btn-primary-custom,
  .signin3rdbtn {
    width: 100%;
    max-width: 300px;
    margin: auto;
  }
  .logoSection > img {
    height: 200px;
  }
}

a {
  text-decoration: none;
  color: inherit;
}