body {
  color: rgb(255, 255, 201);
}

.content {
  padding-top: 180px;
}

.content,
footer {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding-inline: 15px;
}

section,
footer {
  margin-block: 20px;
  max-width: 840px;
}

li {
  display: flex;
  align-items: center;

  svg {
    margin-right: 5px;
  }
}

p,
li {
  font-size: 20px;
}

/* Default Styles */
.glass {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(2px) saturate(180%);
  border: 0.0625rem solid rgba(255, 255, 255, 0.8);
  border-radius: 32px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.7);
}

.glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 32px;
  backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
  inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
  pointer-events: none;
}

.form-container {
  display: flex;
  justify-content: center;

  .card {
    color: #ffffc9;
    max-width: none !important;

    .card-title {
      font-size: 20px;
    }

    .card-text,
    a {
      font-size: 16px;
    }
  }
}

.no-card {
  padding-inline: 20px;

  img {
    width: 100%;
  }
}

.logo-title {
  font-family: 'Brush Script MT', 'Segoe Script', cursive;
  font-size: 40px;
  font-weight: 500;
  background: linear-gradient(
          90deg,
          #E53935,
          #FB8C00,
          #FDD835,
          #43A047,
          #26A69A,
          #1E88E5,
          #FB8C00
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.title {
  font-size: 40px;
  font-weight: 900 !important;
  font-style: italic;
  /*padding-inline: 15px;*/
}

.list-title {
  margin-bottom: 5px;
}

.contact-info {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  text-align: center;
  color: darkgrey;

  h6 {
    margin-bottom: 5px;
    font-size: 20px;
  }

  div {
    margin-top: 10px;

    p {
      font-size: 16px;
      margin: 0;
    }

    button {
      margin: 5px;
    }
  }
}

@media (min-width: 768px) {
  .card {
    max-width: 500px !important;
  }
}