.duration-1min {
    animation-duration: 11s;
    animation-iteration-count: 6;
    animation-timing-function: ease-in-out;
}

.duration-3min {
    animation-duration: 11s;
    animation-iteration-count: 17;
    animation-timing-function: ease-in-out;
}

.duration-5min {
    animation-duration: 11s;
    animation-iteration-count: 28;
    animation-timing-function: ease-in-out;
}

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: var(--color);
    border-radius: 50%;
    opacity: 0.5;
}

.top {
    animation-name: top;
}

.top-right {
    animation-name: top-right;
}

.bottom-right {
    animation-name: bottom-right;
}

.bottom {
    animation-name: bottom;
}

.bottom-left {
    animation-name: bottom-left;
}

.top-left {
    animation-name: top-left;
}

#rotation {
    width: 175px;
    height: 175px;
    position: absolute;
    margin: 162.5px 0;
}

.rotation {
    animation-name: rotation;
}

@keyframes top {
    50% {
        width: 200px;
        height: 200px;
        left: 50%;
        top: 0%;
    }
}

@keyframes top-right {
    50% {
        width: 200px;
        height: 200px;
        left: 93.125%;
        top: 25%;
    }
}

@keyframes bottom-right {
    50% {
        width: 200px;
        height: 200px;
        left: 93.125%;
        top: 75%;
    }
}

@keyframes bottom {
    50% {
        width: 200px;
        height: 200px;
        left: 50%;
        top: 100%;
    }
}

@keyframes bottom-left {
    50% {
        width: 200px;
        height: 200px;
        left: 6.875%;
        top: 75%;
    }
}

@keyframes top-left {
    50% {
        width: 200px;
        height: 200px;
        left: 6.875%;
        top: 25%;
    }
}

@keyframes rotation {
    50% {
        transform: rotate(180deg);
    }
}


.input {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
}

.input label {
    text-align: center;
    margin: 0 5px 5px 0;
}

.input select {
    border: none;
    margin: auto;
    width: 200px;
    border-radius: 13.5px;
    font-size: 21px;
    font-weight: 200;
    background-color: var(--color);
    color: var(--foreground);
}

.input select:focus {
    outline: none;
}