:root {
  color-scheme: light dark;
}

main.stars {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 1.6rem;
  overflow-y: scroll;
}

#measurement-inputs {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: space-evenly;
  gap: 1rem;
}
#measurement-inputs input,
#measurement-inputs button {
  border: 1px solid lightgrey;
  background-color: rgba(56, 56, 56, 0.1);
  border-radius: 0.5rem;
  backdrop-filter: blur(1rem);
  padding: 0.5rem;
  outline: none;
}
#measurement-inputs input:hover,
#measurement-inputs button:hover {
  cursor: pointer;
  border-color: turquoise;
}
#measurement-inputs input:active, #measurement-inputs input:focus-within,
#measurement-inputs button:active,
#measurement-inputs button:focus-within {
  border-color: lightseagreen;
}

#output {
  border: 0.2rem darkslategrey solid;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(1rem);
}
#output #star {
  width: 5rem;
  height: 5rem;
  clip-path: none;
  background-color: lightseagreen;
}
#output #code {
  overflow: scroll;
  max-height: 20rem;
  font-family: monospace;
  font-size: large;
}
#output #code::before {
  color: gray;
  content: "clip-path: ";
}
#output #code::after {
  color: gray;
  content: ";";
}

/*# sourceMappingURL=styles.css.map */