:root {
  --back-color: #ada785e8;
  --container-color: #2d2f3fe8;
  --text-color: #1b1b32;
  --deco-color: linear-gradient(90deg, #808080 0%, #87ceeb 50%, #808080 100%);
  --red-color: #c7251dd7;
  --Purchase-color: linear-gradient(#fecc4c, #ffac33);
}
body{
  background:var(--back-color);
  color:var(--text-color);
}
main{
  margin:auto;
  text-align:center;
}
h1{
  text-decoration:underline;
  box-shadow: 0 0 30px black,0 0 5px white;
  border-radius:5px;
  width:420px;
  margin:2rem auto;
}
fieldset{
  display:grid;
  gap:0.2rem;
  border:none;
  background:var(--container-color);
  color:white;
  width:60%;
  text-align:center;
  margin:auto;
  }
input{
  font-size:1.2rem;
  padding:5px 0;
  width:50%;
  height:25px;
  text-align:center;
  margin:0 auto;
  border-radius:5px;
  box-shadow: 0 0 30px black,0 0 10px white;
}
.status{

  display:grid;
  border:none;
  background-color:rgb(228, 226, 226);
  width:60%;
  text-align:center;
  margin:auto;
  border-radius:5px;
}
#change-due{
  white-space:pre-line;
  text-align:left;
  margin:auto;
}
button{
  width:25%;
  padding:2px 16px;
  font-weight:bold;
  border:none;
  border-radius:5px;
  font-size:1rem;
  text-align:center;
  margin:0 auto;
  background:var(--Purchase-color);
  transition:0.2s;

}
button:hover{
  cursor:pointer;
  background:gray;
  color:white;
}
.container{
  
  padding-left: 5rem;
}
#register{
  border-top-left-radius:10px;border-top-right-radius:10px;
  padding-left: 5rem;
  padding-top: 2rem;

}
.price{
  color:var(--red-color);
  background-color:white;
  width:60%;
  border:px solid black;
  border-radius:3px;
  padding: 3px;;
  font-size:1.1rem;
  font-weight:bold;
  position:relative;
  top:7px;
  left:10rem;
  z-index:1;
}
.cid{
  white-space:pre-line;
  text-align:left;
  background-color:white;
  color:black;
  width:40%;
  padding:5px 1rem;
  border-radius:2px;
  margin:0.8em 2rem;
}

.deco1{
  background:var(--deco-color);
  width:12%;
  height:90px;
  position:relative;
  left:2rem;
  bottom:1rem;
  border-top-left-radius:1rem;
}
.deco2{
  position:relative;
  bottom:2rem;
  background:var(--deco-color);
  width:50%;
  height:300px;
  border-radius:2rem
}
.deco3{
  background:var(--deco-color);
  width:50%;
  height:40px;
  position:relative;
  left:2rem;
  border-top-left-radius:2rem;
  border-top-right-radius:15px;
  border-bottom-right-radius:15px;
  z-index:1;

}
.deco4{
  background-color:var(--container-color);
  width:40%;
  text-align:center;
  margin:auto;
  padding:1rem;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
}
.deco5{
  background:var(--deco-color);
  width:6%;
  height:20px;
  position:relative;
  border-radius:5rem;
  top:0.7rem;
  left:19.5rem;
}