@keyframes rotate {
    to {
      transform: rotate(360deg);
    }
}

@keyframes rotateInverse {
    to {
      transform: rotate(-360deg);
    }
}

.letters p {
    animation: rotate 90s linear infinite;
}

.letters .reverse {
    animation: rotate 90s linear infinite reverse;
}

@keyframes breath1 {
    from {
      transform:translateY(0px) rotate(12deg) scale(100%)
    }

    to {
        transform:translateY(-20px) scale(93%)
    }
}

@keyframes breath2 {
    from {
      transform:translateY(0px) rotate(-65deg) scale(100%)
    }

    to {
        transform:translateY(-10px) rotate(-49deg) scale(94%)
    }
}

@keyframes breath3 {
    from {
      transform:translateY(0px) rotate(-26deg);
    }

    to {
        transform:translateY(-20px) rotate(-16deg);
    }
}

@keyframes scale {
    from {
      transform: scale(100%);
    }

    to {
        transform:translateY(0px) rotate(-26deg);
    }
}

@keyframes hover {

    from {
        box-shadow: 0 0 0px rgba(255, 255, 255, 0.6), 0 0 0px rgba(255, 255, 255, 0.4), 0 0 0px rgba(255, 255, 255, 0.2);
    }

   to {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.2);
    }
}

.cards img:nth-child(1) {
    animation: breath1 18s ease-in-out infinite alternate;
}

.cards img:nth-child(2) {
    animation: breath2 20s ease-in-out infinite alternate ;
}

.cards img:nth-child(3) {
    animation: breath3 12s ease-in-out infinite alternate;
}

.cards img {
    transition: all 0.3s ease-in-out;
}

.cards img:hover {
    opacity: 90%;
}