:root {
  --color-primary-blue: hsl(223, 87%, 63%);
  --color-secondary-pale-blue: hsl(223, 100%, 88%);
  --color-secondary-light-red: hsl(354, 100%, 66%);
  --color-neutral-gray: hsl(0, 0%, 59%);
  --color-neutral-dark-blue: hsl(209, 33%, 12%); }

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

html {
  font-size: 62.5%; }

body {
  height: 100vh;
  font-family: "Libre Franklin", sans-serif;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center; }

.header {
  text-align: center; }
  .header__logo {
    display: block;
    margin: 0 auto 4rem auto; }
  .header__span {
    color: var(--color-neutral-gray);
    font-weight: 300; }
  .header__text {
    font-size: 1.8rem; }

.main {
  margin: 0 auto;
  padding: 0 2em; }
  @media only screen and (max-width: 37.5em) {
    .main {
      padding: 0 1em; } }
  .main__form {
    display: flex;
    align-items: baseline; }
    @media only screen and (max-width: 37.5em) {
      .main__form {
        flex-direction: column;
        align-items: stretch;
        padding: 0 1em; }
        .main__form > *:not(:last-child) {
          margin-bottom: 1.5rem; } }
  .main__form-field {
    flex: 0 0 65%; }
  .main__input {
    padding: 1.2em 2em;
    border-radius: 2.7rem;
    border: 0.1rem solid var(--color-secondary-pale-blue);
    width: 95%;
    font-family: inherit; }
    @media only screen and (max-width: 37.5em) {
      .main__input {
        width: 100%; } }
    .main__input:focus {
      outline: none; }
    .main__input:focus::placeholder {
      visibility: hidden; }
    .main__input::placeholder {
      color: var(--color-secondary-pale-blue);
      font-size: 1.6rem;
      font-weight: 300; }
  .main__form-error-text {
    font-size: 1.4rem;
    padding-left: 2em;
    margin-top: 1rem;
    color: var(--color-secondary-light-red);
    display: none; }
    @media only screen and (max-width: 37.5em) {
      .main__form-error-text {
        margin-bottom: 2rem;
        padding: 0;
        text-align: center; } }
  .main__img {
    width: 100%;
    height: auto; }

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-neutral-gray);
  font-size: 1.4rem; }
  .footer > *:not(:last-child) {
    margin-bottom: 1.5rem; }
  .footer__icon-container {
    display: flex;
    justify-content: center; }
    .footer__icon-container > *:not(:last-child) {
      margin-right: 1.2rem; }
  .footer__social-media-link:hover .footer__social-media-icon {
    fill: #fff;
    background-color: var(--color-primary-blue); }
  .footer__social-media-icon {
    width: 3.2rem;
    height: 3.2rem;
    box-shadow: 0 0px 3px var(--color-secondary-pale-blue);
    border-radius: 50%;
    padding: 0.4em;
    fill: var(--color-primary-blue);
    transition: all 0.1s; }
  .footer__attribution {
    text-align: center; }
    .footer__attribution a {
      color: var(--color-primary-blue);
      text-decoration: none;
      transition: all 0.1s; }
      .footer__attribution a:hover {
        opacity: 0.8; }

.container {
  margin: auto 0;
  max-width: 80rem;
  padding: 2em; }
  @media only screen and (max-width: 37.5em) {
    .container {
      padding: 2em 0; } }

@media only screen and (max-width: 37.5em) {
  .heading-primary {
    font-size: 3.5rem; } }

@media only screen and (max-width: 25em) {
  .heading-primary {
    font-size: 3rem; } }

.btn {
  cursor: pointer;
  border: none;
  font-family: inherit; }

.btn-submit {
  background-color: var(--color-primary-blue);
  padding: 1em 1em;
  border-radius: 2.7rem;
  color: #fff;
  font-size: 1.6rem;
  flex: 0 0 35%;
  box-shadow: 0 3px 4px var(--color-primary-blue);
  transition: all 0.1s;
  backface-visibility: hidden; }
  .btn-submit:hover {
    transform: translateY(-1px);
    opacity: 0.9; }
  .btn-submit:active {
    transform: translateY(1px);
    box-shadow: none;
    outline: none; }
  .btn-submit:focus {
    outline: none; }

.u-mb-sm {
  margin-bottom: 2rem; }

.u-mb-m {
  margin-bottom: 4rem; }

.u-mb-b {
  margin-bottom: 6rem; }

.active {
  display: block; }

.red {
  border-color: var(--color-secondary-light-red);
  color: var(--color-secondary-light-red); }