body {
    background-color: lime;
    color: white;
    font-family: "Comic Sans MS", sans-serif;
    font-size: 20px;
    }

h1 {
    background-image: repeating-linear-gradient(45deg, magenta, blue, orange);
    text-align: left;
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
    animation: rainbow 3s ease infinite;
}

@keyframes rainbow {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 25%
    }

    100% {
        background-position: 0% 50%
    }
}  

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem 1rem;
}

.grid > a {
  text-align: center;
    font-size: 1.6rem;
    color: white;
}

a:hover {
    color: orange;
}

a:visited {
    color: hotpink;
}

.grid > a::before {
  content: '';
  display: block;
  width: 717px;
  height: auto;
  padding-top: 89.1233891%;
  max-width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
}

.grid > a.gift::before {
  background-image: url('giftofgiving.png');
}

.grid > a.gift:hover::before {
  background-image: url('giftborder.png');
}

.grid > a.rave::before {
  background-image: url('rave.png');
}

.grid > a.rave:hover::before {
  background-image: url('raveborder.png');
}

.grid > a.book::before {
  background-image: url('bookcat.png');
}

.grid > a.book:hover::before {
  background-image: url('bookcatborder.png');
}

.warning {
    color: red;
    text-align: center;
}

.cookies {
    color:white;
    text-align:center;
    font-size: 20px;
}