@keyframes tonext{75%{left:0}95%{left:100%}98%{left:100%}99%{left:0}}@keyframes tostart{75%{left:0}95%{left:-300%}98%{left:-300%}99%{left:0}}@keyframes snap{96%{scroll-snap-align:center}97%{scroll-snap-align:none}99%{scroll-snap-align:none}to{scroll-snap-align:center}}body{max-width:37.5rem;margin:0 auto;padding:0 1.25rem;font-family:Lato,sans-serif}*{box-sizing:border-box;scrollbar-color:transparent transparent;scrollbar-width:0px}::-webkit-scrollbar{width:0}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:0 0;border:none}*{-ms-overflow-style:none}ol,li{margin:0;padding:0;list-style:none}.carousel{filter:drop-shadow(0 0 10px #0003);perspective:100px;padding-top:75%;position:relative}.carousel__viewport{counter-reset:item;scroll-behavior:smooth;scroll-snap-type:x mandatory;display:flex;position:absolute;inset:0;overflow-x:scroll}.carousel__slide{counter-increment:item;background:url(/mywebsite-demo/assets/kanye-west-rapper-2650730108-Dh64U1T2.gif);flex:0 0 100%;width:100%;position:relative}.carousel__slide:nth-child(2n){object-fit:cover;background:url(/mywebsite-demo/assets/minion-BOzNr44L.jpeg)}.carousel__slide:before{content:counter(item);color:#fff;font-size:2em;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-40%,70px)}.carousel__snapper{scroll-snap-align:center;width:100%;height:100%;position:absolute;top:0;left:0}@media (hover:hover){.carousel__snapper{animation-name:tonext,snap;animation-duration:4s;animation-timing-function:ease;animation-iteration-count:infinite}.carousel__slide:last-child .carousel__snapper{animation-name:tostart,snap}}@media (prefers-reduced-motion:reduce){.carousel__snapper{animation-name:none}}.carousel:hover .carousel__snapper,.carousel:focus-within .carousel__snapper{animation-name:none}.carousel__navigation{text-align:center;position:absolute;bottom:0;left:0;right:0}.carousel__navigation-list,.carousel__navigation-item{display:inline-block}.carousel__navigation-button{background-color:#333;background-clip:content-box;border:.25rem solid #0000;border-radius:50%;width:1.5rem;height:1.5rem;font-size:0;transition:transform .1s;display:inline-block}.carousel:before,.carousel:after,.carousel__prev,.carousel__next{border-radius:50%;outline:0;width:4rem;height:4rem;margin-top:37.5%;font-size:0;position:absolute;top:0;transform:translateY(-50%)}.carousel:before,.carousel__prev{left:-1rem}.carousel:after,.carousel__next{right:-1rem}.carousel:before,.carousel:after{content:"";z-index:1;color:#fff;text-align:center;pointer-events:none;background-color:#333;background-position:50%;background-repeat:no-repeat;background-size:1.5rem 1.5rem;font-size:2.5rem;line-height:4rem}.carousel:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E")}.carousel:after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E")}button{color:#fff;cursor:pointer;background-color:#000;border:none;border-radius:.5em;padding:.6em .8em;font-size:1.4em;box-shadow:2px 2px 3px #000000b4}.container{background:linear-gradient(90deg,#03a9f4,#f441a5);border-radius:.9em;width:17%;padding:3px;transition:all .4s;position:relative}.container:before{content:"";z-index:-10;filter:blur();border-radius:.9em;margin:auto;transition:filter .4s;position:absolute;inset:0}.container:hover:before{filter:blur(1.2em);background:linear-gradient(90deg,#03a9f4,#f441a5)}.container:active:before{filter:blur(.2em)}
