/* The secret sauce that enables gradient rotation. NOTE: does not work in all browsers. https://caniuse.com/?search=%40property */
@property --border-angle-1 {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0deg;
}

@property --border-angle-2 {
	syntax: "<angle>";
	inherits: true;
	initial-value: 90deg;
}

@property --border-angle-3 {
	syntax: "<angle>";
	inherits: true;
	initial-value: 180deg;
}


/* sRGB color. */
:root {
	--bright-blue: rgb(0, 100, 255);
	--bright-green: rgb(0, 255, 0);
	--bright-red: rgb(255, 0, 0);
	--background: white;
	--foreground: black;
	--border-size: 2px;
	--border-radius: 0.75em;
}

/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
	:root {
		--bright-blue: color(display-p3 0 0.2 1);
		--bright-green: color(display-p3 0.4 1 0);
		--bright-red: color(display-p3 1 0 0);
	}
}

@keyframes rotateBackground {
	to { --border-angle-1: 360deg; }
}

@keyframes rotateBackground2 {
	to { --border-angle-2: -270deg; }
}

@keyframes rotateBackground3 {
	to { --border-angle-3: 540deg; }
}
@keyframes moveBackground {
    from { background-position: 0 0; }
    to { background-position: 0 -20px; }
}

.bodyGrid {
    background-color: #ffffff;
	background-image: linear-gradient(#3f3f3f1a 1px, transparent 1px), linear-gradient(90deg, #3f3f3f1a 1px, transparent 1px);
	background-size: 20px 20px;
    height: 100vh;
    animation: moveBackground 10s linear infinite;
    mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
}

.center-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.inputDiv {
    width: 100%;
    max-width: 600px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #fff;
}

@media (max-width: 600px) {
    .inputDiv {
        margin: 20px;
    }
}

.animated-border {
    --border-angle-1: 0deg;
    --border-angle-2: 90deg;
    --border-angle-3: 180deg;
    color: inherit;
    border: 0;
    padding: var(--border-size);
    display: flex;
    border-radius: var(--border-radius);
    background-color: transparent;
    background-image: conic-gradient(
            from var(--border-angle-1) at 10% 15%,
            transparent,
            var(--bright-blue) 10%,
            transparent 30%,
            transparent
        ),
        conic-gradient(
            from var(--border-angle-2) at 70% 60%,
            transparent,
            var(--bright-green) 10%,
            transparent 60%,
            transparent
        ),
        conic-gradient(
            from var(--border-angle-3) at 50% 20%,
            transparent,
            var(--bright-red) 10%,
            transparent 50%,
            transparent
        );
    animation: 
        rotateBackground 3s linear infinite,
        rotateBackground2 8s linear infinite,
        rotateBackground3 13s linear infinite;
}

.animated-border-content {
    background: white; 
    border-radius: calc(var(--border-radius) - var(--border-size));
    padding: 4rem 5rem;
	color: var(--foreground);
}

input[type="number"] {
    color-scheme: light;
    background-color: #fff !important;
    color: #000 !important;
}