main{
  padding-top: 120px;
}

legend{
  text-align: center;
  border: 2px solid white;
  color: white;
  padding: 10px 25px;
  font-size: 32px;
  font-weight: 700;
  border-radius: 10px;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6),
  0 0 20px rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.6),
    0 0 10px rgba(255, 255, 255, 0.6);
}

section{
  z-index: 3;
  width: 100%;
  padding: 30px 40px 70px 40px;
}

fieldset{
  border: 2px solid white;
  border-radius: 20px;
  padding: 50px 80px 40px 80px;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6),
  0 0 20px rgba(255, 255, 255, 0.6);
}

.container{
  border: 2px solid white;
  display: inline-block;
  border-radius: 10px;
  padding: 10px 30px;
  background: darkred;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6),
  inset 0 0 10px rgba(0, 0, 0, 0.8);
}

label{
  color: white;
  font-weight: 700;
}

.quantity{
  margin-right: 12px;
}

.input select,
.input input,
.input textarea{
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
  padding: 2px 4px;
  border: none;
  cursor: pointer;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
  outline: none;
  resize: none;
}

option{
  text-align: center;
}

option:hover{
  background-color: rgb(255, 255, 255);
}

.input{
  margin: 10px;
}

.input textarea{
  padding: 5px 10px;
  margin-top: 5px;
}

#grid-container{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px 60px;
}

#button{
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#button input{
  margin: 0 10px;
  background-color: white;
  border: none;
  color: darkred;
  font-weight: bold;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 30px;
  cursor: pointer;
}

#button input:hover{
  background-color: rgb(240, 240, 240);
}

#button input:active{
  background-color: rgb(215, 215, 215);
}