@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Fira+Code&display=swap');

* {
    transition: .3s;
}

.r-text {
    font-size: 5rem;
    font-family: 'Cherry Bomb One', cursive;
    font-weight: 100;
}

.r-text .char { 
    color: hsl(
      calc(360deg * var(--char-percent)
      ), 
      90%, 
      65%
    );  
}
  
.r-text .char {
    animation: rainbow-colors 2s linear infinite;
    animation-delay: calc(-2s * var(--char-percent));
}

@keyframes rainbow-colors {
    0% { color: hsl(0turn, 90%, 65%); }
    25% { color: hsl(.25turn, 90%, 65%); }
    50% { color: hsl(.5turn, 90%, 65%); }
    75% { color: hsl(.75turn, 90%, 65%); }
    100% { color: hsl(1turn, 90%, 65%); }
}

h2 {
    font-family: 'Fira Code', serif;
}

.grid img {
    border-radius: .8rem;
    width: 27rem;
    height: 27rem;
    border: .2rem solid #fff;
}

.grid img:hover {
    border: .5rem solid;
    border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
	animation: 5s rotate linear infinite;
}

a.disabled {
    pointer-events: none;
    cursor: default;
  }

@keyframes rainbow{
    100%{
        background-position: 0 35em;
    }
}

@keyframes rotate {
	to {
		--angle: 360deg;
	}
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}


@media (max-width: 750px) {
    .r-text {
        font-size: 4.5rem;
    }

    .grid img {
        
    }
}