body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

#grid {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 1fr;
}

/*Header*/
header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  background-image: url(https://concepto.de/wp-content/uploads/2019/02/paisaje-natural-item-5.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  filter: grayscale(100%);
}

h1 {
  text-align: center;
  font-size: 3.5em;
}

nav ul {
  display: flex;
  justify-content: center;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  text-decoration: none;
  padding: 5px 12px;
  color: whitesmoke;
}

nav ul li a:hover {
  text-shadow: 2px 2px 20px #333;
}

/*main*/
main {
  background-color: #fff;
  display: grid;
  grid-template-areas: "alumnes recursos";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 1rem;
  margin: 50px 0 0;
}

.alumnes, .recursos {
  display: grid;
  width: 20rem;
  height: 15rem;
  margin: 0 auto;
  color: whitesmoke;
  border: 1px solid whitesmoke;
  border-radius: 8px;
}

.alumnes:hover,
.recursos:hover {
  filter: drop-shadow(16px 16px 20px #333);
  background-color: #000;
  opacity: 0.1;
}

.alumnes h2,
.recursos h2 {
  font-size: 3em;
  align-self: center;
  text-align: center;
  color: whitesmoke;
}

.alumnes h2:hover {
  filter: drop-shadow(16px 16px 20px #333);
}

/*footer*/
footer {
  background-color: #333;
  color: whitesmoke;
  display: flex;
  justify-content: center;
}

footer p {
  font-size: calc(75%);
  align-self: flex-end;
}

/*# sourceMappingURL=style.css.map */