@keyframes color{0%{color:#fff}10%{color:#0ff}20%{color:#8a2be2}30%{color:#ff0}40%{color:red}50%{color:green}60%{color:pink}70%{color:violet}80%{color:teal}90%{color:#00f}to{color:gold}}@keyframes box-animation{0%,50%,to{margin-top:0}25%{margin-top:-25px}75%{margin-top:25px}}*{margin:0;padding:0;font-family:sans-serif}::selection{background-color:#fff}body{max-width:100%;max-height:100%}.container,.main,body{display:flex;justify-content:center;align-items:center}.container{width:100vw;height:100vh;margin:0 auto;background-image:url(ANime\ Girl\ with\ Glasses.jpg);background-size:cover;background-repeat:no-repeat;background-position:center;backdrop-filter:blur(0);overflow:hidden}.main{position:relative;flex-direction:column;gap:24px;background:rgb(128,128,128,.5);border:3px groove #fff;border-radius:10px;padding:48px;box-shadow:1px 1px 10px #fff;backdrop-filter:blur(4px);z-index:5;transition:all .1s linear}.letter{letter-spacing:32px;font-size:clamp(24px,4vw,56px);font-weight:600;font-style:normal;color:#fff;animation:color 1s linear infinite}.input{color:#fff;box-shadow:1px 1px 10px #fff;width:250px;height:24px;outline:0;padding:5px;font-size:16px;transition:all .1s linear}.box1,.box2,.box3,.box4,.input,.print{background:rgb(128,128,128,.25);border:3px groove #fff;border-radius:10px}.print{width:180px;height:36px;box-shadow:1px 1px 10px #fff;color:#fff;font-size:16px;transition:all .1s linear}.box1,.box2,.box3,.box4{position:absolute;width:100px;height:100px;backdrop-filter:blur(8px);box-shadow:1px 1px 40px #fff,-1px -1px 60px;transform:translate(-170px,100px);animation:box-animation 2.5s linear infinite;z-index:4}.box2,.box3,.box4{width:150px;height:150px;transform:translate(200px,-120px);animation:box-animation 2.5s linear infinite reverse}.box3,.box4{width:125px;height:125px;transform:translate(-190px,-120px);animation:box-animation 2.5s linear infinite .25s;z-index:6}.box4{width:75px;height:75px;transform:translate(170px,100px);animation:box-animation 2.5s linear infinite .25s reverse}.main:active{transform:scale(1.025)}.input::placeholder{color:#c8c8c8}.input:focus{box-shadow:1px 1px 100px #fff;margin-bottom:24px}.print:active{border:3px groove gray;background:#fff;color:gray;box-shadow:1px 1px 100px #fff;margin-top:24px}@media (hover:hover){.main:hover{transform:scale(1.025)}.print:hover{border:3px groove #c8c8c8;background:#fff;color:gray;box-shadow:1px 1px 100px #fff;margin-top:24px}}@media screen and (min-width:1600px){.main{gap:32px;padding:56px}.input,.print{width:260px;height:32px;font-size:20px}.print{width:190px;height:44px}}@media screen and (max-width:980px){.main{padding:24px}.letter{letter-spacing:24px}.input{width:230px;height:20px}.print{width:160px;height:28px}.box1{width:80px;height:80px;transform:translate(-150px,80px)}.box2{width:130px;height:130px;transform:translate(180px,-100px)}.box3{width:105px;height:105px;transform:translate(-170px,-100px)}.box4{width:55px;height:55px;transform:translate(150px,80px)}}@media screen and (max-width:600px){.main{padding:16px}.letter{letter-spacing:10px}.input{width:200px}.print{width:130px}.box1{width:60px;height:60px;transform:translate(-130px,60px)}.box2{width:110px;height:110px;transform:translate(160px,-80px)}.box3{width:85px;height:85px;transform:translate(-150px,-80px)}.box4{width:35px;height:35px;transform:translate(130px,60px)}}