@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap');
html{
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top right,	#ddd6f3, #faaca8);
  opacity: 0.8;
}
body{
  margin-top: 4rem;
  font-family: 'Merriweather', serif;
  color: #8b4513;
}

.container{
  display: flex;
  flex-direction: column;
  padding-left: 15vw;
  padding-right: 15vw;
  text-align: center;


}
table{
  width: 100%;
  height: 100px;

}

table, th, td {
  border: 2px ;
  border-style: solid;
  border-color: #ddadaf;
  background-color: #efdecd;


}
button:hover{
  opacity:0.5;
}

td{
  text-align: center;
  padding: 8px;
}

label{
  display: block;
  margin: 1rem 0 1rem 0;
}

input{
  display: block;
  border-radius: 0.5rem;
  border: 2px #8b4513;
  width:100%;
  padding: 1rem 1rem 1rem 1rem;
  background-color:#efdecd;
  box-shadow : 1px 1px #8b4513 ;

}

.inline{
  display:inline;
}
.check-button{
  display: block;
  background-color: #efdecd;
  border-radius: 1rem;
  padding:1rem;
  color: #8b4513;
  border: 2px #8b4513;
  margin: 2% 45% 2% 45%;
  font-size: 16px;
}
#error-msg{
  color: #8b4513;
}