body {
    background-color: black;
}

#grid-container {
    display: grid;
    grid-template-columns: 1fr 20fr 1fr;
}

#letters {
    text-align: center;
}

.letter {
    display: inline-block;
    padding: 8px;
}

.letter-background {
    background-image: url("covers/grating_rainbows.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    animation: filter-animation 9s infinite;
}

.letter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    width: 160px;
    height: 240px;
}

.clear-block {
    background-color: transparent;
}

.black-block {
    background-color: black;
}

@keyframes filter-animation {
    0% {
      -webkit-filter: blur(3px) saturate(0);
    }
    
    50% {
      -webkit-filter: blur(0px) saturate(2);
    }
    
    100% {
      -webkit-filter: blur(3px)saturate(0);
    }
  }