@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url(../fonts/Unbounded/Unbounded-VariableFont_wght.ttf) format("truetype");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
    --circle-radius: 15vh;
    --color-picker-circle-radius: 3vmin;
}

* {
    /* border: 1px solid black; */
    box-sizing: border-box;
    font-family: "Unbounded", sans-serif;
    font-weight: 400;
}

body {
    margin: 0;
    overflow-x: hidden;
}

#grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60vmin, 80vmin));
    grid-auto-rows: 80vh;
    gap: .5rem;
    margin: 0 auto;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 4rem;
}

.circle {
    width: calc(var(--circle-radius) * 2);
    height: calc(var(--circle-radius) * 2);
    border-radius: 100%;
}

@media (orientation: landscape) {
    @keyframes zoom-out {
        0% {
            transform: scale(4);
        }

        50% {
            transform: scale(2);
        }

        100% {
            transform: scale(4);
        }
    }
}

@media (orientation: portrait) {
    @keyframes zoom-out {
        0% {
            transform: scale(3);
        }

        50% {
            transform: scale(1.5);
        }

        100% {
            transform: scale(3);
        }
    }
}

main {
    height: 19rem;
    width: 19rem;
    margin: .5rem auto;
    overflow: hidden;
    border-radius: .2rem;
    animation-name: wobbly-frame-3;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: paused;
}

main:hover {
    animation-play-state: running;
}

@keyframes wobbly-frame-3 {
    0% {
        border-radius: 45% 35% 45% 40%;
    }

    25% {
        border-radius: 35% 40% 35% 45%;
    }

    50% {
        border-radius: 40% 35% 45% 35%;
    }

    75% {
        border-radius: 35% 45% 40% 40%;
    }

    100% {
        border-radius: 45% 35% 45% 40%;
    }
}

.rotating-circles-container {
    position: relative;
    width: 100%;
    height: 100%;
    animation-name: zoom-out;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: paused;
}

.rotating-circles-container:hover {
    animation-play-state: running;
}

.circle-container {
    position: absolute;
    mix-blend-mode: multiply;
}

.circle-container-cyan {
    left: calc(50% - var(--circle-radius));
    top: calc(50% - var(--circle-radius));
}

.circle-container-magenta {
    left: calc(30% - var(--circle-radius));
    top: calc(55% - var(--circle-radius));
    padding-left: 10%;
}

.circle-container-yellow {
    left: calc(60% - var(--circle-radius));
    top: calc(55% - var(--circle-radius));
    padding-right: 10%;
}

.bg-red,
.rgb.circle-bg-color-1.alternating-circles-box::before {
    background: radial-gradient(rgba(255, 0, 0, .7), rgba(255, 255, 255, 0.1));
}

.bg-green,
.rgb.circle-bg-color-2.alternating-circles-box::before {
    background: radial-gradient(rgba(0, 255, 0, .7), rgba(255, 255, 255, 0.1));
}

.bg-blue,
.rgb.circle-bg-color-3.alternating-circles-box::before {
    background: radial-gradient(rgba(0, 0, 255, .7), rgba(255, 255, 255, 0.1));
}

.bg-cyan,
.cmy.circle-bg-color-1.alternating-circles-box::before {
    background: radial-gradient(rgba(0, 255, 255, 1), rgba(255, 255, 255, .1));
}

.bg-magenta,
.cmy.circle-bg-color-2.alternating-circles-box::before {
    background: radial-gradient(rgba(255, 0, 255, 1), rgba(255, 255, 255, .1));
}

.bg-yellow,
.cmy.circle-bg-color-3.alternating-circles-box::before {
    background: radial-gradient(rgba(255, 255, 0, 1), rgba(255, 255, 255, .1));
}

.bg-bright-pink,
.ppy.circle-bg-color-1.alternating-circles-box::before {
    background: radial-gradient(rgba(255, 2, 133, 1), rgba(255, 255, 255, 0.1));
}

.bg-maximum-red-purple,
.ppy.circle-bg-color-2.alternating-circles-box::before {
    background: radial-gradient(rgba(170, 58, 116, 1), rgba(255, 255, 255, 0.1));
}

.bg-vivid-yellow,
.ppy.circle-bg-color-3.alternating-circles-box::before {
    background: radial-gradient(rgba(255, 255, 3, 1), rgba(255, 255, 255, 0.1));
}

.rotate-clockwise {
    animation-name: rotate-clockwise;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: inherit;
}

.rotate-counterclockwise {
    animation-name: rotate-counterclockwise;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: inherit;
}

.move-up-down {
    animation-name: move-up-down;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: inherit;
}

@keyframes move-up-down {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-10%);
    }

    75% {
        transform: translateY(10%);
    }

    100% {
        transform: translateY(0);
    }

}

