:root {
  --background-color-light-khaki: rgb(239, 239, 220);
  --background-color-khaki: rgb(208, 204, 178);
  --background-color-blue: rgb(124, 147, 173);
  --background-color-red: rgb(141, 68, 54);
  --background-color-green: rgb(137, 153, 95);
  --background-color-white: rgb(255, 255, 255);
  --background-color-red-transparent: rgba(104, 50, 39, 0.75);
  --text-color-dark: rgb(74, 74, 74);
  --text-color-light: rgb(255, 255, 255);
  --text-color-red: rgb(141, 68, 54);
}

#contact .contact-form input,
#contact .contact-form textarea,
#contact .contact-form button {
  all: unset;
}

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

@font-face {
  font-family: quicksand;
  src: url("../fonts/quicksand_regular.ttf");
}

a, a:active, a:focus, a:hover, a:visited {
  color: var(--text-color-dark);
  font-weight: bold;
  text-decoration: underline;
}

body {
  background-color: var(--background-color-khaki);
  font-family: quicksand, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

#header {
  align-items: center;
  gap: 20px;
  overflow: hidden;
  padding: 10px;
}

#header a,
#header a:active,
#header a:focus,
#header a:hover,
#header a:visited {
  text-decoration: none;
}

#messages {
  margin-bottom: 20px;
  padding: 0 10px;
}

#messages .message {
  background-color: var(--background-color-blue);
  border-radius: 5px;
  color: var(--text-color-light);
  margin-bottom: 10px;
  padding: 10px;
}

#header div {
  flex-grow: 0;
}

#brand {
  align-items: center;
  background-image: url("../img/index_bg_1.webp");
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--text-color-light);
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.75));
  gap: 5vw;
  justify-content: center;
  overflow: hidden;
  padding: 100px 50px;
}

#brand a,
#brand a:active,
#brand a:focus,
#brand a:hover,
#brand a:visited {
  color: var(--text-color-light);
}

#brand .copy {
  flex-grow: 0;
}

#brand .copy h1,
#brand .copy h2,
#brand .copy h3,
#brand .copy h4,
#brand .copy h5 {
  font-weight: normal;
  margin: 0;
  padding: 0;
}

#brand .copy h1 span,
#brand .copy h2 span,
#brand .copy h3 span,
#brand .copy h4 span,
#brand .copy h5 span {
  background-color: var(--background-color-red-transparent);
}

#brand .image {
  flex-basis: fit-content;
  min-width: 350px;
}

#brand .image img {
  height: auto;
  width: 100%;
}

@media screen and (max-width: 900px) {
  #brand {
    flex-wrap: wrap;
    gap: 40px;
    padding: 75px 10px;
  }

  #brand .copy h1,
  #brand .copy h2,
  #brand .copy h3,
  #brand .copy h4,
  #brand .copy h5 {
    text-align: center;
  }
}

#features {
  align-items: center;
  background-image: url("../img/index_bg_repeat.svg");
  gap: 50px;
  justify-content: center;
  overflow: hidden;
  padding: 75px 50px;
}

#features .screenshot {
  background-color: var(--background-color-red);
  padding: 10px;
}

#features .screenshot img {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.75));
  height: auto;
  max-width: 1000px;
  width: 100%;
}

#features .copy {
  flex-basis: 600px;
}

#features .copy ul.list {
  border-radius: 10px;
  list-style-type: none;
  margin: 0;
  max-width: 600px;
  min-width: 350px;
  padding: 0;
  overflow: hidden;
  width: 100%;
}

#features .copy ul.list > li.list-header {
  background-color: var(--background-color-red);
  color: var(--text-color-light);
  font-size: 1.5em;
  padding: 7px;
  text-align: center;
}

#features .copy ul.list > li.list-subheader {
  background-color: var(--background-color-green);
  color: var(--text-color-light);
  font-size: 1.25em;
  padding: 7px;
  text-align: center;
}

#features .copy ul.list > li.list-item {
  color: var(--text-color-dark);
  padding: 7px;
}

#features .copy ul.list > li.list-item:nth-child(odd) {
  background-color: var(--background-color-white);
}

#features .copy ul.list > li.list-item:nth-child(even) {
  background-color: var(--background-color-light-khaki);
}

@media screen and (max-width: 1200px) {
  #features {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
  }

  #features .screenshot {
    min-width: 350px;
  }

  #features .copy ul.list {
    max-width: 800px;
    overflow: hidden;
  }
}

#testimonial {
  background-image: url("../img/index_bg_2.webp");
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: cover;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.75));
  justify-content: center;
  overflow: hidden;
  padding: 100px 50px 325px 50px;
}

#testimonial .copy {
  max-width: 1000px;
}

#testimonial {
  color: var(--text-color-light);
}

#testimonial h1,
#testimonial h3,
#testimonial h4 {
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.85));
  font-weight: normal;
  margin: 0;
  padding: 0;
}


#testimonial h1 {
  font-size: 3.5em;
}

#testimonial h3 {
  font-size: 2em;
}

#testimonial h4 {
  font-size: 1.5em;
}

#testimonial .quote {
  margin-top: 50px;
}

@media screen and (max-width: 1200px) {
  #testimonial {
    gap: 20px;
    padding: 75px 10px;
  }

  #features .screenshot {
    min-width: 350px;
  }

  #features .copy ul.list {
    max-width: 800px;
    overflow: hidden;
  }
}

#contact {
  background-image: url("../img/index_bg_repeat.svg");
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
  overflow: hidden;
  padding: 75px;
}

#contact h1 {
  color: var(--text-color-light);
  flex-basis: 100%;
  font-size: 2.5em;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: center;
}

#contact h1 span {
  background-color: var(--background-color-red);
}

#contact .contact-form {
  background-color: var(--background-color-green);
  border-radius: 10px;
  max-width: 600px;
  min-width: 350px;
  padding: 20px;
}

#contact .contact-form ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#contact .contact-form form > ul > li {
  margin-top: 5px;
  margin-bottom: 10px;
}

#contact .contact-form ul.errorlist li {
  background-color: var(--background-color-red);
  border-radius: 5px;
  color: var(--text-color-light);
  padding: 5px;
}

#contact .contact-form input,
#contact .contact-form textarea {
  background-color: var(--background-color-white);
  border-radius: 3px;
  padding: 5px 2px;
  width: 100%;
}

#contact .contact-form button {
  background-color: var(--background-color-red);
  border-radius: 3px;
  color: var(--text-color-light);
  padding: 5px 10px;
}

#contact .contact-form span.helptext {
  font-size: .8em;
}

@media screen and (max-width: 900px) {
  #contact {
    gap: 20px;
    padding: 75px 10px;
  }
}

#footer {
  background-color: var(--background-color-red);
  color: var(--text-color-light);
  overflow: hidden;
  padding: 20px;
  text-align: center;
}

#footer a,
#footer a:active,
#footer a:focus,
#footer a:hover,
#footer a:visited {
  color: var(--text-color-light);
}