style.css

:root {
  font-family: sans-serif;
  height: 100vh;
  background-color: #eceff4;
}

body {
  height: inherit;
  margin: 0;
}

#header,
#footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4c566a;
  box-sizing: border-box;
  padding: 20px;
}

#header {
  height: 50px;
}

#footer {
  height: 250px;
}

#main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 300px);
}

#title {
  color: #d8dee9;
}

#container {
  height: inherit;
  width: 100%;
}

#form {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  width: 250px;
}

input {
  border: none;
  border-radius: 15px;
  padding: 10px;

  transition: all 0.5s;
}

.form-section {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.form-section > label {
  color: #d8dee9;
}

input[type="file"] {
  display: none;
}

input[type="file"]:invalid + label {
  border-color: #bf616a;
}

input[type="file"]:valid + label {
  border-color: #a3be8c;
}

form:invalid button[type="submit"] {
  background-color: #4c566a;
  border-color: #b48ead;
}

*:focus {
  outline: none;
  border: 5px solid #8fbcbb;
}

.input-file,
button {
  display: inline-block;
  background-color: #4c566a;
  font-size: 16px;
  border: 5px solid #88c0d0;
  color: #d8dee9;
  border-radius: 15px;
  padding: 6px 12px;
  cursor: pointer;
  text-align: center;
  width: 100%;

  transition: all 0.5s;
}

.input-file:hover,
form:invalid button[type="submit"]:hover,
button:hover {
  background-color: #2e3440;
  color: #d8dee9;
}

button:active {
  transform: translateY(2px);
}