:root {
  --cofinco-blue: #406e8d;
  --cofinco-white: #ffffff;
  --cofinco-grey: #b5b5b5;
  --cofinco-grey-dark: #656666;
}

@font-face {
  font-display: swap;
  font-family: Fira Sans;
  font-style: normal;
  font-weight: 300;
  src: url(https://mailing.cofinco.nl/uploads/fira-sans-latin-300.woff2)
    format("woff2");
}

@font-face {
  font-display: swap;
  font-family: Fira Sans;
  font-style: normal;
  font-weight: 500;
  src: url(https://mailing.cofinco.nl/uploads/fira-sans-latin-500.woff2)
    format("woff2");
}

body {
  background-image: linear-gradient(
    to bottom right,
    var(--cofinco-blue),
    transparent
  );
  background-image:
    linear-gradient(to bottom right, var(--cofinco-blue), transparent),
    url(https://mailing.cofinco.nl/uploads/background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  font-family:
    Fira Sans,
    sans-serif;
  color: #4a4a4a;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
}

a {
  color: var(--cofinco-blue);
  text-decoration-color: var(--cofinco-blue);
}

input {
  font-family: Fira Sans;
  border-color: var(--cofinco-grey);
  border-radius: 2px;
  &:focus,
  &:active {
    outline: none;
    border-color: var(--cofinco-grey-dark);
    box-shadow: 0 0 0 0.125em hsla(180, 0%, 40%, 0.25);
  }
}

footer.container {
  color: var(--cofinco-white);
  a {
    color: var(--cofinco-white);
    text-decoration: underline;
    &:hover {
      text-decoration: none;
    }
  }
}

.wrap {
  box-shadow: unset;
  border-color: var(--cofinco-grey);
  border-radius: 2px;
}

@media screen and (max-width: 650px) {
  .wrap {
    margin: 1rem;
  }
}

button,
.button {
  font-family: Fira Sans;
  background-color: var(--cofinco-blue);
  color: var(--cofinco-white);
  border: 1px solid var(--cofinco-blue);
  border-radius: 2px;
  padding: calc(0.5em - 1px) 1em;
  font-weight: 500;
  font-size: 1rem;

  &:hover {
    background-color: var(--cofinco-white);
    color: var(--cofinco-blue);
    border-color: var(--cofinco-blue);
  }
}