.spinart{
    display: block;
    background: url(../img/background.png) no-repeat center / 100%;
    overflow: hidden;
}
.wraps {
    width: 100%;
    height: 100%;
}
.svg-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: none;
    touch-action: none;
}
.cursor-img {
    position: absolute;
    width: fit-content;
    height: fit-content;
    pointer-events: none; /* Prevent the image from blocking pointer events */
    visibility: hidden;
    left: 0px;
    top: 0px;
    z-index: 99;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinning {
    animation: spin 4s linear infinite;
}

.stopping-1 {
    animation: spin 3s linear;
}

.stopping-2 {
    animation: spin 3s linear infinite;
}

.stopping-3 {
    animation: spin 3s linear infinite;
}

.speed-1 {
    animation: spin 4s linear infinite;
    animation-duration: 2s;
}

.speed-2 {
    animation: spin 4s linear infinite;
    animation-duration: 0.5s;
}
.speed-3 {
    animation: spin 4s linear infinite;
    animation-duration: 0.25s;
}
.left{
    margin-right: auto;
    width: 243px;
    height: 100%;
}

.pallette{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 220px;
    height: 100%;
    margin-left: 10px;
}

.right{
    margin-left: auto;
    width: 560px;
    flex-direction: column;
    height: 100%;
    display: flex;
    align-items: center;
}

.btn1 {
    width: 311px;
    height: 109px;
    border: 0px;
    text-indent: -9999px;
    cursor: pointer;
}

.btn2 {
    width: 310px;
    height: 90px;
    border: 0px;
    text-indent: -9999px;
    cursor: pointer;
}

.btn-slow{
    background: url("../img/slow.png") no-repeat center;
    background-size: cover;
}
.btn-slow.select {
    background: url("../img/slow-select.png") no-repeat center;
    background-size: cover;
}
.btn-slow:hover {
    background: url("../img/slow-select.png") no-repeat center;
    background-size: cover;
}

.btn-normal{
    background: url("../img/normal.png") no-repeat center;
    background-size: cover;
}
.btn-normal.select {
    background: url("../img/normal-select.png") no-repeat center;
    background-size: cover;
}
.btn-normal:hover {
    background: url("../img/normal-select.png") no-repeat center;
    background-size: cover;
}

.btn-fast{
    background: url("../img/fast.png") no-repeat center;
    background-size: cover;
}
.btn-fast.select {
    background: url("../img/fast-select.png") no-repeat center;
    background-size: cover;
}
.btn-fast:hover {
    background: url("../img/fast-select.png") no-repeat center;
    background-size: cover;
}

.btn-stop{
    background: url("../img/stop.png") no-repeat center;
    background-size: cover;
}
.btn-stop:hover {
    background: url("../img/stop-select.png") no-repeat center;
    background-size: cover;
}

.btn-save{
    background: url("../img/save.png") no-repeat center;
    background-size: cover;
}
.btn-retry{
    background: url("../img/retry.png") no-repeat center;
    background-size: cover;
}
.btn-howto{
    background: url("../img/howto.png") no-repeat center;
    background-size: cover;
}

.flex{
    display: flex;;
}
.flex-col{
    flex-direction: column;
}
.flex-row{
    flex-direction: row;
}

.btnc{
    width: 101px;
    height: 75px;
    border: 0px;
    cursor: pointer;
    position: relative;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.btnc.select::after {
    content: '';
    position: absolute;
    width: 88px;
    height: 68px;
    border: 8px solid #16ffcb;
    margin-left: -52px;
    margin-top: -42px;
    border-radius: 24px;
    box-shadow: 0 0 10px black;
}

.btn-black {
    background: url("../img/colors/black.png") no-repeat center;
    background-size: cover;
}

.btn-white{
    background: url("../img/colors/white.png") no-repeat center;
    background-size: cover;
}

.btn-gray{
    background: url("../img/colors/gray.png") no-repeat center;
    background-size: cover;
}

.btn-lightgray{
    background: url("../img/colors/lightgray.png") no-repeat center;
    background-size: cover;
}

.btn-brown{
    background: url("../img/colors/brown.png") no-repeat center;
    background-size: cover;
}

.btn-beige{
    background: url("../img/colors/beige.png") no-repeat center;
    background-size: cover;
}

.btn-green{
    background: url("../img/colors/green.png") no-repeat center;
    background-size: cover;
}

.btn-olive{
    background: url("../img/colors/olive.png") no-repeat center;
    background-size: cover;
}

.btn-lightgreen{
    background: url("../img/colors/lightgreen.png") no-repeat center;
    background-size: cover;
}

.btn-sage{
    background: url("../img/colors/sage.png") no-repeat center;
    background-size: cover;
}

.btn-darkblue{
    background: url("../img/colors/darkblue.png") no-repeat center;
    background-size: cover;
}

.btn-purpleblue{
    background: url("../img/colors/purpleblue.png") no-repeat center;
    background-size: cover;
}

.btn-skyblue{
    background: url("../img/colors/skyblue.png") no-repeat center;
    background-size: cover;
}

.btn-lightblue{
    background: url("../img/colors/lightblue.png") no-repeat center;
    background-size: cover;
}

.btn-purple{
    background: url("../img/colors/purple.png") no-repeat center;
    background-size: cover;
}

.btn-lightpurple{
    background: url("../img/colors/lightpurple.png") no-repeat center;
    background-size: cover;
}

.btn-pink{
    background: url("../img/colors/pink.png") no-repeat center;
    background-size: cover;
}

.btn-lightpink{
    background: url("../img/colors/lightpink.png") no-repeat center;
    background-size: cover;
}

.btn-red{
    background: url("../img/colors/red.png") no-repeat center;
    background-size: cover;
}

.btn-coral{
    background: url("../img/colors/coral.png") no-repeat center;
    background-size: cover;
}

.btn-orange{
    background: url("../img/colors/orange.png") no-repeat center;
    background-size: cover;
}

.btn-lightorange{
    background: url("../img/colors/lightorange.png") no-repeat center;
    background-size: cover;
}

.btn-deepyellow{
    background: url("../img/colors/deepyellow.png") no-repeat center;
    background-size: cover;
}

.btn-softyellow{
    background: url("../img/colors/softyellow.png") no-repeat center;
    background-size: cover;
}

.btn-yellow{
    background: url("../img/colors/yellow.png") no-repeat center;
    background-size: cover;
}

.btn-lemonyellow{
    background: url("../img/colors/lemonyellow.png") no-repeat center;
    background-size: cover;
}

.guide{
    display: flex;
    position: absolute;
    z-index: 100;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}