<template>
<div class="switch">
<label class="label">
<input class="check" type="checkbox" />
<div class="bar">
<div class="shade"></div>
<div class="ball"></div>
</div>
<span class="text-on">Show</span>
<span class="text-off">Hide</span>
</label>
</div>
<div class="content">
Lorem ipsum dolor sit amet at gubergren. Duis sea justo magna accusam labore stet amet sanctus eu accusam clita duo.
Ut consequat clita at amet aliquyam takimata duis aliquam sit.
</div>
</template>
<style>
.switch:has(.check:checked) ~ .content {
opacity: 1;
}
.label {
user-select: none;
cursor: pointer;
}
.bar {
position: relative;
display: inline-flex;
align-items: center;
margin: 0.25rem 0.75rem;
padding: 0 0.25rem;
width: 1.25rem;
height: 0.5rem;
border-radius: calc(infinity * 1px);
background-color: var(--color-gray-200);
text-wrap: nowrap;
box-sizing: content-box;
}
.shade {
display: inline-block;
vertical-align: top;
margin: 0 -0.25rem;
padding: 0 0.25rem;
width: 0;
height: 100%;
border-radius: calc(infinity * 1px);
background-color: var(--color-green-300);
box-sizing: content-box;
transition: width 0.2s ease-in-out;
}
.ball {
position: relative;
display: inline-block;
vertical-align: top;
margin: 0 -0.375rem;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background-color: var(--color-green-600);
}
.check {
position: absolute;
width: 0;
height: 0;
}
.check:checked ~ .bar > .shade {
width: 100%;
}
.check:checked ~ .text-on {
display: unset;
}
.check:checked ~ .text-off {
display: none;
}
.text-on {
display: none;
}
.content {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
</style>
<template>
<div class="container">
<div class="mode">
<label class="mode-label">
<div class="mode-tab">
<input class="mode-radio" type="radio" name="radio" checked />
Stop
</div>
</label>
<label class="mode-label">
<div class="mode-tab">
<input class="mode-radio" type="radio" name="radio" value="linear" />
Linear
</div>
</label>
<label class="mode-label">
<div class="mode-tab">
<input class="mode-radio" type="radio" name="radio" value="ease" />
Ease
</div>
</label>
<label class="mode-label">
<div class="mode-tab">
<input class="mode-radio" type="radio" name="radio" value="ease-in" />
Ease-In
</div>
</label>
<label class="mode-label">
<div class="mode-tab">
<input class="mode-radio" type="radio" name="radio" value="ease-out" />
Ease-Out
</div>
</label>
<label class="mode-label">
<div class="mode-tab">
<input class="mode-radio" type="radio" name="radio" value="ease-in-out" />
Ease-In-Out
</div>
</label>
</div>
<div class="area">
<div class="circle"></div>
</div>
</div>
</template>
<style>
@keyframes loading-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.container {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
height: 100%;
}
.mode {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.mode::after {
content: "";
flex-grow: 8;
min-width: 12.5%;
}
.mode:has(.mode-radio[value="linear"]:checked) ~ .area > .circle {
animation: loading-rotate 1s linear 0s infinite normal forwards;
}
.mode:has(.mode-radio[value="ease"]:checked) ~ .area > .circle {
animation: loading-rotate 1s ease 0s infinite normal forwards;
}
.mode:has(.mode-radio[value="ease-in"]:checked) ~ .area > .circle {
animation: loading-rotate 1s ease-in 0s infinite normal forwards;
}
.mode:has(.mode-radio[value="ease-out"]:checked) ~ .area > .circle {
animation: loading-rotate 1s ease-out 0s infinite normal forwards;
}
.mode:has(.mode-radio[value="ease-in-out"]:checked) ~ .area > .circle {
animation: loading-rotate 1s ease-in-out 0s infinite normal forwards;
}
.mode-label {
display: contents;
}
.mode-tab {
padding: 0 0.5rem;
flex-grow: 1;
text-align: center;
border: 2px solid var(--color-green-700);
border-radius: calc(infinity * 1px);
cursor: pointer;
user-select: none;
}
.mode-tab:hover {
background-color: var(--color-green-100);
}
.mode-tab:active {
background-color: var(--color-green-50);
}
.mode-tab:has(.mode-radio:checked) {
color: var(--color-white);
background-color: var(--color-green-600);
}
.mode-radio {
position: absolute;
width: 0;
height: 0;
}
.area {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
}
.circle {
position: relative;
width: 4rem;
height: 4rem;
border-radius: 50%;
background: conic-gradient(var(--color-white), var(--color-green-600));
}
.circle::after {
content: "";
position: absolute;
inset: 12.5%;
border-radius: 50%;
background-color: var(--color-white);
z-index: 1;
}
</style>
<template>
<div class="list">
<button class="button flat" type="button">Flat</button>
<button class="button wave" type="button">
<span class="wave-text">Wave</span>
<div class="wave-shade"></div>
</button>
<button class="button raised" type="button">Raised</button>
<button class="button membrane" type="button">Membrane</button>
</div>
</template>
<style>
.list {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
justify-content: stretch;
align-items: end;
}
.button {
font: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
user-select: none;
cursor: pointer;
}
.flat {
padding: 0 0.5rem;
border: 2px solid var(--color-green-700);
border-radius: 0.25rem;
}
.flat:hover {
background-color: var(--color-green-100);
}
.flat:active {
background-color: var(--color-green-50);
}
.wave {
position: relative;
padding: 0 0.5rem;
border: 2px solid var(--color-green-700);
border-radius: 0.25rem;
overflow: hidden;
scale: 1;
transition: scale 100ms cubic-bezier(0, 2, 1, 2);
}
.wave:hover {
background-color: var(--color-green-100);
}
.wave:active {
scale: 0.95;
transition: none;
}
.wave:active > .wave-shade {
width: 0;
opacity: 1;
transition: none;
}
.wave-text {
position: relative;
}
.wave-shade {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
opacity: 0;
translate: -50% -50%;
background-color: var(--color-green-400);
border-radius: 50%;
transition: width 200ms linear, opacity 200ms ease-in;
z-index: -1;
}
.wave-shade::after {
content: "";
display: block;
margin-top: 100%;
}
.raised {
padding: 0 0.5rem;
border: solid;
border-width: 1px 3px 3px 1px;
border-color: var(--color-green-500) var(--color-green-700) var(--color-green-700) var(--color-green-500);
border-radius: 0.25rem;
}
.raised:hover {
background-color: var(--color-green-100);
}
.raised:active {
border-width: 3px 1px 1px 3px;
border-color: var(--color-green-700) var(--color-green-500) var(--color-green-500) var(--color-green-700);
background-color: var(--color-green-50);
}
.membrane {
padding: 0 0.25rem;
width: 3rem;
height: 3rem;
font-size: 0.75rem;
line-break: anywhere;
overflow: hidden;
border: 2px solid;
border-color: var(--color-green-500) var(--color-green-700) var(--color-green-700) var(--color-green-500);
border-radius: 1rem;
background: radial-gradient(circle at 0% 0%, var(--color-green-50), var(--color-green-400));
}
.membrane:hover {
background: radial-gradient(circle at 0% 0%, var(--color-green-50), var(--color-green-500));
}
.membrane:active {
background: radial-gradient(circle at 62.5% 62.5%, var(--color-green-50), var(--color-green-400));
}
</style>
Original author: @Snooa_o
CSS file: furina-cursor.css
<template>
<div class="info">
<p>
<span>Original author: </span> <a href="https://x.com/Snooa_o" target="_blank">@Snooa_o</a>
</p>
<p>
<span>CSS file: </span>
<a
href="https://github.com/ElvishScout/furina-cursor/blob/main/furina-cursor.css"
target="_blank"
>furina-cursor.css</a
>
</p>
</div>
<div class="list">
<div class="list-item cursor-furina-default">default</div>
<div class="list-item cursor-furina-default-2">default-2</div>
<div class="list-item cursor-furina-pointer">pointer</div>
<div class="list-item cursor-furina-ew-resize">ew-resize</div>
<div class="list-item cursor-furina-ns-resize">ns-resize</div>
<div class="list-item cursor-furina-nwse-resize">nwse-esize</div>
<div class="list-item cursor-furina-nesw-resize">nesw-resize</div>
<div class="list-item cursor-furina-move">move</div>
<div class="list-item cursor-furina-text">text</div>
<div class="list-item cursor-furina-help">help</div>
<div class="list-item cursor-furina-not-allowed">not-allowed</div>
<div class="list-item cursor-furina-wait">wait</div>
<div class="list-item cursor-furina-progress">progress</div>
<div class="list-item cursor-furina-alias">alias</div>
</div>
</template>
<style>
.info {
margin-bottom: 0.5rem;
}
.info > p {
margin: 0.125rem 0;
}
.list {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.list::after {
content: "";
flex-grow: 8;
min-width: 12.5%;
}
.list-item {
flex-grow: 1;
padding: 0 0.5rem;
text-align: center;
border: 2px solid var(--color-green-700);
border-radius: calc(infinity * 1px);
user-select: none;
}
.list-item:hover {
background-color: var(--color-green-100);
}
/* begin furina-cursor.css */
@keyframes cursor-furina-alias {
0%,
50% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5j9jnlAAAAAXRSTlMAQObYZgAAAUtJREFUeAGNk4magjAMhB1p5Uh2i4oXnu//lDspCFRcd/v5YWT+pOmYLv6zgD/05XJGYJJEfUYgyxymuhHTHEdgJGwL/oAf3lB1aQ0L4X3kgNUqi0COFCi8IaBWllajqlKAuSREn0T+CqAoRLzXjviqqjztwdIjIdLVWGFqFL5N9/1CrF+O54y7d7I9hb3meT4SxkifXnSEHWcKxA6iQKKIgaAsRwJKSSVQU+mJFIgOSAiqGuogdhqf9ODVS71erwMpfhFOAChfaL3Zbhsm73Yb7fscK1jNen84NFzH496a9MmMwIDwBLgRT5GOkO0hVE8nPgJjfR0yFWnPVqBpzq2f6fRShV1d2vZizst80qFQ566329U5honPPcFZvMaVwSGxaUDorf1HpRmLidEDcL93kwNlhDcXDv1YB4Tw4Tri8bDP4tNlflv/l/UDBhMQjuohBugAAAAASUVORK5CYII="),
alias;
}
25% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5j9jnlAAAAAXRSTlMAQObYZgAAAUZJREFUeAGNkwuTgjAMhF1p5ZHcFRVf+Pz/v/I2BWZa5LzrOLXDftkmIaz+s4A/9PV6TiCNoT4nUBQOmU4iiYEjkBB2BVbw0xNQdTMPnuG9mdBpsykiUCIHKm8IqNW1eTRNDjCWhOhElHMAVSXivQ7EV9OUeQ4WHgmRwWODrFHfpvtxIfrXSZ12/SDbLsy1LMuEICJjeDUQVk4KxAyiQKKKB0GdOigllUBNZSRyIHZAQlDV0Aaxanz2Qr16abfbbSDFP8IZAOUDbXf7fcfgw2GnQ56Jg3m2x9Op4zqfj5akz0YEBoQJ4EWsIh8hu0OoXi7cAs86m0IS0l/NoOuuvX/T2UsVNu/W9zdrvLwPOhTq3P3xuDvHY9bnkeAs3uMq4JAVORHsLeIeX/mCxfM5zq4qj0sW41QHhPDhY8TrZb9PXzKW7H9fP7lhEGCOcl6QAAAAAElFTkSuQmCC"),
alias;
}
75% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5j9jnlAAAAAXRSTlMAQObYZgAAAUxJREFUeAGFkwmXgjAMhB1p5Uh2i4oXnv//V+6kXFZczfNhH/N1moR0wQAWHwPLJb7obwiMtlGfEcgyNxJ2BNJU4AhMRL8ffnxD1U0eE+DNhKevVlkEcqRA4Q0BtbI0j6pKAe4lIToQ+SuAohDxXjvip6ryNAfbHgmRzmOVVIFf030fiP7l4GAxyvYU5prn+UhESPrtRUdYOc9AzCAKJIq4EJTlREApqQRqKj2RArEDEoKqhjqIVWPEE6Be6vV6HUjxj7ClMQJQvtB6s9023LzbbTSesXiqwjzr/eHQMI7HvSXpkxmBAWEAeBCrSEfIzhCqpxMfgWt9HTIVac9m0DTn1s909lKFzbu07cU6L/O7AIU6d73drs5xmfS5JziL1xgZHAd0TpBh7+wjlUj7OAH3O7rp5QLvriT6uQZC+HAf8XjY73+g8/hy54f4AxKtEH8iOTLmAAAAAElFTkSuQmCC"),
alias;
}
}
.cursor-furina-alias:hover {
animation: cursor-furina-alias 400ms step-end infinite;
}
@keyframes cursor-furina-default {
0% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5j9jnlAAAAAnRSTlP/AOW3MEoAAAFdSURBVHgBfdSLlqIwDAbguBBLSXeLijfEy/s/5f4JLVAPM50DdMzXJMUeiWj36yD6sy3ySoBNQVVVUwZZrKpRDWDCQBLEWRCi9ZRjApMgZk2C6vt9ZcBRBiaoYSWEmPeao20ToNQyIQdLyMIlMPdGTSPCHCbxt23dVHDuHMtNiEw59lZ3Dv/TOKdBlt/TAmgO613Qq3NOxQxI0vJmErqdNbAUFoBobCLkvV92EBAKEhELkkQJ7A1IjCGE2EXR3XDRAweW7nA4RCg8gAtAAR+E7ng69Vh8Ph9D6nPJoDm7y/XaY9xuF22SyxelIGaAQtjFrgBaQxC933GLmIcSqJDhoQn6/jFwiq8BBLoah2HEAwW+AVLgb3y+Xs/RprtvgDnVTxv1anvlWa/9y7PDaViaX8fx6r3zlat1tgXeb/vOOOj53ixBauzaLKH/9pEo9uu9fYHPh/T6EWiV8hfhP2ZrEpWAHPX5AAAAAElFTkSuQmCC"),
default;
}
25% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEUAAAAAAAD3/v/nxHxdc7omNr0sMHOSw+H19vo0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzHXmytjAAAAAnRSTlP/AOW3MEoAAAFZSURBVHgBhZSLeoIwDIWPA0tLshUVL0PU93/LJWnBIm6rt36cvydpkk8Amz8X8IH/gPfEZK3AOwJVVWMG1gRqAYxIwCsBUevkkYFEpLjyvd1WBjjkHLLSeK9b0UJQj7Y1YKqEat574olwCXiGR9MQec+J+GxbibApstPjRhAlj63FXeo+L5h/KB3wlTWFSJJ1zimB1fkmEXafEgBlQYjGNoQQwvMOasEURWPKxAIAawUoRmaOXSS9jRIoc6But9tFoeRHYAXKJNlztz8cejl8PO7Z0sEMgPVEdzqfe1mXy0mTZBR1kFsIECdAAsktNmUlIY+Y+v7b3lH2vASUoOEqsujXwWe9BISQ4o3DMGrfaRraopssr/F2v99G1MgGJWCTeLMl3Z6zL/RHQB3uwTuZ5+DXDng8pH8uVK7W2XsXAtYSaZeO4jrE7CKf4skL0Ecg9r8DNvuLf4QfnyITOLl/1ykAAAAASUVORK5CYII="),
default;
}
50% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHM0W/HurGxagrXB4PWSw+FV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH51iDutAAAAAnRSTlP/AOW3MEoAAAFgSURBVHgBddOLlqMgDAbguErBxF3slF7W2sv7P+X8iajYY5njyEw+EoJKRNXumANEfxZRWqrrhjJYBLnVNgAmFMxiBYRoM+UwkAU5p1VQ/XCoDXjKYBUghFgImqNtFzAJUsEyC78AmnqirmN2Tibxt239tIe5O11ugnnKcaDiPCr6p3GXB1n+oBmqYrnF9Ddjr957FQsgzsu7SWg7JbAUFoDobMIUQliOnwQh4YiYcBZbYCfAMYpI7CNrN26zByeO++PxGKFwA94AEvxD+p/TKWHx+fwjeZ9rBs3ZX67XhHG7XXST9nDXLhTEGaAQuqg2QGtwSv8xUoqYyxao4OGuIqX74HK8BBDY1TgMI24o8AmQAj/j4/l8jDatPgHm1DxsNEV7m2+hbsIzOI+3Yd18GcfRBx9q3+hsD7xe9syc6Pu9W4LU2LVbQv9MkSimsrcP8H6TXl+BVtl+8F8+/nX8Agh7EnKovntTAAAAAElFTkSuQmCC"),
default;
}
75% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5j9jnlAAAAAnRSTlP/AOW3MEoAAAFmSURBVHgBdZONlqMgDIUzq5Risott6c9a+/P+Tzk3AVF7bM5hZHo/bkIAIvrZjEkg+rNJUNO0VIBKLMyoBWCEAhNBrqJQ2+xhQCHIOTVB9t2uMcBTATJBe6cIQQtBPbquAoWAh2OZCF8Bynui/Z7ZOcnE367zuYapeF1uBHP22NGqH/9ULwOE+gd1+Fksx8DfTJD3XonaG2ITjMCMdTsUwtw8tcDv0IQzwdBngASycGQRiX1kLVYNVjUwgBiVigCNqABaJI77w+Ggi/FBButqBQQrpD+eTglxPh+1HXZ2NYUm7S/XqwK32wX8GoAHLHgCIuaSz2cGhDmm9B+RUnRFnwEjhrsSKd0H7eUHoElQ9jgMIz6uGCwB7FVofDyfjxGTWv36LrcPi3aReX3X2/AMzuM20BagvQ8+NL61U9gAXi87MxTo5hfw8dzA2NhMof+mSBTTcvMfwPtNOr4CmmX94L88/jl+ATcCEvOJ6H0kAAAAAElFTkSuQmCC"),
default;
}
}
.cursor-furina-default:hover {
animation: cursor-furina-default 400ms step-end infinite;
}
@keyframes cursor-furina-default-2 {
0%,
50% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5j9jnlAAAAAnRSTlP/AOW3MEoAAAFWSURBVHgBhZOJcoMwDEQ3xQ6H1Jok5CLn/39lV8YQU5rWk7E10fNqJQDA6s8FfOA/4DfiJWzAkkBROGRAJDIzcAQSMQBGwE+qzLpRIwEk4L2JsPp6XUSgxOTBPKHyhoC5ujaNpknAWBzU8KIjUY7AVLmqRLzXgfhsmlhhNVm365EQGTTWqYuU/rK8TwtRv84UMKVtF3oty3IgxmlIul4NhLWTA1EiJkhUMRDUtRFJQZlSCcypJGIOxAlICKoa2iDWjZ958Oql3Ww2gRQPwjMAyj+03e52HS/v91tNPl8KptkejseO63Q6mEk/H5QBYQRYiF2sZoDVEGbPZ26Bsc4BI6S/mEDXXXo/5V8ACbq69v2VBwv8BCgBde52v9+cY5geVQYwQnGLq4BDmkIOMOZs7RnVNlg7FsDjEd9uD2WU3jUsviduASEsTGbY82m/94BpYNnmu/UNcioRxoYR7AEAAAAASUVORK5CYII="),
default;
}
25% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5j9jnlAAAAAnRSTlP/AOW3MEoAAAFUSURBVHgBhZOJcsIwDEQVYpNDah0gXOH8/6/sykewSUs1HUfTfVrJSiCi6mMQreg/4Bci81VgQVBdG8oBJbJZyABIRABAkJ1roJrZIwIrImvVBN3X69oDDb1m0GitIgSt69Sj7xMQu6uHZUlEMwNpmLZltlYC8dX3oUM1T4ZyTzAHj3UqDOe36jYGef8uc6BZ1pMxa9M0kYiDcCxvA6HXyQFv4QUQrU+YutxBIAk7aMKRKAG/AXZORNzgWG9j03oCIJaHzWbjQOEBuABI8A8ZtrvdiOL9fithzsxBPYfD8TgiTqeDDmnLRSngEoBGuEVVANqDoZ7POBxyKQEleLqowTheJvvSZwAElnedpiseaPAOwILEmNv9fjMGaXpVLwAJ1TcfNRlKl8yASndL/vSvvCuu6bPHQz9aaCJIaQGErw+HI+eyusWv7vnUvw+Aj+pv4D1+AEBXEagkdcJZAAAAAElFTkSuQmCC"),
default;
}
75% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5j9jnlAAAAAnRSTlP/AOW3MEoAAAFXSURBVHgBhdMJd4MgEATgsUI8lhaTmMuc//9XdpbDYpOmvD7ldT+HBQ2A6u0APvAfeCnmZAUvBOra4AdEUXQDQxBFBEHAZgFWTcpIQAWs1RCuvlrVATTIPYSW0FolYK3rNKPvI5jXBjOsuCyaBObW0LYi1rooPvteV6iKzvl4ECIxYxV3kctfWrdpIOR3RQLmsl6FvTZNE8R8oJIeb6PQ7ZQgRIQCRRsmgq6jyAmOJSeeNSdJLEE4AfHeOecHL7obFQVwVob1eu2peCPWNmYAx3+4YbPdjnx4t9u4sEZV7EIzh/3hMHIcj3tt0i4PSoHPgAtxF9UC6BrC6unEi+fcLYEKmc4aMI7nyeZ6ASh4eJdpuvDGBX4DRsAZc73drsZwGl9VCThFfQ2jhuEH2i12kQzPTl9Sh3SOT+B+T18vJ/Fjw4sflJbg/VMPBXs89O9vEDPegWJ8A2OnEbCqzk94AAAAAElFTkSuQmCC"),
default;
}
}
.cursor-furina-default-2:hover {
animation: cursor-furina-default-2 400ms step-end infinite;
}
@keyframes cursor-furina-ew-resize {
0%,
50% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5j9jnlAAAAAXRSTlMAQObYZgAAAUpJREFUeAGNkwuTgjAMhFlp5ZHcFRVf+Pz/v/K2AZXW8+Z2mJJhv6ZpaIsoFJOeQSoskAW5v8CkxRMF5v5cZqAsHf4A4AgkRLoE6Lo0h332PgbElsvSgCrdHWoSFL2miTnaNtsTmMOLPogqB1DXIt7rSHy1bZX5nG6EyJhjmfj4jr6fBMvfIJtuXhyFxVZVNScAmabXI2H7yVOYQaK2QNA0LwJKSyXQU5mIFLAOSAiqGrogcTc+qcGrl261WgVSfBFOACg/aLfebHpO3m7XOtX5yhBzdrv9vqcOh10s0qeNikB4AFyIu0gbHdcQuscjh8BY81+pIsMpJuj70+DffPZShVWdh+HMFxd4O99QqHOX6/XiHMOkz49jhfJiKuHgfyEKNtf+URMbi1mjn8DthvHwKiO8lzHeJw4BIXy4pobd7/H5DBTjJSr+qR9v8BCjHFLuEAAAAABJRU5ErkJggg=="),
ew-resize;
}
25% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5j9jnlAAAAAXRSTlMAQObYZgAAAUNJREFUeAGNkwtzwiAQhLMGzOOuJWp8xef//5VdLmYaiHW64wCT/VjgwMKEpFsKK8y6d/4KptVEcJz6vxqjytLhAwBHICPmS4CuyzNQwHvrgPW6NKCaE/zVJCh6TRMz2jY7E5jhRSeiygHUtYj3OhJfbVtlPqcbITJmrBMf39H3L8HyG2TTzYutcLNVVc0JQF7T65Gw8+QRZpCobSBo5glKSyXQU3kRKWAVkBBUNXRB4mn8/ELh1Uu32WwCKXaEEwDKD9ptd7uek/f7rY77nCXEzO5wPPbU6XSIm/RpoSIQJoAL8RRpoeMaQvd8ZhM41vwqVWS4xIC+vwx+4bOWKizedRiu7LjA4n1Doc7d7vebcxwmdZ4eFcqbqYSDX0YUsbaw1q78TcTjEZ8mPVUO30XEb2wCQvjzX0ri+Yy/D4Cp+L9+AAcPEG/W7VNnAAAAAElFTkSuQmCC"),
ew-resize;
}
75% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5j9jnlAAAAAXRSTlMAQObYZgAAAUpJREFUeAF9kwmXgjAMhB1p5Uh2i4oXnv//V+6kgLbomueTPObrpAntgoHFM5I0ebnEhzTVl3jGciKYv/Q8ooCicPgCwBFIiHkJUHWpx5DAe0uJrVZFBEpkvaEiwaBW1+bRNLOeQA8vOhHlHEBViXivA/HTNOVM5/JIiAweq0zHr+l+DET/GrPlUbN/4WbLskwJQMbl1UDEfuYWUSBRxURQ1y8CSkklUFMZiRyIE5AQVDW0QawbIxJAvbTr9TqQ4oOwbeMJQPlC281223HxbrfRWCM5YDDPdn84dIzjcW+b9PmgDAgTwELsIh+01RCqpxP/AnOdf0oV6c9m0HXn3r/pnKUKh3fp+wsfLPB2vqFQ566329U5ptmcp4OF4hqjgIP/QJDh7Owj1cjn+ALudwynlwnetzFeqHgBQvh4T0fs8bDf/8Dg8Q1I4g+LwRCZoL3lFgAAAABJRU5ErkJggg=="),
ew-resize;
}
}
.cursor-furina-ew-resize:hover {
animation: cursor-furina-ew-resize 400ms step-end infinite;
}
@keyframes cursor-furina-help {
0% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr2Sw+E0W/HurGxagrXB4PUsMHNV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH65TTSRAAAAAnRSTlP/AOW3MEoAAAFlSURBVHgBdZSNlqowDISjtFLS3lvcZVdF/Hn/p9xJGoR6sJ5C6HzNJNAjEe0+DdWI9vRBo/0eGoANgprGYSeVacTKi5wAkt8AJcjPBDXOFcQsCkHel6LocGgKoMsFELT1ghC0ECRHN3cB1UIQHGcidZ06Sx3FuW2ZvY+F+Nd1ySysNNmuBHPJcbC8Jv8X3dsgzR9K98t21eTKqDWlVAgDiG17WwhpZw1oChVAtBowhRBeNVCEFDlDi2xEDegb4JxjjLnPLN34qgYfPffH4zGDwg1wBVDEQuy/vr8HbP75+YpW55JBcva/p9OAcT7/SpH2cecuBMgzACN0sasA8WColwsuGXGsASF4vEqCYbiO/qUvAAhUNY3jhBsM3gGkwG+63e+3ScPdO4CI3E2Ho2p5ddZduAefcBrWq0uEVx9SaJKTaAt4PPSb+Sjne9OChNG5aSEPQybKQ71WPTyfJPMjIC7v/wd/dGYSJ9HXIc4AAAAASUVORK5CYII="),
help;
}
25% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEUAAAAAAAD3/v/nxHxdc7omNr2Sw+H19vo0W/HurGxagrXB4PUsMHNV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzFQ2e1jAAAAAnRSTlP/AOW3MEoAAAFnSURBVHgBdZSNnqIwDMRnAWlJelfcZT+ORX3/t7xJW6GgVvkZO/9M06YK4O3VSBrQvCLQNNQIPCOYzMzyPCHQtl3yL8CRQEego31Z4kiAqiGpvALkEHn106nNQNkFVQvRO2cBNe/NYxhyQpNPwjTnnOidCAM230T0vYhzmok/wxDyEmtlTE+ESPY4ZQm17soA/Qd4VAD+Fs0gYbEhhEzgkN9nIu2nBiBFINGnQOC934o0C5VITaUQOwBqJyAxqmoco9hujEBdg4zn8zmS4gdhA+oi1en4/vExMfnz811TOVgBqGWMX9/fE8fPz5cVqajOgbsgEO8AF+Iu3uqTBKdUpulfekfGugeMkPmXMvXf2a36BpDg4S3zvFjfZWvy2k3la7lcr5cFHVaDDUg38ZIGu11Nr8HNo/NX7wLvs3ePDrjd2L/g28DL6p4ALDO1hO2yH8PjEqsLn93c7ssUgTi9BtLdP/wf/AcGjxJ1PhfRIAAAAABJRU5ErkJggg=="),
help;
}
50% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHM0W/HurGxagrXB4PWSw+FV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH51iDutAAAAAnRSTlP/AOW3MEoAAAFoSURBVHgBdZOJuqMgDIVjhYLBGewtXcba5f2fck4CLvTzpp81cn5yAiIRNTuhw+XvUIgtSW1roBygyS0rZBeCjAAHVNCrECtArTGmFYMZUIKsLcbHIwjUcFQsVgIIQfNeanTaXgFyCoLDTLhuXgVU9et7ZmtDJv50ncutSR+5R2uVYM41jnkHykbRX9FtCUL9jny2aJbpqsk/o1fnHIhmAYjL9D4TspwtoCVUANFrwuS9Xy0CpMARWuBC1IDuAMcYQohDZFmNrXqwwfJwOp0iKNwAVwAFDITh53xOmHy5/ITS51pBag7X2y0h7verNFle7rwKAeIMwAiraCpAPDilf4iUIvJQA0Lw+BAipcdoF30FQKCraRwn3GDwDaAEftPz9XpOmjbfADIyTw1D1fDmrBv/8tbJgW12AOw9eedbZyTbA95vfWc2yPnetSBh9Nq1kIcUiWKqx6qHz4fk+hUQl+/Pfffj38Z/qTsSTsWpvB8AAAAASUVORK5CYII="),
help;
}
75% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5j9jnlAAAAAnRSTlP/AOW3MEoAAAFvSURBVHgBdZOLeoMgDIVjhVIMG7all1l7ef+n3EkAq53j+1Akv+eEAETUrDSdLo/NCkFtaxDZICavTMykyAiwgYL2QpCtBLXGmFYMKqAEWVuMt1sQ0HBULDJBOysIIea9aHSaXgHyEASHSriurgJR9dvtmK0NmfjqOpdTkzxyjtYqwZw1trkCuVBE3xIvHYTrOvLZopl+R8czE+ScA9FUoCHWgBIYsSyHvJ8UVALziAXOBCP+BiggHDhyCCH2kSXZLDDLgQHEKFQEqMQEoETBcr/f7+VnvOCgVZ2AgD9CfzgeE9rpdJBylL0rTzHtz5eLANfrGfwSgAYkuAIR41AjFQjMMaUftJSineIVUGK4CZHSbZBafgBigrTHYRjxspPAG8BaA433x+M+YjCbnp9lc9dmFpPzs278w1snB3YNkNp751tnyi78AZ5P3TMkaKcbsLQgYbSvWshHikQxLecWH68XSf8XEJfP6756+eftF9InEs1ylBXeAAAAAElFTkSuQmCC"),
help;
}
}
.cursor-furina-help:hover {
animation: cursor-furina-help 400ms step-end infinite;
}
@keyframes cursor-furina-move {
0%,
50% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHM0W/HurGxagrXB4PWSw+FV6f/19fn+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH4I8PXZAAAAAXRSTlMAQObYZgAAAUxJREFUeAF9k40SojAMhF1oBRLuiop/+Pv+T3mbAkLhNONAh/2yTWO6GQKb34HsN4EsSwkgTQAd5l+Q525BZPMcOAITYYoBfkRA1U0eMXl8xN232zwCBcb6pqBMrSzNo6qwdvCiI1GMwKeGGhDvtSf+VFWRnIvJ3tdCQqT32GLZB1/7IRD9Syw6+dc0g4QHLopiTsT6YtQ9QQSpRdQlEnVcCMpyIqCUVAI1lYFIAUsnEFQ1NEHsND6pwauXZrfbBVJ8EU4AKD9osz8cWiYfj3sd6pwczLM5nc8t43I5WZE+nSADwghwI54iHRjbQ6her3wErnUxpCSku5lB2946v9LZKRVWde+6O1/cYDXlUKhzj+fz4RyXSZ/Hq4P8ESOHQ9KmD8Le2n9UWmMxa/QHeL1suCgqV1iX0d8nPgJC+HEV8X7b7ztgHv/z/xL/AKglD/YQb3oIAAAAAElFTkSuQmCC"),
move;
}
25% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHM0W/HurGxagrXB4PWSw+FV6f/19fn+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH4I8PXZAAAAAXRSTlMAQObYZgAAAUlJREFUeAGNk4uysjAMhF1pBRL+v6h4w+v7P+XZFOtp1WFOxqkd9us2CWHxDCzmA8t5AstlQQBvPOiQPUJVuXciB+AIZIRJBHzyBVWXedhhpMVuX62qCNR45fcbALWmMY+2xRcH0UTULyDl0HWA9zoR/9q2LuqwJH0n4r3I5LHCRx86/wxE/yZvTOzkf2oGCQuu6zonYn7xcDcR1pPSwmMSSHRxI2hyB6WkEqipPIkSsOMEgqqGPohV44u359VLv16vAyn+ES4AKB9ov9luBx7e7TY65Zk5mGe/PxwGxvG4tyR92SgDQgJ4Easo58XuEKqnE5fAvb5PlIqMZzMYhvPoP3T2UoXNu4zjhX+84GPIoVDnrrfb1Tluiz6nLwfVNUYFh6LIRLC3iGt85V8s7ncbLWqq3H6ziLMHBIQw8yHi8bDfDBBj8ff4ATEXD7vRBdRKAAAAAElFTkSuQmCC"),
move;
}
75% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEUAAAAAAAD3/v/nxHxdc7omNr0sMHM0W/HurGz19vpagrXB4PVV6f+Sw+H+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5stDv5AAAAAXRSTlMAQObYZgAAAUtJREFUeAGFk4uaqjAMhB2pQJNjUfGG1/d/yzMpFSnssvn8oDI/kzSkqxRYLQfWywTW6wkBZP9Bh/xBUThMU4wQOAIDYUIPDE+ousHD3DFcYvbNpohAiVTfNwyjVlXmUdeYOXgv+iHKBIxrEPFee+JfXZejfZiD935rhEjvscGkD9R9CkT/Cnkne9mu4oGyLHMi6X7bE0QwBlZWQRRIbONCUFVfAkpJJVBTSUQO2OsEgqqGJojtxogRoF6a3W4XSPFG2MoYACgfaLM/HFq+fDzuNeYYzVnsYXM6n1vG5XKyIn0+EAaED8BE3EU+YpZDqF6vvASudTKlJKS7mUHb3jo/0/k5VNi8e9fdeWOC2ZhDoc49ns+Hc1xmff6cHRSPGAUc/A8EGfbOPlKFvI9f4PWy8aLKBeZlpANlEkJYOIx4v+33O9B7/HXgU/wHF/cQ6wvt8uwAAAAASUVORK5CYII="),
move;
}
}
.cursor-furina-move:hover {
animation: cursor-furina-move 400ms step-end infinite;
}
@keyframes cursor-furina-nesw-resize {
0% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEUAAAAAAAD///80W/HnxHxdc7r19vomNr0sMHOSw+HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF6Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH7AXnTmAAAAAXRSTlMAQObYZgAAAVpJREFUeAGdk+u2oyAMhY1IqiYz2NZe7PX933J2wAu08+ccFkup+dg7hLT61SCiuq6cs/nfeNN4qqvKxblu2pYegKfPXbx8IUQNsd+ZBTGbCNx3uyYCbSQ2oGNDCDHnTKPvP0wIGiy6EG0EcJZNoRNh1kT86fvoUNVZChwJkaSxKwzor8V5HhT1XUbQGranINe2bXOCSObtXSLsOF8SMQCiiwsh5zaCFCGVgJjKTJRArICEoKphCGKn4SIHVpZhv98HUHgBLgBSfNDhcDyO2Hw6HXTOc1MwzaE+n0eMy6W2JLkslAFhAWCEU5QXZR6C6PWKR8BaP69SRaabCYzjbeKvOGqpgqzu03THCwY5EG+UlNT7x/P58B7Los6pKQi9+IijIU9FmVYb1NbuyFlhKSv00pf0elFqXsUqq9Pa2jS3daAQvg02p/fbZvYl/cGy9qVcP1lgZg3+w/EP658QVWGchVUAAAAASUVORK5CYII="),
nesw-resize;
}
25% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEUAAAAAAAD///80W/HnxHxdc7r19vomNr0sMHOSw+HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF6Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH7AXnTmAAAAAXRSTlMAQObYZgAAAVZJREFUeAGdk+uWgyAMhBsRqia72NZe7PX933IngBTq/irHo0g+ZiCEzTeNiDZNo48x/8bb1oLY6JMBzMldC8C+/9OoW0YIUUXCP1wy4FQE7tttG4AuEhnonSKEmDGqMQwfJgQNx7IQXQQKi75ndk4i8TMM0SFb6PRAMEeNbWVAvxp3qVHQNwVBOaxvxlq7risJIk7T+0jodlYSIQCiDx0mUyoIQsIeMeFE1EDIAHsvIn70rLtxxeEAEMfjbrfzoPABXAEkGJBxfzhMmHw87iWus1BQzbE5nSa087nRRbo6UQr4BYARdlEflHowopcLXh59+TxKYZ6vKjBN19mt4silMJJ3m+cbPjCoAD1REhJr74/H3Vp0qzzHoiDU4j20lixVm1xckFsK73DkpUQsGno+KdauCLqlRKo7SlXtyfu1wdvp9dKnGjPBpcnXkj5XiAsab+qX7Q/O+xBGH3g1xgAAAABJRU5ErkJggg=="),
nesw-resize;
}
50% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEUAAAA0W/H///8AAADnxHxdc7r19vomNr0sMHOSw+HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF6Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH4YbG/hAAAAAXRSTlMAQObYZgAAAVRJREFUeAF1k4nSqyAMhcUIVZN7sa1d7Pr+b/mfgAtozTDI9HxZSEOxZ8YUZanrlxERiKIow/qhV5WlrdNytABGYklBbiIIqp1jJIDTIMh+OFQBqPMs1DhFCJoxGqNtKd5lKQIEy0TUEShmgJqG2TmJxL+2XWeAeyCYY4xDptN/1d1oFOIbWrkHTXdGrXVdpwQRj+5NJPQ6mxBBANGEA5MxC0ECSdhDEx6JHAgdYO9FxHee9TYuq8GJ4+54PHpQ+ADOABL8IN3pfO7hfLmcZKxziaAxu/J67WG3W6lFurxRCvgJQCLcIm+05mCo9zs2j7OsJgoEDw8N0PePwW109FIYVT2H4YkPEmxHUkisfb3fL2txTJswTgRhFl/BKrKUdmEeKjQ3/EdGG0tJo+csnw/F4RWclj6V+XvC5sn7xH39+uj71VXsm0ZPrxkfqNl3iG/c7BJ/NnkRBV0FBaoAAAAASUVORK5CYII="),
nesw-resize;
}
75% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEUAAAA0W/H///8AAADnxHxdc7r19vomNr0sMHOSw+HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF6Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH4YbG/hAAAAAXRSTlMAQObYZgAAAVRJREFUeAF1k4vSqyAMhMUIVZNzsK292Ov7v+W/QVHQmuko437JQhqKvTBGf2X5WyWiwgAqit8AVZWlbdKytABGAi7zVxcJgmpjjRRwWgTuh0MVgDp3ocYpQtCM0RptS5kFckGwRKIOQGrRNMzOyUj8a9u1A9IDwTzWOGQ6/VfdTUGhvqFVetD0ydhrXdcpQcRTejMSepxNiSCAaMKCyZiFIIEk7KEJT0QOhA6w9yLiO896GiUSQBx3x+PRg8ILsG5jBkjwQbrT+dwj+XI5SfAoklNoza68XnvE7VbqJl3eKAV8BGCEU+SNVg+Ger/j4bGW1USB4OGhBfr+MbiNjl4Ko3nPYXjiBYPtSAqJta/3+2Utlkmf40TgVNUrREUWAzoT6dyid/onGcr7uACfD43TiwXFbZjVhdIHkffLHsym0Perv2I/Qo0ZKIOL2cdxwcebvhN/+gkQ3FX6XEoAAAAASUVORK5CYII="),
nesw-resize;
}
}
.cursor-furina-nesw-resize:hover {
animation: cursor-furina-nesw-resize 400ms step-end infinite;
}
@keyframes cursor-furina-not-allowed {
0% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAZlBMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMeP4vPbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH7a66AKAAAAAnRSTlP/AOW3MEoAAAFlSURBVHgBdZIJGqMgDIXjQhGTGWxrF2rtcv9Lzgtu0M+hFWPy80ggpKOI0/4gKksAOuVuSoCyKH8AqqqaVhRB/NNNqAYwEzpTXE5mVUW0XjQSBWNUBMbhUEXAUpYDNUYRQsw51WhbyqtQDcOyEHYBlnOgpmE2RibiT9vGHYo1dV0eCeZJ47BVoa+/GjfzoKjvEgVawzozcrXWTsQMEM/Lm4nQclIgSsQAiCYaTM4pMSsIQsIeMeGZyIF4Auy9iPjOs1ZjshyMGO6Ox6MHhRfgDCCBQ7rT+dxj8eVykjnPTUE1u+vt1mPc71dN0uQHBVcICxACo4oiA7BHCIg+HphCEFxaBijBw1MF+v45mDW+ASCQ1TgMo/YOb0273qbgN77e79cYzeIXgEX1Kw40Y+pOer12b2csuiH1bhaO3llX2VqtPeDziXdmRPt7dwtSJj67W+hH74l8n/uyj++X9PkvMLV/7voHDnQTDfse0KAAAAAASUVORK5CYII="),
not-allowed;
}
25% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7omNr0sMHOSw+H19vo0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMeP4vPbfpCBMF/8xcBBT5QmL06W2v8vLzGHf7ZpAAAAAnRSTlP/AOW3MEoAAAFjSURBVHgBdZKLoqIgEIb/1BCc2cXOoQtrVu//lDuDhNhlKjTm42duUNul5bMBTSOALt+BZte8AqsikoR8NwDatssb+sCrPjoBMvFJAeLtnhpVDMu9su73bQIMNlmgt1bTFZ9zqjEM+UCug5i1lvhJmAysN/c9kbW8EH+GId2wAno8EUSLxh4lzeK32ZD0Xa2Av9mnEEmwxpiFwMv5fiFSPjUAyg4h+vRCcE4JrCEwefExZWIDgLUC5D0z+9GTZqME6hhoPBwOXih5CKxAHSRbHn9+f4McPh5/OIWDAoD1xHg6n4PY5XLSIBlVHSQLa2N8AjGSZLGrKwmRiDGEf2IhxMgisAGUoOmqRAjXyRb/CgghxZunada+0zq0pZssn/l2v99mdCgC9TzIFN2SSber7fLycOjc3Vkj8+zsuwIeD+mfca3pdPY+XYHUEmmXzuj7FUVFfpu9zZ/gAR++A3n8N1v/AUnsE7mbqhMKAAAAAElFTkSuQmCC"),
not-allowed;
}
50% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAVFBMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHM0W/HurGxagrXB4PWSw+FV6f8EAx/+2tM1RIU8EjL/8OiP4vPbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH6Xg9xCAAAAAnRSTlP/AOW3MEoAAAFaSURBVHgBhZKLdsMgCIbJxWogm61Zml7e/z33Q2zUnu6MHimRL79gILXOXG3lmajvAcDVCA3DSAXoOywidxA0AsgEmYQJHAAhO7401FFv3jk9BeTpNBjgqVFQAgghF4JqTBM1NSAEwfIifAFyF/PM7JzsxNc02QlduQe8bgTzrnHKXeTCvzXvspHph6ML6yCn1TNq9d7vxOs2OL8+74S2UwMmYQkQswVMISiRFQQp4YiccCZawG6AYxSReI6s3bimBieOz5fLJYLCH+AGIMGGnJOmGC5JrrMoqOaygEi6lsV6bS7KAM0rsSyMLroG0DM4pR9YShGxtIASvF534Lq6I18AEKhqW9dNPxyXoT3mUPDbbvf7bbOwewcQ0XgzwzDW29Wsj+EenMc01LslwtUHHwY/avQJeDzsmznR+f54BClj6+MR+pAiUUztXvPwfJKuP4F9xt+2un/sF74FEWvlsvUwAAAAAElFTkSuQmCC"),
not-allowed;
}
75% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAVFBMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjL/8OiP4vPbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH6+CU/JAAAAAnRSTlP/AOW3MEoAAAFcSURBVHgBhZOLcusgDETl2IRg6V4cqOM8/v8/uxJ+QJpOmYEY9rBCgpC2zoa6HXOi0wmADrXe9wMdwKlDrz1oALASZBamu90V6rB56EDmT86pCcjzuTfAU+twcYoQtBDUYxypOQM+QbBshD+AkgVdLszOSSH+jaNF6I46YLsRzMXjvGax5vJf9bWDUP9AFbBKGAtB3vtCbPViE4zAF2s6FJTYANuulHAhGPoBkEAWjiwicYqshy0G1RkYQIxKRYBG7AByFMfT9XrVzfhBBKvqDgh2yJQgJRu0HK6pgwadVCwdfAvAg13OqimRs+BOuhYQzjmlL7SUct71DTBivhXgNmst3wANgmMv87zoxe0GB4BchZb743Ff8FEt1295uFsbmsX6rQ/hEZzHa6BPgNY++ND7Yb2FH8DzaXeGA7r9H9CGIGWsfwyhkxSJYmrXmsnrRdp/Bcobf1vq/mjfAEMR/B/Om1MAAAAASUVORK5CYII="),
not-allowed;
}
}
.cursor-furina-not-allowed:hover {
animation: cursor-furina-not-allowed 400ms step-end infinite;
}
@keyframes cursor-furina-ns-resize {
0%,
50% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5j9jnlAAAAAXRSTlMAQObYZgAAAU5JREFUeAGNk4e24jAMRBlikyLtOkBoof7/V+7IqSYs7/lwgslcydIgr36zgB/09XpBYBZEfUEgyxzmuhHzGEdgIuwI/oAf31B1aQ7bwvvIAZtNFoEcKVB4Q0CtLC1HVaUAY0mIDkT+DqAoRLzXjvhTVXlag4VHQqTLscHcKPw13fcLMX+JeZuDbE9hrXme98RgVB9edIS1M6TorI6qRKKIG0FZTgSUkkqgptITE2DmRQckBFUNdRDrxo9VRpvVS73dbgMpfhFOAChfaL3b7xsGHw477eucMljO+ng6NVzn89GK9MmMwIAwADyIXaQjZGcI1cuFj8C9vg+ZirRXS9A019YvdLaqwqpubXuzrmU56VCoc/fH4+4ct3MTBoKzeI8rg0Ni04jQW/uPSjMWo9Ez4PnsJgfKHT5cOPRjHRDCl+uI18s+q2+X+WP+/6x/KdwQniqr3vAAAAAASUVORK5CYII="),
ns-resize;
}
25% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAADnxHxdc7r3/v/19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH52e90oAAAAAXRSTlMAQObYZgAAAVBJREFUeAGdk+n2qjAMxA01siT3FhU3XN//Kf+TQgsVjx/s8WDt/JgspqsfFxFlvxZ6UbjpkNZryjFyABIBPRDE6QSqSx5BN4KYzQTRN5siAOVIWAhTKjaEoNW1eTQNZTmABCEaifIdoKoSYdaB+Nc05SzLkCNzIEQGjw3Ny6T/pvO4KPjXMUIAomxPQa5lWY5ELHN8vRoIKydaDI0KqgSiChuhup4IUkgqHprKSEyANS90QLxXVd96sWo4ZWkIK0u73W49KHwBzgBSHGi72+87vHw47HTMc3Iwz/Z4OnVY5/PRkuRsSsgAHwEEQhX5CFkMgXq54OGx17cxAyH91Qy67trzQkepKsjq1vc3q1o+zKmSOnd/PO7OYTtvQiQwi/ewCnKUtSkh6K39R7U1llKjZ8DzOUwOKXa0TGO4T3h48p6+XLvXyz6rrxfzk/+v6w9nRxCrBobScAAAAABJRU5ErkJggg=="),
ns-resize;
}
75% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7omNr0sMHOSw+H19vo0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5m8CdtAAAAAXRSTlMAQObYZgAAAU1JREFUeAGFk4vWojAMhJ2fCoVkt6h4w+v7P+VOCpWby5/jgR7n6zQJ6YYBbFYDPz/4RV8lor4gMDoWdsRczzKHlRzgCAzEAgBVN/LoAMSI7+02i0COiQMK7z1lamVpHlU1BbiXhGgi8jmAohDxXjviT1Xlsxy4PRIincd2UgX+mu77QPQvMW5Uku0pzDXP855Ire63Fx1h5SSL7mNFVSJRxIWgLAcCSkklUFPpiQGw5sUOSAiqGuogVo3/ZGmIVy/1brcLpPgiPAGg/EPr/eHQcPPxuNc+z8HBPOvT+dwwLpeTJeknnxgGhATwIFYxHQE7Q6her3wErnU+RCrS3sygaW6tX+gsVYVZ3dv2blXL8q5Aoc49ns+Hc1yOm5AIzuIjRgYH/4XYsLnxG5XWWHwaPQJer25yoFzhy5VNYx0QwtplfL/t93/gc0Vi/AMkEBGpd1znagAAAABJRU5ErkJggg=="),
ns-resize;
}
}
.cursor-furina-ns-resize:hover {
animation: cursor-furina-ns-resize 400ms step-end infinite;
}
@keyframes cursor-furina-nwse-resize {
0% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEUAAAA0W/H///8AAADnxHxdc7r19vomNr0sMHOSw+HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF6Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH4YbG/hAAAAAXRSTlMAQObYZgAAAVVJREFUeAGFk4vS6iAMhKUpsW1yDlXrpV7f/y3/DaUK7ThmGMuwH0uIYfM7nLNRVdkSEeVAHIVe156WPtke8gAyAv62yvMKQfW5R9QBsJng9O22jkBTnkItG0LQnDOPrpuBlD/Bg0VnosmA5NCKMOtE/Ou65QnYHgmRyWNb6PTfdE5B0d/RYnvU7FeQa9M0OUEkaXs7EXadlUUUQLRxIuTchyCFpBKgqSSiBGIFJARVDX0Quw0XObCy9LvdLoDCB3ABkGJB+/3hMGDz8bjXlOfHwTz76nQaEOdzZUlyWSgDwgzgINyiLLSdIVAvF/wEzHXRUSBkvJrBMFxHXumopQqyuo3jDR8csG5JJfX+/njcvcf0fcdPLxN68R6jJk9zFcrHgNraf+SssJQV+g08nzQ1r2KW6uTKTKe2DhQC5U9iYfR62dh8D3OHVzU/yi+B/KdX/TP+ACoZEP//b/5XAAAAAElFTkSuQmCC"),
nwse-resize;
}
25% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEUAAAA0W/H///8AAADnxHxdc7r19vomNr0sMHOSw+HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF6Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH4YbG/hAAAAAXRSTlMAQObYZgAAAVNJREFUeAGFk4uSsyAMhcUIVZP/x7b2Yq/v/5Z7EloXdJzNOMh4Pk4ghurvcK6qa33mIKICqKranllvGk9Lm2wNeQA5YeYUvl8Iqi88zJxCUBNk3+0aA9oyC3VBEYLmnHr0PRUpsBYEy5docyA5dMwhSCL+9f0yA5YbwZw8doVO/1UPnyDzd7RYbpqOjL22bZsTRPxZ3iVCj7OyMAFEZxMmlzsIJOEITfhDlIBVgGMUkThE1tOE/IdSkMDDfr+PoPACXAAk+CDD4Xgcsfh0OkjaZ+agnkN9Po+Iy6XWTYayUArEL4BEOEVZaM3BUK9XDBFzWXQUCJ5uajCOtymsdNRSGMW7T9MdLyRYt6SQeP94Ph/eY/pb57mXCb34sGjI03zI7DJobclG++VuneT1otS7IpjOFovrhCFSjIt+LYzeb32qzdBWSfbpOrpNMt1ntw3M8QNOEREOd0SLyAAAAABJRU5ErkJggg=="),
nwse-resize;
}
50% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEX///8AAAA0W/EAAADnxHxdc7r19vomNr0sMHOSw+HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF6Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH54lAGuAAAAAnRSTlP/AOW3MEoAAAFnSURBVHgBdZSJlrMgDIWRCFWT/8fO2MWu7/+Wc4OA0oXjsRzvx02MSY0xDS5rmy8LYoOr1oloBT4corZ1hdAQy6FVdwAKkfSGfH5CUN3qkUOQ92qC6LtdG4FuIUzKn3qvCEGzVj2GIQMlcxAsmegKkPW+Z/ZeFuLfMHR1Dno8EsyLx462daD/qvu0KPrbjQMVWe+MXLuuy0QEiNPxfiH0dbZAtIgCiD5umKxdiOggkIQDNOFE1ECsAIcgImEMrG/jqxy8eB73+30AhR/AFUCCBzL+/P5OOHw4/EjKc3VQz9EcjxPW6WQ0SV8XSoGQAQTCW1QdRRqDoZ7PuAXspQaU4PmiBtN0mf1GzwAIZHWd5yt+EOCtaUlInLvd7zfnsC2fatMP6MVbXC05KlVo7Nr2KG78RlYLS6nQdgs8HrQ0r2BXZse8zBNugULYzM3bWD2fer3MVUXQ6t98ns2UfxTNVwADFf8Z/gAIrxLs9Hr+WwAAAABJRU5ErkJggg=="),
nwse-resize;
}
75% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEX///8AAAA0W/EAAADnxHxdc7r19vomNr0sMHOSw+HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF6Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH54lAGuAAAAAnRSTlP/AOW3MEoAAAFiSURBVHgBdZSNkqsgDIWRCFWTe7G77rb29/3fck9AKIwtwyjT8+UEYqgxprNW54cBvbNx1oOICvAuivreZcJk81dMRw5AJkw2J58JguqKR0lB3qsJsh8OfQQGalOMXhGCZq16TBM1KRALgiUTQwaKPo7M3ksi/k3T0O5BwyPBnDwOVNeB/qvut0HR31YOVGR9MvY6DMNGJIB4Cx8TocepgWgRBRBjXDBZG4nkIJCEAzThjWiBWAEOQUTCHFhPo0QFiOf5eDwGUHgB1m0UgAQ/yPz1/b0g+OfnS2KOrjqFes7m93fBOJ2MbtK3hVIgZACJcIqmo0hzMNTzGY+AtbSAErxe1GBZLqt/6QUAgeJd1/WKFxLsmpaExLnb/X5zDsv8qep+QC/e4ujJoUE3wtZtr7XTj2Sp1NG2wONBqXuxyHfH7C6UShTCtgf75mbR86kz6e+A5LE7xW6kK20+Auk/wZg/GfsS6WMW4z0AAAAASUVORK5CYII="),
nwse-resize;
}
}
.cursor-furina-nwse-resize:hover {
animation: cursor-furina-nwse-resize 400ms step-end infinite;
}
@keyframes cursor-furina-pointer {
0% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAY1BMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5j9jnlAAAAAnRSTlP/AOW3MEoAAAFhSURBVHgBfZKJmoIwDISDUEtJdouKF+Lx/k+5k1Ck+OHWDyzM38lBCKv4bxFtNqvEdPAbQGVZ0SeQBaMKgBEGTG7ujUKtRg8Dkgk5pyj47bY0wNMbMLfaKULQQlCPppkB8yB4OJaJ8BOwSQDVNbNzMhI/TYMIBRAjAOhxI5hHj625FiNB9Ku6S4vMP5iDpW3RR1nvjFy990rMTeJ0vB4JLScHLAMTQNS2YQohvLtLAkk4QhNOxBKwDnCMIhLbyFqNW+TgxHG72+0iKPwBXgAkeCHt/nDocPh43EvKc3ZQz/Z0PndYl8tJk3SpURMBIE4AAqGKYgFoDIZ6veIWsZcloAT3NzXoulvvkp4DIJDV0PeDdp6nMcvmVPAb7o/HfbBt8Qnop6/utqqsvOWsV+ERnMc0zMnnOloffCh9pbs14Pm0b+ZE53s1BClj12oIfewiUezy2j6A14v0+gqM85m//ANlhBKWZk+UywAAAABJRU5ErkJggg=="),
pointer;
}
25% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEUAAAAAAAD3/v/nxHxdc7omNr0sMHOSw+H19vo0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMfbfpCBMF/8xcBBT5QmL06W2v8vLzHXmytjAAAAAnRSTlP/AOW3MEoAAAFgSURBVHgBnZNtn+IgDMSjrRSa3FG1Plyt+v2/5U0CVNyu+2LxofycP8MEImFsfhpE2y39CijOnwBqmpYWYB2DWgBGGLAyIaht8igAvfbF927XGOBoAdSDOu+1bGghqEffJ2CbANW89yyFcAZsEpEcOmbvJRF/+h47AEiEPrHcCObksbNEKVXRfR5k/iE55Mr+Zk0hRljnnBIFeK3vEmH11ABxFkB0NmEKIbwOWS2EIzThTLwBJHoCHKOIxCGyVqME1Rl42O/3ERQegBWoQ4qX4XA8jlh8Oh3E4tACkOiK4Xy5jBjX61lDClXngCoAxAJgI1SxySeZPRj5x/GfvSPm8g4owdMNMvTb5LNeAyBwePM0zXrvXJq26jPBa74/HveZWsoGNWCdeLeB217SV/ozUBsewTv0c/BrB3o+cX8uNK7V3vtuC7IrwXVpg663WFzwqX75AoyRKI6fAevPt3/if547Eznt3lgVAAAAAElFTkSuQmCC"),
pointer;
}
50% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAUVBMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHM0W/HurGxagrXB4PWSw+FV6f8EAx/+2tM1RIU8EjL/8OjbfpCBMF/8xcBBT5QvLzEmL06W2v86TH4EXZ3sAAAAAnRSTlP/AOW3MEoAAAFKSURBVHgBfdMJloMgDAbgqFAwcQbLWLvc/6Dzh8WttnlPpeYjbJYQzVnU90RtW8WWUtcZegN2EWQAkjgHhKzJNRKow1mrLfy8XLoEHGVQi0CAEHLea42+X0GZEARLFW4LtAYNA7O1ksVP37syhzYD7Z4Ec65xSatosmjpV/O2BKX6Xis0WdCS1jtjrs45FXkvNLh0H7LQ5VSwLDElIIbUYPLeL9tPgpRwQE64iD1IO8AhiEgYA+tq7HYIsmJ5vF6vAQoP4B0gwQsZo6YYtyhlnmsFrTlGiHzpJNPhrqtQoH0ReKAg5/NZgI7BMf4hYgxoyx6o4OmmIsbbZEt+C3LM0zSX5gE0dPfGzI/n8zEb4+vntwedeaTAYZ8AHcT4p7cO3/O6xYe/i3e+c2Zb9wD0zKx8Afc76fUZxEAU4hfwepFeH0Gz2aJz8Bb/SjoQ/I2ZKL0AAAAASUVORK5CYII="),
pointer;
}
75% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAUVBMVEUAAAAAAAD3/v/nxHxdc7r19vomNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjL/8OjbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH4vNCRsAAAAAnRSTlP/AOW3MEoAAAFeSURBVHgBdZONlqsgDISjQikm92JZa3/e/0F3ElDU43IOis7HJAQgtO6qrf+J+v6KoGFwdAZ2XuQAGHEA/DaC6oqHAWs473WEz9ttMCBQAaoJ3b0iBC1G9RjHBtSEQLCsRNgD6kH3O7P3Uoh/4xhqDn0BdLoRzMXjZqvoCtHTf9VrB6H+UR26QlCV8CwEhRCUKLVAjsQmGIER63IoxlY8tcB/aMKFYOgNIIEsnFhE0pRYk1WDrpVZK8ApJaUSQCM2ACUSz9Pj8dDJeCGCVXUDBDNkypCyPbQctndbCA06qVg6+CMAD1iYgVkgYSn70wBhTjn/oOWcfNUbYMT8VCLn56y1PAEaBGkv87zg5avBHsBahZbX+/1aMNiyP55l97LmdpGPZ93Fd/QBp4GuAK19DHEIznbhAvh8bM+QoG834HTdwFi/DKGfORGlvF/8Cfh+SfufgB2/w32/vvu79guK3RGrzvNJLAAAAABJRU5ErkJggg=="),
pointer;
}
}
.cursor-furina-pointer:hover {
animation: cursor-furina-pointer 400ms step-end infinite;
}
@keyframes cursor-furina-progress {
0% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAVFBMVEUAAAAAAAD3/v80W/HnxHxdc7r///8mNr0sMHPurGz19vpagrXB4PWSw+EEAx/+2tM1RIU8EjL/8OhV6f/bfpCBMF/8xcBBT5QmL06W2v8vLzE6TH4EW5aDAAAAAnRSTlP/AOW3MEoAAAFXSURBVHgBdZSLuqMgDITHqi0SXJTW2sv7v+dOEEHcbs6nxMxPLgctgCYaNmvOBly2IFq1HSgogQORo13X58yXRADXrPcEEhGBSOB6TQSo9nuODSChuhKsfrt1ETAowAXZqLWt5hiGDGzzAdZacTthMpAmwjiKWOsSMQwm9bCPw+2RENmIW9qX5D+q22TY82cAWda7WMAYc8wASNo+boTN53LoIAokxuhIXcJRcuKpOUnEPz0IAe+c85MXncZWPVhnZfI0pbwnXAFwDLhp9nPgZi6u1Eh3zTnN8xzu98BFm6wAEgR8CAqEwEKnKViENYTa46EAfVcDSsjyDNGei816AUjwn7cuy8qFBc4AU/Bvfb3frzW6zRmgh/4VjS/jMVzcrm/frTV8G47R4vGzaE3bmR7lA6mAzyeemXXIJ3UqAWXi9bOEPgQP+FDHqofvF3r9F2h+/AT8BXZLEzTw4ilmAAAAAElFTkSuQmCC"),
progress;
}
16.666667% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAUVBMVEUAAAAAAAD3/v////80W/HnxHxdc7omNr0sMHOSw+H19vrurGxagrXB4PUEAx/+2tM1RIU8EjL/8OhV6f/bfpCBMF/8xcBBT5QmL06W2v8vLzERj01bAAAAAnRSTlP/AOW3MEoAAAFSSURBVHgBdZSBuoIgDIVnFw3ndlHLrN7/Qe8ZIKh111cS5+ewMT6JqIlBKZpzEF3SJP1YfAU2wjlX9OplQCGq3rYd7YBI7ByoA5CJBIDY5UBQu80jA5dcBECi67WNgKeSQ1R6ZhtAc848hiEDKWHTmFl0I/wGlHr6XoRZMzEMcYemVoblkRBJxDVXsdc5B23+FaDfrBkkSNZ7v3eo6/tEcGncdlySBRB9HMhpC0gqAZpKJg4AqZ2AhKCqYQxi1fA5BxkDwqgQAJ8BZR2nMM23m+ChXCzSj9qKcZoMmPGwJJV2J4kqAIQ5Bzb6qAJTKtDudwMw1iNghCyPZPBYuOgVAIHDW5dltb5LbXLppuKzPl+v50odFYMKxJv4jIFu76bL4O2ocy/HHvfZ8acDvd9EzrvWd3b3vm1BsSVol13tzy2KC76HucOfORCF+X+g+fIK+ANZ6xNSYH0k9QAAAABJRU5ErkJggg=="),
progress;
}
33.333333% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAUVBMVEUAAAAAAAD3/v/////nxHxdc7o0W/EmNr0sMHOSw+H19vrurGxagrXB4PUEAx/+2tNV6f81RIU8EjL/8OjbfpCBMF/8xcBBT5QmL06W2v8vLzH2k1B8AAAAAnRSTlP/AOW3MEoAAAFSSURBVHgBbZSLeoMgDIWPnVKMYXipte37P+gOiCCu2TeMOT+5CF8BNNGwW3M14LYH8RPsK3Aisl5yBSATRW/bDicgEjDGHMGOQCJ2gETQEwGq3ZEjAbc0BEHgfm8jYJF7iEovInSoGRNyDEMCypcgoe4g7AHkefpeVcQlYhhihaZMxu2RUN2Je5oiyb9Bl2Q48mcAWQ6rsldr7TkDoGl7vxOSDw6lgyiQ6KOjdQlHyamn5jQR/3pQAt6N4zh5DdNI1YM40cnTRh25Eq4AOAbcNPt5YQY+XKmR1pBzmud5ofERmqwAEgSWbExYT8EirKGUHg8unr6rgUDo+tz3P1fJegFI8ONt67rxwQJXgCn4t73e79cW3eYK0EP3isbLeA4Xt+3M24jlbThHi8c7baxpbYd8/2vg84lnJg75pC4lEJj4/7VEeFk84Jc6dn5pvvwE/AHIXBOE4i9gugAAAABJRU5ErkJggg=="),
progress;
}
50% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAVFBMVEUAAAAAAAD3/v/////nxHxdc7o0W/EmNr0sMHP19vrurGxagrXB4PWSw+EEAx/+2tNV6f81RIU8EjL/8OjbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH7seZvAAAAAAnRSTlP/AOW3MEoAAAFXSURBVHgBdZSLuqMgDITnbJWCwUVtrb28/3vuBBDE7Uk/JWb+XKh8AvjJhoNfDfizR3G5XIpfWAI7oUAm0HU9KqAEU1ROiegJZCICJGCM2RuAar/XSEAmkEpdr10ELCqQCDjK1IzRGsNQgLRBwDknfidsAfKOMI4izvlMDIPNM+yTMT0SIom45rws/1XdZcNevwAost6Fs1prjxUAyeljIlx5MYcJokBijI60LTwlL4Gal0z8N4MQCBNtDqK7cc0MzjuZAwEvExfCDQDPgJ+XsEwiExdfe+S71pyXZdEWXHTIBiBBINyyBRZsd8Em7CHU7ncF6PsWUELWRyrwWF3RK0CCf962rhsXNjgDLMHf9ny9nlt0f84APfTPaDyMx3B1u968jLM8Dcdo9XgmjTWd7dX7Brzf8Z05j/KmTi2gTLy+ttCHWwDCrY01D58P9PoViF+A0zfgH36tE0Hz7YLeAAAAAElFTkSuQmCC"),
progress;
}
66.666667% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAVFBMVEUAAAAAAAD3/v80W/HnxHxdc7r///8mNr0sMHP19vrurGxagrXB4PWSw+EEAx9V6f/+2tM1RIU8EjL/8OjbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH5ZLj7CAAAAAnRSTlP/AOW3MEoAAAFeSURBVHgBdZSNnqMgDMSzRVti8EStZz/e/z1vEhDB32121cj8mYSKEtGPBZWsDaKbjZNzrgJOGoASqlcAdV1fnG9KkBL3Yx71ADJhgHnQHZHKQe0PjwQYkXS4PB6dAZ5OQKtAZ8jQnFOPYShAWiIRM0s4CF+Ao7NxFGEOmRgGn3s4loPpRogk4pHnZfmP6pyDDv8CUJH1LOjVe187EEmePiaCy6OpOuBJjBiNkLZEgBQkQgsyTsnj2oMAiCGEOEfR1XDTAweWOSKUihFwA1DAQJiXuKyTCC7hrJHP6jkvy7IicNEmGwAEgGld8Y9AocsqUAQ1BNrzqQDy0AJKyPY3GUwbF/0EQODH27dtxwUFrgAs8Le/3u/XbunPFUBG/csCm7EervZ6796OPXZDPXpmeDGcd53vqXlFzuzzsWfGgcqTupQgZez4bwm9WSNRXNux5ub7JT1+BewbcPkK/ANcohMl0Ez1OAAAAABJRU5ErkJggg=="),
progress;
}
83.333333% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAUVBMVEUAAAAAAAD3/v80W/HnxHxdc7r///8mNr0sMHPurGz19vpagrXB4PWSw+EEAx/+2tM1RIU8EjL/8OjbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH6gqjoqAAAAAnRSTlP/AOW3MEoAAAFRSURBVHgBdZSNfoMgDMTPqi2SONRa+/H+D7oLIorrbj8l5v4kMLQAqiisqs4CLmsStWkDdpTAgcjZpmlz5UsigGv2WwKJiEAkcL0mAnTbrcYKkDDfCHa/3ZoIOOzABVn06tpqdF0G1v0B3nvRjXAZSDtC34t4r4noOpfWsG2H0yMhshK3NC/ZP+b7JGz1M4Bs21084Jw7VgAkTe9XwudzOawgGiT6GEjZQmmpBHoqifizBiEQVDUMQWw3vliDVy9DoIwKgXABQJnQYQzjxMkcdO+R7lZzGMdxojjYIguABIFpExuddsEm7CH07ncDGGsJGCHzYy3wmH32d4AE/3nLPC8c2OAMsAT/lufr9VxiWJ0BRmifUXwZj+k9bNr6VXvHt+GY3SN+FrWrG9di/0AK4P2OZ+YV+aROLWBMvL62sIcpAGEqc8XD5wO7/gWqLz8Bv1Y0ExKZXlp5AAAAAElFTkSuQmCC"),
progress;
}
}
.cursor-furina-progress:hover {
animation: cursor-furina-progress 900ms step-end infinite;
}
@keyframes cursor-furina-text {
0% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAclBMVEUAAAAAAAD19vrnxHxdc7omNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMeP4vPbfpCBMF/8xcBBT5QmL06W2v/rhCFXIxsvLzH77OWAPC6PVjtFQ0LzN+ZXAAAAAnRSTlP/AOW3MEoAAAFkSURBVHgBdZOLlrIwDIRjRSjp/4N3K+JlEd//FXcSCqXqzp6zzcl8TdMSKWjxl4iM6B2IW2S3+ahAy2UWUlho2D+DKAMQiBkwnUNws7HGHMBReuZqtVQgpxQopFkieNZKjbKktEm9ELuRyEdgvCYVBbMxbiD+lWUeeg8PJaASzEON1XQLXf6Lb4JI61uKAE22/Gc0lef5QASAOGwvBkL6ngNaQg0QhQZM1goRKjhYjit4jgORAvoCXFXOuaquWG5jkh6MM1yv1+sKFBbACUAOCVdvttsdNu/3Gxf6jBWkZn04HnfQ6XSQJk36UEh5D+B8BuA94xaLBMAZ3u+CvHf4aAkgBDeXwb80ZvIjAAJdtU3TygBwHNppDh3+2uvtdm01XLwDiCi7qjCM83QM75m9WZNjGubZGNk7PVSkH+ET+LlT1z37vqf5Ly1GD6LXq4MPgh7fgGcHKdD3X4E+6vkVSDSlfwGznBgJNOX1eAAAAABJRU5ErkJggg=="),
text;
}
25% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAclBMVEUAAAAAAAD19vrnxHxdc7omNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMeP4vPbfpCBMF/8xcBBT5QmL06W2v/rhCFXIxsvLzH77OWAPC6PVjtFQ0LzN+ZXAAAAAnRSTlP/AOW3MEoAAAFaSURBVHgBfZONtpowEITHiBA2LfhvRFSq9P1fsZMQSKhc555z8WS/HWYXQNDqJwHK6RtA5NMhnvCKz36s1xm+AMgIBGIJAKvZ6JEAw335f7NZeyDHLCQKDkOxprXzKEukY3pSKTEjkY/AuCgUhYhSZiB+lWU+ZgjJ2O4JkcFjM00R6yoI3l+nDvgdag4Shs3zfCDwX38xEH6eFICEAonC/xBo7QjECEYq1owEYgbAuA1IVRljqroSN40jkGaQervdVqR4IeyANKRRpt7t9wc2H4874+NgAmBcR306nw/U5XJyIQ2SPXAKpawlcL0SsFY4xSrdJGhh7SHIWkODGeAIaW5D/daoqR4BElxe2zSte+6SvrSjBf/a++Nxb5FhMoiAexOfdy8+7eQ4fglaP9F5QatPB3T488Tr3VNIPrXo1fXA35erk1i4xap7v6gB6LsloI96LwIzTcf/ABQQF+/mMY54AAAAAElFTkSuQmCC"),
text;
}
50% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAclBMVEUAAAAAAAD19vrnxHxdc7omNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMeP4vPbfpCBMF/8xcBBT5Tc+P0mL06W2v/rhCFXIxsvLzGAPC6PVjv77OUc4Cr1AAAAAnRSTlP/AOW3MEoAAAFbSURBVHgBfZMLl7ogFMQnNB+X/197R9b22Oz7f8UdEBSy3emc4DA/xnsR4bX4TYCy+gsgMk+YVjhivh9ZluMdiFKQE/BEBIxBoJuHjBhgLe7py2XmgAJJkShtNwC9qrIZdY20TTcVHYgiAOGgUJYiSumB+FfXRajBV8btjhAZMpZjF274b33lBZdfRQkYbfsvrLUoioHwAMRvLwfCthMDLsIZJEo3EVSVJXyCpqWloafFEyngTkCaRmvdtI3YblRSg9JK2tVq1ZDiQDgBoLmg2/Vms+Xm3W6tfZ1Tgs1s94fDljoe97ZIlR4Ul4whcDoRMEbYxSIB+Axjtl7GaL60BLCEdOfBP3dq9CeABKu6dN3F3hCJL22I4O/rertdL266eAc4Q37HleJljJeDHjzbOx5UnkXfQQzg+45n3/dwL2EO9C/gRb9H/ClGwPNFWaAHHh8TJj0/AonG5R+lRRcKIjzcxwAAAABJRU5ErkJggg=="),
text;
}
75% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAb1BMVEUAAAAAAAD19vrnxHxdc7omNr0sMHOSw+E0W/HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjLDoMVWXLL/8OgaFF7///+Dw+k9WMeP4vPbfpCBMF/8xcBBT5QmL06W2v/rhCFXIxuPVjsvLzGAPC777OVR/dk/AAAAAnRSTlP/AOW3MEoAAAFlSURBVHgBdZOJkrIwEITbiByT/wdvI+LB6vs/4/YkAYK6vVWbVPrLHGFE1OIvAUb1DkxX9Lb5iIDlMotHXBDuJxAyApFIgDEP6GZDjBRgKp9ztVp6IMccKLRYgF5ZaoyqwrxI35DYgcgHYGgTRSFijA3Ev6rKY+3xoRT0hEiIsRq78Mt/9U0UfPwSE4DR1v/CovI8D0QEIPF6EQitG6USQwrviicKvxH6EwBLy0pNz0okQoCkBiFQW2vrphbtxsxqMNZIs16va1JcCJvh+UIGHthms93ueHm/31ifI3kHaMzmcDzuqNPpoEXOABLGOEfgfCbgnLCLxQxgDud2Uc5ZfrQZoIS0l+BfWjP6E0CCZXdt2+kAyDS04xxa/nXX2+3a+e3iHeAO2dWLw5geJ7Oe3VGanNOQno67Bx//jgcVv8IH0OPnjmff90h/aSnwAl70SeDxDXi+KA/0/Vegn/T8Csw0Hv8CYxcXfW9csc8AAAAASUVORK5CYII="),
text;
}
}
.cursor-furina-text:hover {
animation: cursor-furina-text 400ms step-end infinite;
}
@keyframes cursor-furina-wait {
0% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAUVBMVEUAAAAAAAA0W/HnxHxdc7r////19vomNr0sMHOSw+HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjL/8OjbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH6qU4knAAAAAXRSTlMAQObYZgAAAUtJREFUeAF1lI3esiAMxT1ohG69KJl93P+FvmdoT+LH+hnk+W+MMaoqzFadGpzZBig8cKDXdbMmLvZj5YOGwI/A5WIE/PcNqDa/GKYbAe8tCFe/XusMBHzzybtA6w0BNecsRtftMich+iXCFkDbinivM3HrurDR6Z4JkTnGtdDxz3S/GHL8dXHwJ9u3MNcQwpoAZHFvZ8K2swuRBRJtnkhxAlBKKpGaykKUQK6AxKiqsY9iu/FFDl699JFmVIyECwDKF9oPcUh05qBLnr8IFrMfhiHdbomDJenLQhkQUzIgJS7EXZSFtjWE2v1uAOe6PUoVGR8p22P0O521VGFW0zhOHLjArs2h/EzP1+s55elB+7NXn9nYjIfXhL3qXs4HdsOxztK74OrQYHdPZuD9zmfm1fr7MASMyc/ZTUWKQEznFxmfD+w5BaqDf4L/oTMP23X/FksAAAAASUVORK5CYII="),
wait;
}
16.666667% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAATlBMVEUAAAAAAAD///80W/HnxHxdc7omNr0sMHOSw+H19vrurGxagrXB4PVV6f8EAx/+2tM1RIU8EjL/8OjbfpCBMF/8xcBBT5QmL06W2v8vLzETgP9DAAAAAXRSTlMAQObYZgAAATxJREFUeAF9lA2WgjAMhMkWLCFxA4io97/oTkpXoVXjU/qcr5OkPzQNbdF8DPrx+AI0FEIo9aMl1XrbdvTFgToAT6KugaB2L49nF1te/J5ObQJi4dszOwktBPcYBirqJmYW/SdiAcChF2HWjTgPQ5kB0xMhsnmc3uicg5L/oXf6zZpDgmJjjHviNb/fiNTPHiDJAog+DeS4wG6hYtBUMnEASH0FxExVbTTxbpygvYGMhnDKDLAD+wzKOk42zeez4KG5zlcGnzFOkwMzHl6k7s8MugBgcw4kQhfHhcRfKtAuFwcw1uKUgZDluhlcF650JFFBVeuyrL7vUt8DUnzW2/1+W6mjyiCfxFsK7PY7/RGoC/fAEec5cE3Q44H9i6GNnZ+9dxaUtgTbhcGHm5hc8G0+Bc1GZPO3m16/Cf4ABSUQu7cc80wAAAAASUVORK5CYII="),
wait;
}
33.333333% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAATlBMVEUAAAAAAAD////nxHxdc7o0W/H19vomNr0sMHOSw+HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjL/8OjbfpCBMF/8xcBBT5QmL06W2v8vLzEdYk8rAAAAAXRSTlMAQObYZgAAAUNJREFUeAF9lIHeqiAMxdtVFrpxUTOr93/R7wzJBK31S8nz5zDH6HKhNS5fg/5Z/AASUeulJR31pmk/z8g5h1+7OdQC2AjTjSDenkBtPx7vtyBmM8Hwem0S4MuVqWNDCJpz5tH3VWoEDxZ9E74GqOtEmHUlQt/XK2B6IkRWj2uh03/TOQclf7cjaJPtKsjVe78niCRP71bCXudgkQQQXRpILnDWFZJKhKaSiRJIFZAYNYQwRLG34SIHVpYhIoIEXAEXACke6DDGcYIDbprz/DiY5zCO44TAzZLkslAGTFvAUKpC2xoC6XbDJWKs9VaqyHxf599nPuiopQqyWuZ5wQ0LHNqcFJ/l8Xw+ljQ86X706iMFmvH0mKBX3dOxRzec6yi9867xLe02YQ+8XmnPWK2/Ty3ImPT9dlJpikRx+nXSj/8Ef1T4D9nk1/UuAAAAAElFTkSuQmCC"),
wait;
}
50% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAUVBMVEUAAAAAAAD////nxHxdc7o0W/H19vomNr0sMHOSw+HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjL/8OjbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH7diR/EAAAAAXRSTlMAQObYZgAAAUtJREFUeAF9lAvWqjAMhI3QWEi4BUV87H+hdxKqUIQ/HmyP83WahtQTghCnv4LO5/OGKJcYUBJUVTUtrMnFNlQD+BAUQvDlxN81UOvFw4gZYDOB0+VSORAXwoGGDSFoIZhH2y5p5AGE6IeIC5CxphFh1pno2jZudCx3QmT2uJQH/2c65yD3DyuCvrJ9C3KNMa4JIsnLm5mw4/xYuACi8Yl86jPrCkklQVPJRAl4BSSlDtEnsdNwkQMrS58AqHQYABcAKX7QfkhDJ9Jh0Jzn4mCe/TAMtgUGS5LLQhmQrjkSDGVTaNtDoN1uBmCu2yZUkfE+G9xH/tFRSxVkNY3jhAEb/PQ5KT7T4/l8TD7daX706sMDzbh7T9Cr4Rk4ohv2dZQ+xFDFmlYvYQ28Xv7OWK2/dy3IGH+OripdE1G6Ht9ker/JnkPA/wg2/v8BLUEQIjbsiE4AAAAASUVORK5CYII="),
wait;
}
66.666667% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAUVBMVEUAAAAAAAA0W/HnxHxdc7r////19vomNr0sMHOSw+HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjL/8OjbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH6qU4knAAAAAXRSTlMAQObYZgAAAU5JREFUeAF9lIuaqjAMhE3BWEg4BeTg5f0fdCeBFSplo1g+5u80DamXCyEufwSFEI7AblIoAVRVNe0crjZhtxDVADaCrggA/HkCtd57uA6AzQRmt1vlQKQPYHfUsCEELQTzaNttkXUAIfpLxA1YsaYRYdaF6No2fumY7oTI4nHLdPpnOq9B7r8vD31k+xXkGmPcE0SyTm8WwrZzsOBOnGickOwlkUJSSdBUmm7xyACvgKSkqqlPYrvhLAdWlj4hjEoJcAaQ4oH2QxrGTgSDrnluDubZD8MwIjBYkpwXyoBuHPFFYCHsIi+0rSHQ7ncDcK9fbQZCpv+LQTfxQUctVZDVPE0zBixw7FPFZ348n4/Zbwv9j159eKAZiycFvRqegSO6oayj9CGGKtZUOkoAXi9/Z6zW30ULMsavs8NKYyJK4/lZpveb7DoF/K/gy/8H0u8P7Sx8b8sAAAAASUVORK5CYII="),
wait;
}
83.333333% {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAUVBMVEUAAAAAAAA0W/HnxHxdc7r////19vomNr0sMHOSw+HurGxagrXB4PVV6f8EAx/+2tM1RIU8EjL/8OjbfpCBMF/8xcBBT5QmL06W2v8vLzE6TH6qU4knAAAAAXRSTlMAQObYZgAAAUdJREFUeAF1lAsaojAMhBnAWEh2C4j4uP9Bd1JgpTzih63MnzRNU4sCsxWXhtJtB2QeONGrqt4SN/+x8UFN4EfgdnMCsr4B1foXw3UnIOJBuPr9XiUgYM0n7QKNOAJqZekx2vaQOQm1lQh7AE2jKmIz8adtw06neyJU5xj3TMdf12UxpPjb4uC/7N/KXEMIWwLQxb2ZCd/OIUQSSDRpotkJwCiZRmqmC5EDqQIao5nFLqrvRrIcxES7SHMqRsIZAOML6/rYD3TmYEuevwges+v7fqBx8CQlL5QDw2pciLvIC+1rKLXHwwHObX+Upjo+5wDPUQ46a2nKrKZxnDhwgUObw/iZXu/3a0rTk/Znr76SsRlPrwl7tXyXEtgN5zpLX4ayCjUO92QGPp90ZmLe36ch4Ex6rm4qhgjE4foi4/uFP5dAcfJP8A/Hmg/yKBosWAAAAABJRU5ErkJggg=="),
wait;
}
}
.cursor-furina-wait:hover {
animation: cursor-furina-wait 900ms step-end infinite;
}
/* end furina-cursor.css */
</style>
<template>
<div class="progress-bar">
<div class="control">
<label class="control-label-start">
<input class="control-radio" type="radio" name="control" value="start" />
<div class="control-button">Start</div>
</label>
<label class="control-label-stop">
<input class="control-radio" type="radio" name="control" value="stop" />
<div class="control-button">Stop</div>
</label>
<label class="control-label-reset">
<input class="control-radio" type="radio" name="control" value="reset" checked />
<div class="control-button">Reset</div>
</label>
</div>
<div class="container">
<div class="area">
<div class="outer">
<div class="inner"></div>
</div>
</div>
</div>
</div>
</template>
<style>
@keyframes progress-bar-move {
from {
left: -100%;
}
to {
left: 0%;
}
}
@keyframes progress-bar-glow {
from {
left: -400%;
}
to {
left: 0%;
}
}
.progress-bar {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
height: 100%;
}
.control:has(.control-radio[value="start"]:checked) > .control-label-start {
display: none;
}
.control:has(.control-radio[value="start"]:checked) > .control-label-reset {
display: none;
}
.control:has(.control-radio[value="stop"]:checked) > .control-label-start {
display: none;
}
.control:has(.control-radio[value="stop"]:checked) > .control-label-stop {
display: none;
}
.control:has(.control-radio[value="reset"]:checked) > .control-label-stop {
display: none;
}
.control:has(.control-radio[value="reset"]:checked) > .control-label-reset {
display: none;
}
.control:has(.control-radio[value="stop"]:checked) ~ .container .outer {
animation-play-state: paused;
}
.control:has(.control-radio[value="reset"]:checked) ~ .container .outer {
animation: none;
}
.control-radio {
position: absolute;
width: 0;
height: 0;
}
.control-button {
margin: 0.125rem;
padding: 0 0.5rem;
width: 4rem;
border: 2px solid var(--color-green-700);
text-align: center;
border-radius: calc(infinity * 1px);
cursor: pointer;
user-select: none;
}
.control-button:hover {
background-color: var(--color-green-100);
}
.control-button:active {
background-color: var(--color-green-50);
}
.container {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
}
.area {
position: relative;
width: 75%;
height: 1.5rem;
outline: 2px solid var(--color-green-700);
border-radius: 0.25rem;
overflow: hidden;
}
.outer {
position: absolute;
left: -100%;
width: 100%;
height: 100%;
border-radius: 0.25rem;
overflow: hidden;
animation: progress-bar-move 60s linear 0s 1 normal forwards;
}
.inner {
position: absolute;
width: 500%;
height: 100%;
background: linear-gradient(to right, #00cc00, #00cc00 45%, #ccff00 50%, #00cc00 55%, #00cc00 100%);
animation: progress-bar-glow 5s linear 0s infinite normal none;
}
</style>
<template>
<div class="bouncing-ball">
<div class="control">
<label>
<input class="control-check" type="checkbox" />
<div class="control-button">
<span class="control-start">Start</span>
<span class="control-stop">Stop</span>
</div>
</label>
</div>
<div class="container">
<div class="box">
<div class="ball"></div>
</div>
</div>
</div>
</template>
<style>
@keyframes bouncing-ball-vertical {
from {
top: 0;
}
to {
top: 100%;
}
}
@keyframes bouncing-ball-horizontal {
from {
left: 0;
}
to {
left: 100%;
}
}
.bouncing-ball {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
height: 100%;
}
.control:has(.control-check:checked) ~ .container .row {
animation-play-state: running;
}
.control:has(.control-check:checked) ~ .container .ball {
animation-play-state: running;
}
.control-check {
position: absolute;
width: 0;
height: 0;
}
.control-check:checked ~ .control-button > .control-start {
display: none;
}
.control-check:checked ~ .control-button > .control-stop {
display: unset;
}
.control-button {
margin: 0.125rem;
padding: 0 0.5rem;
width: 4rem;
border: 2px solid var(--color-green-700);
text-align: center;
border-radius: calc(infinity * 1px);
cursor: pointer;
user-select: none;
}
.control-button:hover {
background-color: var(--color-green-100);
}
.control-button:active {
background-color: var(--color-green-50);
}
.control-stop {
display: none;
}
.container {
position: relative;
padding: 1rem 0;
flex-grow: 1;
flex-basis: 0;
min-height: 0;
}
.box {
position: relative;
aspect-ratio: 1 / 1;
left: 50%;
top: 50%;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
transform: translate(-50%, -50%);
padding: 0 3rem 3rem 0;
border: 2px solid var(--color-green-700);
box-sizing: border-box;
}
.ball {
position: relative;
left: 0;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: radial-gradient(circle at 37.5% 37.5%, var(--color-green-50), var(--color-green-600));
animation: bouncing-ball-horizontal 1280ms linear infinite alternate,
bouncing-ball-vertical 720ms linear infinite alternate;
animation-play-state: paused;
}
</style>