@charset "UTF-8";



header > div {
  display: flex;
  justify-content: space-between;
} header > h1 {
  padding-right: 1em;
}



  main > div ,
  header > div {
  max-width: 34em;
} main > div:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  padding: 1em 0.75em;
  gap: 1em;
} main > div:nth-of-type(2) > * {
  margin: 0em;
}



div#nasci {
  align-items: center;
  display: flex;
  gap: 0.5em;
} div#nasci > p {
  padding: 0.25em;
  white-space: nowrap;
} div#nasci > input {
  font-size: 1em;
  padding: 0.1em;
  text-align: center;
  width: 100%;
}



div#gener {
  text-align: right;
  border-radius: 0.5em;
  padding: 0.75em 0.2em;
  background-color: var(--color-light-grey-02);
} div#gener > * {
  align-items: baseline;
  line-height: 1.5em;
  margin: 0.2em;
  display: inline-flex;
  align-items: center;
  min-width: 7em;
  padding: 0.25em;
} div#gener > p {
  min-width: 3.5em;
} div#gener > label {
  background-color: var(--color-lighter-white-02);
  border-radius: 0.25em;
} div#gener > label > input {
  margin: 0em 0.5em;
}



input#ver {
  font-size: 1em;
  color-scheme: var(--color-lighter-white-02);
  padding: 0.2em 0.35em;
  width: fit-content;
} div#res {
  border-radius: 0.5em;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1.5em;
  padding: 1.25em 0.75em;
  background-color: var(--color-light-grey-02);
} div#res > p {
  max-width: 80%;
} div#res > img {
  width: 80%;
}



@media screen and (max-width: 600px) {

    div#nasci {
        display: block;
    } div#gener p {
        text-align: right;
        width: 100%;
        max-width: 100%;
    }
}