@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

html,
body {
  height: 100%;
  font-family: "Poppins", sans-serif;
  background-image: linear-gradient(150deg, #8e2de2, #4a00e0);
}
.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  min-height: 100%;
  background-color: #fafafa;
  display: grid;
  grid-template-rows: auto 1fr auto;
  box-shadow: -3px 0 6px rgba(0, 0, 0, 0.2), 3px 0 6px rgba(0, 0, 0, 0.2);
}
nav .container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  background-color: #000;
  color: #fafafa;
}
nav .container h1 {
  margin-left: 1rem;
}
nav .container ul {
  height: 100%;
  display: flex;
  align-items: center;
}
nav .container ul li {
  margin: 0 1rem;
}
footer {
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  color: #fafafa;
}