@import "header.css";
@import "picker.css";
@import "breadcrumb.css";
@import "colours.css";
@import "about.css";
@import "contact.css";

.root {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 20px;
  text-align: center;
  max-width: 1028px;
  margin: 0 auto;
}

@media (max-width: 1023px) {
  .root {
    padding: 64px 30px;
  }
}

.content {
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
}

html {
  font-size: 16px;
}

@media (max-width: 1023px) {
  h1,
  h2,
  h3,
  p {
    font-size: 1.5em;
  }

  .content {
    width: 100%;
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  h1,
  h2,
  h3,
  p {
    font-size: 1em;
  }
}

html:before {
  content: "";
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: -1;
  /* fallback */
  background: var(--bg-gradient-start);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, var(--bg-gradient-start)),
    color-stop(100%, var(--bg-gradient-end))
  );
  background: -webkit-radial-gradient(
      ellipse at top,
      transparent,
      var(--bg-gradient-start)
    ),
    -webkit-radial-gradient(ellipse at bottom, transparent, var(--bg-gradient-end));
  background: -moz-radial-gradient(
      ellipse at top,
      transparent,
      var(--bg-gradient-start)
    ),
    -moz-radial-gradient(ellipse at bottom, transparent, var(--bg-gradient-end));
  background: -ms-radial-gradient(
      ellipse at top,
      transparent,
      var(--bg-gradient-start)
    ),
    -ms-radial-gradient(ellipse at bottom, transparent, var(--bg-gradient-end));
  background: -o-radial-gradient(
      ellipse at top,
      transparent,
      var(--bg-gradient-start)
    ),
    -o-radial-gradient(ellipse at bottom, transparent, var(--bg-gradient-end));
  background: radial-gradient(
      ellipse at top,
      transparent,
      var(--bg-gradient-start)
    ),
    radial-gradient(ellipse at bottom, transparent, var(--bg-gradient-end));
}