.circle{width:100px;height:100px;border-radius:50%;margin:12px;display:flex;justify-content:center;align-items:center}.right_circle{width:150px;height:150px;border-radius:50%;display:flex;justify-content:center;align-items:center}.Whitebox{display:flex;gap:10px;width:100%;background:#fff;padding:8px;border-radius:40px}.darkbox{width:100%;max-width:620px;height:auto;border-radius:25px;overflow:hidden}.box{display:flex;flex-wrap:wrap;justify-content:center;flex-direction:row;background-color:#222;border-radius:57px}:root{background-color:#c4b9aa;overflow:hidden}body{margin:0;font-family:Arial,sans-serif;background-color:var(--dark1);color:#fff}.box_container{min-height:100vh;width:100%;display:flex;justify-content:center}.left{padding:0;display:flex;flex-direction:column;justify-content:center;width:53%;background-color:#0a0a27;font-size:8em}.logo{font-weight:700;margin-bottom:40px;font-size:25px}.title{font-size:1em;font-weight:700;margin:0 0 20px}.subtitle{font-size:18px;color:var(--green2);margin-bottom:40px}.btn{margin:20px 10px;padding:10px 20px;border:none;background:#444;color:#fff;border-radius:10px;cursor:pointer;font-size:16px}.right{display:flex;align-items:center;justify-content:center;border-radius:40px 0 0 40px;position:relative;width:30%;height:550px;top:105px}.card-content{margin:5px;font-size:10px;color:#fff;padding:12px;height:100%;width:100%;border-radius:51px;display:flex;justify-content:space-between;word-break:break-all;flex-direction:column;align-items:center}.index{width:50px;height:50px;background-color:#fff;border-radius:50%;text-align:center;display:flex;justify-content:center;align-items:center;font-size:25px}.card-content h2{margin-bottom:20px;color:#000}.character{width:490px;animation:float 2s infinite ease-in-out;position:relative;left:45px}.bot{display:flex;justify-content:space-between;width:68%}.banner{display:flex;background-color:#0a0a27;width:100vw}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.palette{position:absolute;display:flex;flex-direction:column;gap:10px;padding:25px;right:0;background-color:#fff;height:83vh;border-top-left-radius:25px;border-bottom-left-radius:25px}.color{width:130px;height:130px;border-radius:50%}.header{display:flex;justify-content:space-between;gap:111px;padding:12px;list-style:none;font-weight:900}.navbar{display:flex;justify-content:space-between;color:#000;letter-spacing:2px}.logo{position:relative;top:25px}@media (max-width: 1200px){.banner{width:100%}.left{padding-left:30px;width:60%}.right{width:40%}}@media (max-width: 992px){.box_container{flex-direction:column;align-items:center;text-align:center}.banner{flex-direction:column;width:100%}.left{width:100%;padding:0;align-items:center;text-align:center;font-size:3rem}.right{width:90%;top:0;height:auto;padding-bottom:25px}.palette{height:auto;flex-direction:row;gap:15px;border-radius:20px;padding:10px;position:relative;right:0;justify-content:center}.right_circle{width:100px;height:100px}.navbar ul.header{gap:30px}}@media (max-width: 600px){.navbar{flex-direction:column;align-items:center;gap:10px}.header{gap:20px}.title{font-size:1.8rem}.right{width:100%;order:-1}.card-content{font-size:14px;border-radius:25px}.circle{width:70px;height:70px;margin:8px}.right_circle{width:80px;height:80px}.bot{width:100%;justify-content:center;gap:10px}.palette{gap:10px;padding:10px}}@media (max-width: 400px){.title{font-size:1.4rem}.right_circle{width:65px;height:65px}.circle{width:50px;height:50px}.header li{font-size:12px}}@media (max-width: 992px){.banner{flex-direction:column;align-items:center}.left{width:100%;padding:0;font-size:3rem;align-items:center;text-align:center}.right{width:90%;height:auto;position:relative;top:0;margin-top:20px}.card-content{height:350px;border-radius:30px}}@media (max-width: 992px){img{width:84px;height:84px}.palette{position:relative;right:0;height:auto;flex-direction:row;justify-content:center;flex-wrap:wrap;border-radius:20px}.right_circle{width:90px;height:90px}}@media (max-width: 600px){img{width:60px;height:60px}.title{font-size:1.8rem}.subtitle{font-size:14px}.btn{font-size:14px;padding:8px 14px}.bot{width:100%;justify-content:center;gap:12px}.circle{width:55px;height:55px}.right_circle{width:75px;height:75px}.box_container{justify-content:space-evenly}}