:root {
  --color-black: #000000;
  --color-dark-navy: var(--color-black);

  /* Color values */
  --color-green-100: #2282f4;
  --color-navy: var(--color-black);
  --color-blue: #2282f4;
  --color-green-20: #2282f4;
  --color-navy-8: var(--color-white);
  --color-navy-3: var(--color-black);
  --color-grey: var(--color-white);
  --color-white: #ffffff;

  --color-dark-blue-grey: #7c98b5;

  /* Theme colors */
  --color-brand-primary: var(--color-green-100);
  --color-brand-secondary: var(--color-white);
  --color-theme-1: var(--color-green-20);
  --color-theme-2: var(--color-navy-8);
  --color-theme-3: var(--color-navy-3);

  --color-theme-bg: var(--color-black);
  --color-theme-fg: var(--color-white);
}

.btn-primary {
  background-color: var(--color-brand-primary);
  color: var(--color-brand-secondary);
}

.btn-theme-2,
.btn-theme-1 {
  background-color: var(--color-theme-1);
  color: var(--color-brand-secondary);
}

.group:hover .btn-theme-2,
.btn-theme-2:hover,
.group:hover .btn-theme-1,
.btn-theme-1:hover {
  background-color: var(--color-brand-primary);
  color: var(--color-brand-secondary);
}

.btn-layout {
  background-color: transparent;
  border: 1px solid white;
}

.btn-layout:hover {
  border-color: transparent;
}

body {
  background-color: var(--color-theme-bg);
  color: var(--color-theme-fg);
}

footer {
  position: relative;
}

footer > * {
  position: relative;
}

.header-logo:hover path {
  fill: var(--color-blue);
}

.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-body) Arial sans-serif;
}

.h1 {
  font-weight: 800;
  text-transform: uppercase;
  font-style: italic;
}

.h2 {
  font-weight: 800;
  text-transform: uppercase;
  font-style: italic;
}

.h4 {
  font-weight: 800;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1;
}

.body-regular {
  font-weight: 400;
}

.input-textarea,
.form-textarea,
.form-select,
.form-input {
  background-color: #ffffff;
  color: #000000;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 0;
}

.form-textarea::placeholder,
.form-input::placeholder {
  opacity: 0;
}

.form button {
  background: #e48361;
}

.form .field:has(textarea) {
  grid-column: 1 / span 2;
}

.form .input-textarea {
  min-height: 275px;
}

.form .field {
  width: 100%;
}