@keyframes rotate-clockwise {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate-counterclockwise {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

.color-picker {
    position: fixed;
    bottom: 1vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-evenly;
    transition: opacity .5s;
    background-color: silver;
    border-radius: 2rem;
}

.color-picker-inner {
    position: relative;
    display: flex;
    justify-content: space-evenly;
}

.color-picker-circle {
    margin: .5rem;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    height: calc(var(--color-picker-circle-radius) * 2);
    width: calc(var(--color-picker-circle-radius) * 2);
    cursor: pointer;
}

.color-picker-mix-color {
    display: inline-block;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    position: absolute;
    mix-blend-mode: multiply;
}

.color-picker-mix-color.bg-cyan,
.color-picker-mix-color.bg-red,
.color-picker-mix-color.bg-maximum-red-purple {
    top: -50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.color-picker-mix-color.bg-magenta,
.color-picker-mix-color.bg-blue,
.color-picker-mix-color.bg-bright-pink {
    left: -75%;
    bottom: -50%;
    transform: translate(-20%, 40%);
}

.color-picker-mix-color.bg-yellow,
.color-picker-mix-color.bg-green,
.color-picker-mix-color.bg-vivid-yellow {
    right: -75%;
    bottom: -50%;
    transform: translate(20%, 40%);
}

header {
    font-size: 3rem;
    margin: .5rem auto;
    text-align: center;
    color: black;
    transition: opacity .5s;
}

#color-picker-circle-active {
    position: absolute;
    background-color: white;
    margin: .5rem;
    height: calc(var(--color-picker-circle-radius) * 2);
    width: calc(var(--color-picker-circle-radius) * 2);
    border-radius: 50%;
    scale: 1.2;
    transition: left .5s;
}

.color-combo-1 {
    left: 0%;
}

.color-combo-2 {
    left: 33.3333333%;
}

.color-combo-3 {
    left: 66.6666666%;
}

.opacity-0 {
    opacity: 0;
}


/* Pendulum styles */
:root {
    --pendulum-circle-radius: 4rem;
}

@media (orientation:portrait) {
    html {
        font-size: 3vw;
    }
}

@media (orientation:landscape) {
    html {
        font-size: 3vh;
    }
}

#pendulum-container {
    position: relative;
    height: 100%;
}

.pendulum-circle-container {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: multiply;
}

.pendulum-circle-box {
    width: calc(var(--pendulum-circle-radius) * 1.5);
    height: calc(var(--pendulum-circle-radius) * 6);
    position: relative;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transition-property: transform;
    transition-duration: .1s;
}

.pendulum-circle-box::before {
    content: "";
    display: inline-block;
    height: calc(var(--pendulum-circle-radius) * 1.31);
    width: 1rem;
    left: 50%;
    top: 49%;
    border-radius: 1rem 1rem 0 0;
    transform: translateX(-50%);
    position: absolute;
    background-color: silver;
}

.pendulum-circle::after {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2rem;
    left: 50%;
    top: -100%;
    transform: translate(-50%, -50%);
    position: absolute;
    background-color: silver;
    border-radius: 1rem;
}

.pendulum-circle {
    width: calc(var(--pendulum-circle-radius) * 1.5);
    height: calc(var(--pendulum-circle-radius) * 1.5);
    border-radius: 50%;
    position: absolute;
    bottom: 1rem;
}

.delay-1s {
    animation-delay: 1s;
}

.delay-2s {
    animation-delay: 2s;
}

.mode-icon {
    width: 2rem;
    cursor: pointer;
}

#mode-container {
    padding: .5rem;
    background-color: silver;
    width: max-content;
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translateX(-50%);
    border-radius: 2rem;
    display: flex;
    gap: .5rem;
    z-index: 100;
}

.mode-select-container {
    display: inline-block;
    width: 4rem;
    background-color: white;
    border-radius: 1rem;
    position: relative;
    cursor: pointer;
}

.mode-select-circle {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    position: absolute;
    transition: left;
    border-radius: 1rem;
    mix-blend-mode: multiply;
}

.mode-select-circle-red {
    background: radial-gradient(rgba(255, 0, 0, .7), rgba(0, 0, 0, .3));
    transition-duration: .2s;
}

.mode-select-circle-green {
    background: radial-gradient(rgba(0, 255, 0, .7), rgba(0, 0, 0, .3));
    transition-duration: .4s;
}

.mode-select-circle-blue {
    background: radial-gradient(rgba(0, 0, 255, .7), rgba(0, 0, 0, .3));
    transition-duration: .6s;
}

.touch-active>.mode-select-circle {
    left: 0;
}

.orientation-active>.mode-select-circle {
    left: 2rem;
}

.hidden {
    display: none !important;
}

/* Waves */

.wave-path {
    fill: silver;
}

.wave {
    height: 8rem;
    position: absolute;
    width: 100vw;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}


#alternating-circles-container {
    margin-top: 3rem;
    width: 100%;
    height: 10rem;
    border: 1px solid black;
    position: relative;
    background-color: rgba(240, 240, 240, 1);
    border: .1rem rgba(240, 240, 240, 1) solid;
    border-radius: 5rem;
}

