body {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: url(./pexels-miguel-á-padriñán-19677.jpg) no-repeat center/cover;
  font-family: Georgia, "Times New Roman", Times, serif;
}
:root {
  --light-c: #ddd;
  --dark-c: #111;
  --text-shadow: 4px 5px 10px rgba(0, 0, 0, 0.5);
}
h1 {
  font-size: 3rem;
  font-weight: bolder;
  color: var(--light-c);
  margin: 2rem 0;
  text-shadow: var(--text-shadow);
  /* text-align: center; */
}
h1 span {
  background-color: var(--dark-c);
  color: var(--light-c);
  padding: 0.1rem 2rem;
}
label,
input {
  color: #fff;
  font-size: 2rem;
  /* margin: 0 0 0 900px; */
}
.container {
  width: 350px;
  height: 350px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.8);
  margin: 2rem auto;
  /* text-align: center; */
  padding: 10px;
}
.element {
  width: 100px;
  height: 100px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--light-c);
  text-shadow: var(--dark-c);
  border-radius: 5px;
}
.element:hover {
  cursor: pointer;
  box-shadow: inset 0 0 100px 5px rgba(0, 0, 0, 0.4);
}