/* 
============== 
THE CSS CODE
==============
*/

:root {
  --ffam: roboto;
  --fsize: 1.2rem;
  --errColor: red;
  font-family: var(--ffam);
  font-size: var(--fsize);
}
form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
}

body > div {
  margin: 5% auto;
  padding: 20px;
  width: fit-content;
  border: 1px outset;
  background-color: lightgrey;
}

input {
  margin-bottom: 20px;
  border: inset;
  font-family: var(--ffam);
  font-size: var(--fsize);
}

p {
  color: var(--errColor);
}

.btn {
  padding: 5px 20px;
  border-radius: 10px;
  font-family: var(--ffam);
  font-size: var(--fsize);
  visibility: disabled;
}

input:focus,
button:focus {
  background-color: darkblue;
  color: white;
}