header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 15px;
  font-size: 32px;
  color: #f9d5e5;
}

body {
  height: calc(98vh + 3px);
  background-image: linear-gradient(-210deg, #6441a5 20%, #2a0845);
}

a {
  color: inherit;
  text-decoration: none;
}

.center-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.grid-container {
  display: grid;
  grid-template-columns: [first] 200px [second] 200px [third] 200px;
  grid-template-rows: [first] 200px [second] 200px [third] 200px;
  margin-top: 100px;
  height: 620px;
  width: 620px;
  border: 3px solid rgba(249, 213, 229, 0.7);
  border-radius: 7%;
}

.grid-box {
  margin: 15px;
  padding: 15px;
  border-radius: 7%;
  border: 2px solid #2a0845;
  background: linear-gradient(
    -210deg,
    rgba(196, 197, 199, 0.18) 0%,
    rgba(235, 235, 235, 0.18) 52%,
    rgba(220, 221, 223, 0.18) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-box:hover {
  background: linear-gradient(
    -180deg,
    rgba(196, 197, 199, 0.25) 0%,
    rgba(235, 235, 235, 0.25) 52%,
    rgba(220, 221, 223, 0.25) 100%
  );
}

.grid-item {
  color: #f9d5e5;
  display: flex;
  flex-direction: column;
  margin: 25px;
}

.back-arrow {
  opacity: 0.75;
}

.back-arrow:hover {
  opacity: 1;
}