.alternating-circles-box {
    width: 10rem;
    height: 10rem;
    border-radius: 5rem;
    position: relative;
    animation-duration: 1s, 3s;
    animation-name: rotate-circle-clockwise, alternate-left-right;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    position: absolute;
    left: 0;
    top: 0;
    mix-blend-mode: hard-light;
}

.alternating-circles-box::before {
    content: "";
    width: 6rem;
    height: 6rem;
    border-radius: 3rem;
    position: absolute;
    left: 0.6rem;
    top: 0.6rem;
}

@keyframes rotate-circle-clockwise {
    0% {
        rotate: 0deg;
    }

    100% {
        rotate: 360deg;
    }
}

@keyframes alternate-left-right {
    0% {
        translate: 0% 0%;
    }

    50% {
        translate: 165% 0%;
    }

    100% {
        translate: 0% 0%;
    }
}

.alternating-circles-controls {
    margin: 0 auto;
    width: max-content;
    border-radius: 1.5rem;
    padding: .1rem;
}

.alternating-circles-outer-container {
    width: 100%;
}

.alternating-circle-controls-button {
    all: unset;
    background-color: silver;
    border-radius: 2rem;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    background-size: 2rem;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    padding: .5rem;
}

.alternating-circle-controls-button:hover {
    background-color: rgba(230, 230, 230, 1);
}

.alternating-circle-controls-button:active {
    background-color: rgba(220, 220, 220, 1);
}

.alternating-circles-controls {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
}

#add-button {
    background-image: url(./add_FILL0_wght400_GRAD0_opsz24.svg);
}

#remove-button {
    background-image: url(./remove_FILL0_wght400_GRAD0_opsz24.svg);
}

#gradient-container {
    position: relative;
    width: 100%;
    height: 100%;
}

#gradient-wheel-container {
    position: relative;
    width: 100%;
    height: 100%;
}


.gradient-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 0 0;
    background-size: 100% 100%;
    background-position: 0px 0px;
    image-rendering: pixelated;
    transition-property: transform;
    overflow: hidden;
    border: .25rem white solid;
}

.gradient-circle-cmy {
    background-image: conic-gradient(from 0deg at 50% 50%, cyan 0%, magenta 33%, yellow 66%, cyan 100%);
}

.gradient-circle-rgb {
    background-image: conic-gradient(from 0deg at 50% 50%, red 0%, green 33%, blue 66%, red 100%);
}

.gradient-circle-ppy {
    background-image: conic-gradient(from 0deg at 50% 50%, rgb(255, 2, 133) 0%, rgb(170, 58, 116) 33%, rgb(255, 255, 3) 66%, rgb(255, 2, 133) 100%);
}

:root {
    --gradient-circle-radius: 2rem;
}

.size-1 {
    width: calc(var(--gradient-circle-radius) * 9);
    height: calc(var(--gradient-circle-radius) * 9);
    border-radius: calc(var(--gradient-circle-radius) * 4.5);
}

.size-3 {
    width: calc(var(--gradient-circle-radius) * 8);
    height: calc(var(--gradient-circle-radius) * 8);
    border-radius: calc(var(--gradient-circle-radius) * 4);
}

.size-5 {
    width: calc(var(--gradient-circle-radius) * 7);
    height: calc(var(--gradient-circle-radius) * 7);
    border-radius: calc(var(--gradient-circle-radius) * 3.5);
}

.size-7 {
    width: calc(var(--gradient-circle-radius) * 6);
    height: calc(var(--gradient-circle-radius) * 6);
    border-radius: calc(var(--gradient-circle-radius) * 3);
}

.size-9 {
    width: calc(var(--gradient-circle-radius) * 5);
    height: calc(var(--gradient-circle-radius) * 5);
    border-radius: calc(var(--gradient-circle-radius) * 2.5);
}

.white-circle {
    width: calc(var(--gradient-circle-radius) * 4);
    height: calc(var(--gradient-circle-radius) * 4);
    border-radius: calc(var(--gradient-circle-radius) * 2);
    background-color: white;
    border: .5rem silver solid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Radial slider */

#radial-slider {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    width: calc(var(--gradient-circle-radius) * 9);
    height: calc(var(--gradient-circle-radius) * 9);
    transform: translate(-50%, -50%);
    z-index: 10;
    padding: 5rem;
}

#radial-slider #radial-slider-handle {
    position: absolute;
    width: 5%;
    height: 20%;
    left: 47.5%;
    top: 30%;
    transform-origin: center bottom;
}

#radial-slider #radial-slider-handle:before {
    content: "";
    position: absolute;
    background-color: silver;
    width: 200%;
    transform: translate3d(0, -50%, 0);
    height: 0;
    padding-bottom: 200%;
    border-radius: 50%;
    cursor: pointer;
}