html{
    width: 100vw;
    height: 100vh;
    background-color: #faf7f3;
}
body{
  padding: 0;
  margin: 0;
}
*{
  box-sizing: border-box;
}
body, input, select,button,h2,h3,h1{
    font-family: 'Geist', sans-serif;
    color: #211F1E;
}

h1{
 font-family: 'Zodiak', serif;
 font-size: 38pt;
 margin:0;

}

#welcome h3{
 font-family: 'Zodiak', serif;
 font-weight: 400;
 font-size: 38pt;
 color: #db6437;
 margin:0;

}
#welcome{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12pt;
  text-align: center;
}
#welcome p {
color: #595350;
}
img{
  width: 100%;
}
p{
  margin: 0;
}
list-select .list-option {
    padding: 0;
    border-bottom: 1.5pt #211F1E solid;
    cursor: pointer;
    padding: 1.5rem 0rem;
    padding-right: 3rem;
    background-image: url('/assets/next.svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) 50%;
    background-size: 0.75rem 0.75rem;
  }
list-select .list-option:first-of-type {
    border-top: 1.5pt #211F1E solid;

}
  list-select .list-option:active{
    opacity: 0.7;
  }

 

  list-select .option-label {
    font-weight: bold;
    font-size: 16pt;
    margin-bottom: 8pt;

  }

  list-select .option-description {
    font-size:14pt;
    line-height: calc(14pt * 1.4);
    color: #595350;
  }

h2,h1{
  font-weight: 400;
}

h2{
  font-size: 26pt;

}
  section{
      position: fixed;
      top:0;
      left:0;
      width: 100vw;
      height: 100vh;
      z-index:1;
      background-color: #faf7f3;
  }
  form section{
    opacity: 0;
    pointer-events: none;
  }
  form section:target{
    pointer-events: all;
    opacity: 1;
    z-index: 300;
  }

  back-button{
    cursor: pointer;
    color: #db6437;
    width: 100%;
    max-width: 320pt;
    font-size: 16pt;
    text-align: left;
  }

  fieldset{
    border:0;
    padding: 0;
    margin-bottom: 3rem;
  }
  label{
    font-size: 14pt;
    color: #595350;
    font-weight: 500;
  }
  input[type=text]::placeholder,  input[type=email]::placeholder{
    color: #666462;
    font-weight: 400;
    opacity: 0.5;
  }
  input[type=text],  input[type=email]{
    background-color: transparent;
    border:0;
    display:block;
    padding: 0;
    padding-bottom: 0.5rem;
    padding-top: 0.75rem;
    color: #211F1E;
    width: 100%;

    font-size: 20pt;
    border-bottom: 1.5pt #211F1E solid;
    border-radius: 0pt;
  }

  input[type=text]:focus,  input[type=email]:focus{
    outline: none;
    border-bottom: 1.5pt #db6437 solid;

  }
  a{
    padding: 0.5rem 1rem;
    border:0;
    text-decoration: none;
  }
  button{
    background-color: #db6437;
    padding: 0.75rem 1rem;
    border-radius: 10000pt;
    border:0;
    font-size: 12pt;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 320pt;
    color: #faf7f3;
  }

   section{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
  }

   section main{
    width: 100%;
    max-width: 320pt;
  }