* {
  box-sizing: border-box;
  margin: 0;
  padding:0;
}
:root {
  --background-color:#000;
  --font-color:#fff;
  --font-weight: bold;
  --font-family: arial;
  --btn-background:yellow;
  --btn-hover-background: green;
  --btn-color: green;
  --display-background:linear-gradient(45deg, yellow, white);
}
#container {
  max-width: 600px;
  width: 100%;
  margin:24px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:20px 0;
  background-color:var(--background-color);
  color:var(--font-color);
  font-family:var(--font-family);
  border-radius:10px;
}
#header {
  margin:15px  0;
  text-align: center;
}
#header h1 {
  font-size: 34px;
  margin-bottom:8px;
}
.description {
  font-size: 20px;
  font-style: italic;
}
.divider {
  border:4px solid yellow;
  margin-bottom:10px;
}
#inputs {
  margin-top:5px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
label {
  text-align: center;
  font-size: 23px;
  font-weight:var(--font-weight);
}
input[type=text] {
  width:50%;
  margin:0 auto;
  padding: 7px 0;
  border-radius: 4px;
}
button {
  width:70%;
  padding:5px 0;
  margin: 0 auto;
  font-size: 18px;
  font-weight: var(--font-weight);
  color: var(--btn-color);
  background-color:var(--btn-background);
  border:2px solid var(--btn-background);
  border-radius:6px;
  margin-top:9px;
}
button:hover {
  background-color:var(--btn-hover-background);
  color:var(--font-color);
  border:2px solid var(--btn-hover-background);
}
.display {
  margin:23px auto 23px auto;
  background: var(--display-background);
  height:72px;
  width:80%;
  border-radius:2px;
  font-size:27px;
  padding:12px;
  color:#000;
  font-weight: var(--font-weight);
  text-align: center;
}
button:active {
  background-color:#000;
  color:#fff;
  border:2px solid #000;
}