@import "third/sanitize.css";
@import "colors.css";
@import "fonts.css";

.subscribe {
  border: 10px solid var(--accent-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  padding: 10px;
  text-align: center;
  width: 100%;
}

.subscribe.done {
  background-color: var(--accent-color);
}

.heading,
.subheading {
  font-family: var(--title-font);
  line-height: 1;
}

.subscribe.done .heading,
.subscribe.done .subheading {
  color: white;
}

.heading {
  color: var(--accent-color);
  font-size: 44px;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.subheading {
  font-size: 20px;
  margin-bottom: 20px;
}

.control {
  max-width: 400px;
  margin: 0 auto;
}

input,
button,
.smallprint {
  font-family: var(--form-font);
}

input, button {
  padding: 5px;
  width: 100%;
}

input {
  border: 1px solid var(--border-color);
  margin-bottom: 5px;
  text-align: center;
}

button {
  background-color: black;
  border: 1px solid black;
  color: white;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.smallprint {
  font-size: 80%;
}