@import url(https://fonts.bunny.net/css?family=cabin:400,400i,500,600,700);

* {
  box-sizing: border-box;
  font-family: var(--font-base);
}

html {
  font-size: 62.5%;
}

* {
  margin: 0;
  padding: 0;
}

button, input {
  font-size: inherit;
}

input {
  outline: none;
}

fieldset, button {
  border: none;
}

:root {
  --font-base: "Cabin", "Trebuchet MS", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
  --heading-font-weight: 600;
  --colour-semantic-text-muted: hsla(0, 0%, 48%, 1);
  --colour-semantic-text-heading: hsla(177, 100%, 14%, 1);
  --colour-brand-green: hsla(173, 56%, 44%, 1);
  --colour-brand-green-light: hsla(175, 93%, 33%, .6);
  --colour-brand-darker-green: hsla(174, 98%, 20%, 1);
  --colour-brand-pastel-green: hsla(174, 45%, 96%, 1);
  --colour-brand-pastel-blue: hsla(224, 58%, 96%, 1);
  --colour-semantic-success: hsla(173, 56%, 44%, 1);
  --colour-semantic-success-darker: hsla(174, 98%, 20%, 1);
  --colour-semantic-text-body: hsla(0, 0%, 14%, 1);
  --colour-semantic-link: hsla(224, 59%, 53%, 1);
  --colour-semantic-danger: hsla(0, 90%, 63%, 1);
  --colour-semantic-danger-darker: hsla(0, 91%, 30%, 1);
  --colour-semantic-danger-pastel: hsla(0, 81%, 96%, 1);
  --colour-semantic-warning:        hsla(49, 83%, 61%, 1);
  --colour-semantic-warning-darker: hsla(49, 69%, 47%, 1);
  --colour-semantic-warning-pastel: hsla(48, 81%, 94%, 1);
  --colour-orange-600: hsla(13, 91%, 63%, 1);
  --spacer-unit-3: 2.4rem;
  --byk-c-control-border: #e6e6e6;
  --rounded-corners-2: 0.3rem;
  --shadow-triple-small: 0 0 .4rem rgba(35, 35, 35, .25), 0 0 .8rem rgba(35, 35, 35, .12), 0 0 1.6rem rgba(35, 35, 35, .06);
}

body {
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--colour-semantic-text-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-size: 2.6rem;
  line-height: 1.25;
  color: var(--colour-semantic-text-heading);
}

a {
  display: inline-block;
  color: var(--colour-semantic-link);
}

@media (min-width: 640px) {
  body {
    font-size: 1.8rem;
  }

  h1, h2 {
    font-size: 4rem;
  }
}

form > * + * {
  margin-top: 1.6rem;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

input {
  padding: 1rem 1.2rem;
  border-radius: var(--rounded-corners-2);
  width: 100%;
  color: var(--byk-c-input-text);
  border: 1px solid var(--byk-c-control-border);
}

.error {
  border: 1px solid var(--colour-semantic-danger);
}

.field-helper-text {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 1.4rem;
}

.separator {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  line-height: 1;
}
.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #dee2e6;
}
.separator::before {
  margin-right: 1rem;
}
.separator::after {
  margin-left: 1rem;
}

.error-message {
  color: var(--colour-semantic-danger);
}

.success-message {
  color: var(--colour-semantic-success);
}

.button {
  position: relative;
  height: 4.8rem;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 700;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: 1.6rem;
  flex-shrink: 1;
  width: 100%;
}

.button svg, .button img {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 50%;
  left: 0.8rem;
  transform: translateY(-50%);
}

.button[disabled] {
  pointer-events: none;
  background-color: #c1e7e3;
  cursor: not-allowed;
}

.button--primary {
  background: var(--colour-brand-green);
  color: #fff;
}

.button--primary:hover {
  background: var(--colour-brand-darker-green);
  border-color: var(--colour-brand-darker-green);
  transition: background .18s ease-in-out,border .18s ease-in-out;
}

.button--link {
  background: #4285F4;
  color: #fff;
}

.button--outline {
  background: white;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.084), 0px 1px 1px rgba(0, 0, 0, 0.168);
  color: #232323;
}

.notification {
  padding: 1rem 1.2rem;
  border-radius: var(--rounded-corners-2);
  font-size: 14px;
}

.notification--warning {
  background-color: var(--colour-semantic-warning);
  color: var(--colour-semantic-text-body);
}

.notification--danger {
  background-color: var(--colour-semantic-danger);
  color: var(--colour-semantic-danger-pastel);
}

section {
  width: 100%;

  > * + * {
    margin-top: 1.6rem;
  }
}

h1 {
  margin-bottom: 2.4rem;
}

@media (min-width: 640px) {
  section {
    max-width: 36rem;
  }
}

.clickable {
  cursor: pointer;
}