@font-face {
  font-family: "Nasa";
  src: url("../fonts/Nasa.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir";
  src: url("../fonts/Avenir-Roman.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html,
body {
  height: 100%;
  width: 100%;
  background-color: rgb(2, 54, 93);
}

body {
  font-family: "Avenir", sans-serif;
  background-color: rgb(2, 54, 93);
  color: rgb(255, 255, 255);
  font-size: 1.25rem;
  margin: 0;
  padding: 0;
  accent-color: rgb(255, 218, 49);
  background: linear-gradient(rgb(21, 26, 41) 0%, rgb(2, 54, 93) 100%);
}

header {
  padding: 24px 64px;
}

header.start-page {
  padding-inline-start: 88px;
}

main {
  padding-block-end: 196px;
}

body:has(main.start-page) {
  /* padding: 32px; */
  height: 100%;
  background: url("/assets/img/gemini.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

section {
  width: 1000px;
  margin: 0 auto;
}

h1,
h2 {
  font-family: "Nasa", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

h1 {
  font-size: 4rem;
  text-align: center;
  margin-block-end: 1rem;
  margin-block-start: 16px;
}

h2 {
  font-size: 2.5rem;
  margin-block-start: 0;
  margin-block-end: 1rem;
}

section {
  margin-block-start: 2rem;
  margin-block-end: 4rem;
}

form > div {
  display: flex;
  margin-block-end: 16px;
  &:last-of-type {
    margin-block-end: 32px;
  }
}

pre {
  max-width: 80ch;
  white-space: pre-wrap;
  text-align: left;
}

.error {
  background-color: rgb(181, 24, 0);
  color: rgb(255, 255, 255);
  font-size: 1.25rem;
  margin-block: 1rem;
  width: fit-content;
  margin: 0 auto;
  padding: 16px 32px;
  border-radius: 4px;
}

button {
  background-color: rgb(2, 54, 93);
  color: white;
  padding: 12px 24px;
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid rgb(255, 255, 255);
}

label {
  display: inline-block;
  width: 175px;
}
textarea,
input {
  font-size: 1rem;
}

textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid rgb(255, 255, 255);
  field-sizing: content;
  max-width: 80ch;
}

fieldset {
  border: none;
  padding: 0;
  display: flex;
  legend {
    padding: 0;
    display: block;
    float: left;
    width: 175px;
    min-width: 175px;
  }
  div {
    display: flex;
    flex-wrap: wrap;
  }
  label {
    float: left;
    width: 150px;
  }
}

section.center {
  text-align: center;
}

audio {
  margin-block-end: 24px;
}

.prompt-image {
  width: 100%;
  max-width: 450px;
  height: auto;
  border-radius: 4px;
}

time {
  display: block;
}

figcaption {
  font-size: 1rem;
  max-inline-size: 80ch;
  text-wrap: balance;
  margin: 0 auto;
  display: block;
  padding-block-start: 0.5rem;
  padding-block-end: 0.5rem;
}