* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  color: #e2e1e1;
  min-height: 100vh;
  align-items: center;
  background: #4f5c63;
  justify-content: center;
}


header,
footer {
  background: #4f5c63 !important;
  box-shadow: 5px 5px 12px #424d53, -5px -5px 12px #5c6b73 !important;
}

.container {
  width: 100%;
  margin: 10px;
  display: grid;
  padding: 20px;
  color: #000;
  max-width: 80vw;
  text-align: center;
  align-items: center;
  border-radius: 15px;
  background: #4f5c63;
  justify-content: center;
  box-shadow: 10px 10px 20px #434e54, -10px -10px 20px #5b6a72;
}

.inputs {
  margin-block-end: 25px;
}

.inputField {
  width: 45%;
  padding: 10px;
  margin: 10px 5px;
  border-radius: 5px;
  display: inline-block;
  border: 1px solid #ccc;
}

.btns {
  margin-block-end: 25px;
}

.btns button {
  width: 40%;
  margin: 8px;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  display: inline-block;
  border: 1px solid #66777f;
  background-color: #66777f;
  box-shadow: 4px 4px 7px #3a4348, -4px -4px 7px #4e5b62;
}