body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #FFFA8D;
  text-align: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* "I Want..."  */
h1 {
  color: #565546;
  margin-bottom: 0.5em;
  font-size: 6em;
}
/* Styling for inner card */
.l a {
  width: 100vw;
  font-size: 6em;
  text-decoration: none;
  display: flex;
  justify-content: center;
  transition: filter .6s, transform .6s;
}

.l a:hover {
  filter: brightness(115%);
  transform: scale(1.02);
}


/* START OF LINK STYLINGS */
.math a {
  background-color: rgb(147, 234, 240);
  color: rgb(66, 107, 110);
}
.vocab a {
  background-color: rgb(147, 240, 153);
  color: rgb(62, 103, 65);
}
.safevdanger a {
  background-color: rgb(198, 250, 78);
  color: rgb(95, 121, 37);
}
.reading a {
  background-color: rgb(78, 150, 250);
  color: rgb(37, 78, 121);
}
.exercise a {
  background-color: rgb(88, 219, 249);
  color: rgb(103, 100, 255);
}
.drawing a {
  background-color: rgb(255, 100, 136);
  color: rgb(152, 54, 100);
}
.time a {
  background-color: rgb(147, 240, 206);
  color: rgb(29, 82, 71);
}
.shapes a {
  background-color: rgb(156, 157, 203);
  color: darkblue;
}
.colors a{
  background-color: rgb(255, 255, 255);
  color: black;
}

.emotions a{
  background-color: rgb(250, 207, 17);
  color: rgb(56, 53, 14);
}

@media screen and (max-width: 480px) {
    /* "I Want..."  */
  h1 {
    color: #565546;
    margin-bottom: 0.5em;
    font-size: 3em;
  }
  /* Styling for inner card */
  .l a {
    width: 100vw;
    font-size: 3em;
    text-decoration: none;
    display: flex;
    justify-content: center;
    transition: filter .6s, transform .6s;
  }
}