@font-face {
  font-family: "TASA Orbiter";
  src: url("assets/TASAOrbiter-VariableFont_wght.ttf");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hepta Slab";
  src: url("assets/HeptaSlab-VariableFont_wght.ttf");
  font-weight: 1 900;
  font-style: normal;
  font-display: swap;
}

body.color-0 {
  background-color: hsl(191deg, 83%, 60%);
}

body.color-1 {
  background-color: hsl(201deg, 76%, 72%);
}

body.color-2 {
  background-color: hsl(211deg, 66%, 92%);
}

body.color-3 {
  background-color: hsl(221deg, 56%, 100%);
}

body {
  font-family: "Hepta Slab", serif;
  background-color: hsl(191deg, 86%, 52%);
  font-optical-sizing: auto;
  transition: background-color 0.6s;
}

fieldset {
  width: fit-content;
  padding: 1em;
}

input,
select {
  font-family: "Hepta Slab", serif;
  padding: 0.2em;
  background-color: hsl(185deg, 41%, 92%);
  margin: 0.1em;
  border-radius: 0.3em;
  border: solid 3px hsl(200deg, 50%, 62%);
}

[class*="page-name"] {
  top: 145px;
  transition: left 0.6s;
  position: fixed;
  margin: 2rem;
}

article,
form,
div#appointment-form-submitted {
  width: 500px;
}

h3 {
  color: hsl(12, 80%, 20%);
  font-style: italic;
}

p {
  font-family: "TASA Orbiter", sans-serif;
}

.address {
  font-style: oblique;
}

.phone,
.friendly-offer,
.website {
  font-weight: bold;
}

.friendly-offer {
  color: hsl(12, 80%, 20%);
}

.website > a {
  color: black;
  text-decoration: none;
}

main > p,
main > h2,
main > h3 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0.5em;
}

main {
  width: fit-content;
}

.on-screen {
  left: 2rem;
}

.off-right {
  left: 120vw;
}

.off-left {
  left: -120vw;
}

form img {
  display: none;
}

img {
  width: 50vw;
  max-width: 500px;
  border-radius: 1em;
  display: block;
  margin-top: 1em;
}

button {
  font-family: "Hepta Slab", serif;
  padding: 0.3em;
  background-color: hsl(221deg, 71%, 62%, 0.5);
  border-radius: 0.3em;
  border: solid 3px hsla(221deg, 71%, 32%, 0.8);
}

button.language-toggle {
  position: fixed;
  top: 1em;
  right: 1em;
}

button.next-page {
  position: fixed;
  bottom: 1em;
  right: 1em;
}

button.previous-page {
  position: fixed;
  bottom: 1em;
  left: 1em;
}

.inactive {
  display: none;
}

@media (max-width: 700px) {
  img {
    width: 80vw;
  }
}

@media (orientation: portrait) {
  form,
  div#appointment-form-submitted {
    width: 86vw;
  }

  h1 {
    font-size: 100px;
    margin-top: 1em;
  }

  img {
    width: 86vw;
    max-width: none;
  }

  body {
    font-size: 30px;
  }

  main {
    font-size: 50px;
  }

  .brief-pitch {
    text-indent: 4em;
  }

  [class*="page-name"] {
    top: 555px;
  }

  button {
    font-size: 30px;
  }

  select,
  input {
    font-size: 40px;
  }
}

@media (orientation: portrait) and (max-height: 2050px) {
  [class*="page-name"] {
    top: 444px;
  }

  .brief-pitch {
    font-size: 20px;
  }
}

@media (orientation: portrait) and (max-height: 1800px) {
  main {
    font-size: 40px;
  }

  select,
  input {
    font-size: 30px;
  }
}

@media (orientation: portrait) and (max-height: 1550px) {
  body {
    font-size: 20px;
  }

  .brief-pitch {
    font-size: 30px;
  }

  [class*="page-name"] {
    top: 360px;
  }

  img {
    object-fit: cover;
    height: 250px;
    object-position: 0 33%;
  }
}

@media (orientation: portrait) and (max-height: 1300px) {
  h1 {
    font-size: 85px;
  }

  select,
  input {
    font-size: 25px;
  }
}

@media (orientation: landscape) and (max-height: 800px) {
  img {
    object-fit: cover;
    height: 200px;
    object-position: 0 33%;
  }

  [class*="page-name"] {
    top: 100px;
  }

  form {
    font-size: 14px;
    width: 600px;
  }

  form#appointment-request-form > * {
    margin-bottom: 3px;
    margin-top: 3px;
  }
}

@keyframes spinning {
  0% {
    transform: rotate(0turn);
  }
  100% {
    transform: rotate(1turn);
  }
}

div[class*=animation001] > div {
  z-index: 1;
  position: relative;
}

div[class*=animation001] > div > div {
  animation-timing-function: linear;
  animation-name: spinning;
  animation-iteration-count: infinite;
  position: absolute;
  top: -0.5em;
  left: 0px;
  width: 2.5em;
  height: 2.5em;
}