.frame{width:var(--size);height:var(--size);max-width:400px;max-height:400px;margin:0 auto;border:2px #fbfbfb solid;position:relative;box-shadow:inset 0 0 0 20px #fff;background-size:cover;transition:ease all .3s}:root{--duration: 10s;--size: 80vw;--characters: 14;--font-size: 22px;--delay-character: .2s;--text-color-hover: #ff8489}body{height:100vh;display:flex;align-items:center;background-size:cover}.frame{width:var(--size);height:var(--size);max-width:400px;max-height:400px;margin:0 auto;border:2px #fbfbfb solid;position:relative;box-shadow:inset 0 0 0 20px #fff;background-size:cover;transition:ease all .3s;background-image:url(/assets/owl-BvY0RJHc.jpg)}.frame:hover{box-shadow:inset 0 0 #fff;border:2px #f9f9f9 solid;cursor:pointer}.frame:hover .text{mix-blend-mode:difference}.frame:hover .text span{color:var(--text-color-hover)}.frame .text{transform:translate(calc(var(--font-size) * -1 / 2),calc(var(--font-size) * -1 / 2));position:relative;height:100%;transition:ease all .3s}.frame span{font-size:var(--font-size);display:inline-block;text-align:center;width:var(--font-size);animation:frameMove var(--duration) linear infinite;position:absolute;transition:ease all .3s}.frame span:nth-of-type(1){animation-delay:calc(var(--delay-character) * 1)}.frame span:nth-of-type(2){animation-delay:calc(var(--delay-character) * 2)}.frame span:nth-of-type(3){animation-delay:calc(var(--delay-character) * 3)}.frame span:nth-of-type(4){animation-delay:calc(var(--delay-character) * 4)}.frame span:nth-of-type(5){animation-delay:calc(var(--delay-character) * 5)}.frame span:nth-of-type(6){animation-delay:calc(var(--delay-character) * 6)}.frame span:nth-of-type(7){animation-delay:calc(var(--delay-character) * 7)}.frame span:nth-of-type(8){animation-delay:calc(var(--delay-character) * 8)}.frame span:nth-of-type(9){animation-delay:calc(var(--delay-character) * 9)}.frame span:nth-of-type(10){animation-delay:calc(var(--delay-character) * 10)}.frame span:nth-of-type(11){animation-delay:calc(var(--delay-character) * 11)}.frame span:nth-of-type(12){animation-delay:calc(var(--delay-character) * 12)}.frame span:nth-of-type(13){animation-delay:calc(var(--delay-character) * 13)}.frame span:nth-of-type(14){animation-delay:calc(var(--delay-character) * 14)}.frame span:nth-of-type(15){animation-delay:calc(var(--delay-character) * 15)}.frame span:nth-of-type(16){animation-delay:calc(var(--delay-character) * 16)}.frame span:nth-of-type(17){animation-delay:calc(var(--delay-character) * 17)}.frame span:nth-of-type(18){animation-delay:calc(var(--delay-character) * 18)}.frame span:nth-of-type(19){animation-delay:calc(var(--delay-character) * 19)}.frame span:nth-of-type(20){animation-delay:calc(var(--delay-character) * 20)}.frame span:nth-of-type(21){animation-delay:calc(var(--delay-character) * 21)}.frame span:nth-of-type(22){animation-delay:calc(var(--delay-character) * 22)}.frame span:nth-of-type(23){animation-delay:calc(var(--delay-character) * 23)}.frame span:nth-of-type(24){animation-delay:calc(var(--delay-character) * 24)}.frame span:nth-of-type(25){animation-delay:calc(var(--delay-character) * 25)}.frame span:nth-of-type(26){animation-delay:calc(var(--delay-character) * 26)}.frame span:nth-of-type(27){animation-delay:calc(var(--delay-character) * 27)}.frame span:nth-of-type(28){animation-delay:calc(var(--delay-character) * 28)}.frame span:nth-of-type(29){animation-delay:calc(var(--delay-character) * 29)}.frame span:nth-of-type(30){animation-delay:calc(var(--delay-character) * 30)}.frame span:nth-of-type(31){animation-delay:calc(var(--delay-character) * 31)}.frame span:nth-of-type(32){animation-delay:calc(var(--delay-character) * 32)}.frame span:nth-of-type(33){animation-delay:calc(var(--delay-character) * 33)}.frame span:nth-of-type(34){animation-delay:calc(var(--delay-character) * 34)}.frame span:nth-of-type(35){animation-delay:calc(var(--delay-character) * 35)}.frame span:nth-of-type(36){animation-delay:calc(var(--delay-character) * 36)}.frame span:nth-of-type(37){animation-delay:calc(var(--delay-character) * 37)}.frame span:nth-of-type(38){animation-delay:calc(var(--delay-character) * 38)}.frame span:nth-of-type(39){animation-delay:calc(var(--delay-character) * 39)}.frame span:nth-of-type(40){animation-delay:calc(var(--delay-character) * 40)}.frame span:nth-of-type(41){animation-delay:calc(var(--delay-character) * 41)}.frame span:nth-of-type(42){animation-delay:calc(var(--delay-character) * 42)}.frame span:nth-of-type(43){animation-delay:calc(var(--delay-character) * 43)}.frame span:nth-of-type(44){animation-delay:calc(var(--delay-character) * 44)}.frame span:nth-of-type(45){animation-delay:calc(var(--delay-character) * 45)}.frame span:nth-of-type(46){animation-delay:calc(var(--delay-character) * 46)}.frame span:nth-of-type(47){animation-delay:calc(var(--delay-character) * 47)}.frame span:nth-of-type(48){animation-delay:calc(var(--delay-character) * 48)}.frame span:nth-of-type(49){animation-delay:calc(var(--delay-character) * 49)}.frame span:nth-of-type(50){animation-delay:calc(var(--delay-character) * 50)}.frame span:nth-of-type(51){animation-delay:calc(var(--delay-character) * 51)}.frame span:nth-of-type(52){animation-delay:calc(var(--delay-character) * 52)}@keyframes frameMove{0%{top:0;left:0;transform:rotate(0)}24%{top:0;left:100%;transform:rotate(0)}25%{transform:rotate(90deg)}49%{top:100%;left:100%;transform:rotate(90deg)}50%{transform:rotate(180deg)}74%{top:100%;left:0%;transform:rotate(180deg)}75%{transform:rotate(270deg)}99%{top:0%;left:0%;transform:rotate(270deg)}to{transform:rotate(360deg)}}