*{box-sizing:border-box;font-family:Tahoma,sans-serif}

body{
min-height:100vh;
margin:0;
padding:20px;
background:#050816;
color:white;
overflow-x:hidden;
transition:.4s;
}

body.light{
background:#eef2ff;
color:#111827;
}

.blob{
position:fixed;
border-radius:50%;
filter:blur(80px);
opacity:.7;
animation:move 12s infinite alternate;
}

.one{width:300px;height:300px;background:#6366f1;top:5%;left:10%}
.two{width:250px;height:250px;background:#ec4899;bottom:10%;right:10%}
.three{width:220px;height:220px;background:#14b8a6;top:50%;left:50%}

@keyframes move{
from{transform:translate(0,0)}
to{transform:translate(80px,-60px)}
}

.glass{
position:relative;
max-width:900px;
margin:auto;
padding:40px;
border-radius:40px;
background:rgba(255,255,255,.1);
backdrop-filter:blur(35px);
border:1px solid rgba(255,255,255,.25);
box-shadow:0 30px 100px rgba(0,0,0,.45);
text-align:center;
}

button,input,textarea{
width:100%;
padding:16px;
margin:8px 0;
border-radius:22px;
border:1px solid rgba(255,255,255,.25);
background:rgba(255,255,255,.12);
color:inherit;
cursor:pointer;
transition:.25s;
}

button:hover{
transform:translateY(-4px);
background:rgba(255,255,255,.25);
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:12px;
}

.choice.active{
background:#8b5cf6;
box-shadow:0 0 25px #8b5cf6;
}

.search{
background:white;
color:black;
font-weight:bold;
}

textarea{
height:180px;
}

.hidden{display:none}

.loader{
width:60px;
height:60px;
border:6px solid white;
border-top-color:transparent;
border-radius:50%;
margin:auto;
animation:spin 1s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.logo{font-size:70px}

.version{margin-top:20px;opacity:.7}

@media(max-width:600px){
.glass{padding:20px}
.grid{grid-template-columns:repeat(2,1fr)}
}