body {
  background-color:  #ecf0f3;
  /* background-image: url("https://images.pexels.com/photos/370984/pexels-photo-370984.jpeg?auto=compress&cs=tinysrgb&w=1600"); */
  text-align: center;
 font-size: 17px;
  
}
.container {
  width: 350px;
  height: 500px;
  background-color: #ecf0f3;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border-radius: 15px;
  box-shadow: 12px 12px 20px #cbced1, -12px -12px 20px #ffffff;

}
.header {
  background-color: black;
  color: azure;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
button {
  margin: 20px auto;
  width: 150px;
  height: 40px;
  font-size: 20px;
  /* background-color: black; */
  border: none;
  font-weight: 600;
  color: black;
  border-radius: 10px;
  box-shadow: 5px 5px 8px hsla(0, 11%, 82%, 0.815),
              -5px -5px 8px #dcc7c7;
}
button:hover {
  background-color: rgb(208, 208, 219);
  color: black;
  border-radius: 10px;
}
input,
select {
  width: 85%;
  border: none;
  border-bottom: 1px solid green;
  padding: 10px;
  border-radius: 8px;
}

.tip{
  margin: auto;
  margin-top: 20px;
  font-size: 25px;
  text-align: left;
  width: 90%;
  height: auto;
  outline: none;
  padding: 0.5em;
  box-shadow:inset 8px 8px 8px #cbced1,
             inset -8px -8px 8px#ffffff; ;
}