html,body{height:100%;margin:0;padding:0}#root{width:100%;height:100%;margin:0;padding:0}body.light{background-color:#fff;color:#000}body.dark{background-color:#121212;color:#fff}.bg{display:flex;justify-content:center;align-items:center;background-color:#000;width:100%;height:100%}.loader{border:4px solid aqua;width:25px;height:25px;opacity:.9;background-color:#0ff;animation-duration:3s;animation-name:spin;animation-timing-function:ease;animation-iteration-count:infinite;animation-fill-mode:both}@keyframes spin{0%{transform:rotateX(0) rotateY(0) rotate(0)}33%{transform:rotateX(180deg) rotateY(0) rotate(0)}63%{transform:rotateX(180deg) rotateY(180deg) rotate(0)}to{transform:rotateX(180deg) rotateY(180deg) rotate(180deg)}}.name{font-size:18px;color:#fff}.car{animation-duration:5s;transition:all;animation-name:move;animation-delay:var(--delay);margin-left:-100px;animation-timing-function:ease-in-out;animation-fill-mode:forwards}@keyframes move{0%{transform:translate(100%,20px)}to{transform:translate(-10%,20px)}}.road{padding-bottom:14px;position:relative;margin-top:10px;border-bottom:3px solid lightgray}.tree1{position:absolute;width:70px;bottom:0;left:305px}.tree2{position:absolute;width:80px;bottom:0;left:360px}.tree3{position:absolute;width:100px;bottom:0;left:410px}.tree4{position:absolute;width:60px;bottom:0;left:470px}.view{display:flex;flex-wrap:wrap;justify-content:space-between;gap:50px;padding:80px}.block{height:220px;border-radius:5px;animation-duration:2s;animation-name:blockAnimate;animation-timing-function:ease;animation-timeline:view();animation-range:entry 0% cover 40%}@keyframes blockAnimate{0%{opacity:.3;scale:.5}to{opacity:1;scale:1}}.view .block:nth-child(1){width:240px;background-color:#ff6b6b}.view .block:nth-child(2){width:280px;background-color:#6bcb77}.view .block:nth-child(3){width:430px;background-color:#4d96ff}.view .block:nth-child(4){width:220px;background-color:#ffd93d}.view .block:nth-child(5){width:190px;background-color:#f06595}.view .block:nth-child(6){width:390px;background-color:#845ec2}.view .block:nth-child(7){width:210px;background-color:#00c9a7}.view .block:nth-child(8){width:295px;background-color:#ff9671}.view .block:nth-child(9){width:513px;background-color:#2c73d2}.view .block:nth-child(10){width:275px;background-color:#ffc75f}.view .block:nth-child(11){width:285px;background-color:#0081cf}.view .block:nth-child(12){width:305px;background-color:#d65db1}.view .block:nth-child(13){width:240px;background-color:#ff6b6b}.view .block:nth-child(14){width:200px;background-color:#6bcb77}.view .block:nth-child(15){width:290px;background-color:#4d96ff}.view .block:nth-child(16){width:380px;background-color:#ffd93d}.view .block:nth-child(17){width:190px;background-color:#f06595}.view .block:nth-child(18){width:590px;background-color:#845ec2}.view .block:nth-child(19){width:410px;background-color:#00c9a7}.view .block:nth-child(20){width:395px;background-color:#ff9671}.view .block:nth-child(21){width:213px;background-color:#2c73d2}.view .block:nth-child(22){width:275px;background-color:#ffc75f}.view .block:nth-child(23){width:285px;background-color:#0081cf}.view .block:nth-child(24){width:205px;background-color:#d65db1}.out_container{background-color:#2c73d2;display:flex;height:100vh;justify-content:center;align-items:center}.container{height:25rem;width:20rem;position:relative;cursor:pointer}.card{height:100%;position:absolute;width:100%;background-color:#2c73d2;box-shadow:0 10px 10px;background-image:url(/assets/background-nMn5-zjN.avif);background-repeat:no-repeat;background-size:cover;transition:1s;border-radius:10px}.card:hover{transform:perspective(20px) rotateX(2deg) translateY(-50px)}.bird{background-image:url(/assets/bird1-DD_b1MGJ.png);background-repeat:no-repeat;height:20rem;width:20rem;position:absolute;background-size:cover;transition:1s;animation-name:fly;animation-duration:.2s;animation-play-state:paused;animation-iteration-count:infinite;animation-timing-function:linear}.container:hover .bird{animation-play-state:running;transform:translateY(-200px) translate(-10px)}@keyframes fly{0%{background-image:url(/assets/bird1-DD_b1MGJ.png)}to{background-image:url(/assets/bird2-7n54ppZ0.png)}}