body { background-color:#868179;
height:100vh;
background-attachment:fixed;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif}

.circle {height:100px;
width:100px;
background-color:#fbf8cc;
border-radius:100%;
animation:woop 1.8s infinite linear;
animation-delay: calc(.1s * var(--i));
box-shadow:0px 0px 100px #fbf8cc;
margin:0px;}

.container {display:flex;
flex-wrap:wrap;
max-width:650px;
margin:auto;
gap:5px;
}

input, button { 
height:60px;
width:60px;
border: #fee440 outset 2px;
border-radius:10%;
color:white;
font-size:18pt;
font-weight:bolder;
}

button {background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );}

input:active, button:active {background:lightgrey;
border:#fee440 inset 2px;}

.picker {display:flex;
width:50%;
margin:auto;
justify-content: center;
gap:10px;
margin-bottom:50px;
margin-top:50px;}

h1 {color:transparent;
 background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
width:fit-content;
margin:auto;
background-clip:text;
font-size:50pt;
text-align:center;
text-decoration:underline wavy 4px tomato}

@keyframes woop {
0% {-webkit-filter: hue-rotate(0deg);}

100% {-webkit-filter: hue-rotate(360deg);}

}