:root{--text: #031d1f;--background: #f9feff;--primary: #1fe4f7;--secondary: #f586a6;--accent: #f1a239}body{width:100%;height:100%;margin:0;color:var(--text);font-family:Lexend,sans-serif}input,button{font-family:Lexend,sans-serif}h1{background:-webkit-linear-gradient(var(--accent),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}button{background-color:var(--accent);border:none;border-radius:5px;padding:5px}button:hover{background-color:#dd8a1e}.page{display:flex;flex-direction:column;align-items:center}.summoner-input{display:flex;flex-direction:column;align-items:center;gap:20px}.summoner-name{background:-webkit-linear-gradient(var(--accent),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.summoner-input input,button{height:30px;margin:2px}.header{display:flex;flex-direction:column;width:100%;align-items:center;background-color:var(--primary);height:200px}.header p{font-size:small;margin-left:20px;margin-top:0;color:var(white)}.header-banner{display:flex;align-items:center;gap:10px;font-size:30px}.header-icon{width:100px;height:100px;margin-left:1rem;border-radius:50%}.champion-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.5rem;justify-content:flex-start;align-items:center}.champion-icon:hover{transform:scale(1.2)}.champion-display{display:flex;flex-direction:column;align-items:center}.main-role{display:flex;flex-direction:row;align-items:center;gap:2rem;padding:2rem}.suggestion-box{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem}.suggestion{width:100%;display:grid;grid-template-columns:1fr 5fr;align-items:center}.red-text{color:#b70707}.green-text{color:green}.loading{position:relative;height:150px;width:50%;background:linear-gradient(180deg,var(--accent) 0%,var(--primary) 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;overflow:hidden;border-radius:8px;margin:5px}.waves{position:relative;width:100%;height:60px;overflow:hidden}.wave{position:absolute;bottom:0;width:300%;height:60px;background:#ffffff4d;border-radius:100%;opacity:.6;animation:waveMove 8s linear infinite}.wave1{animation-duration:7s}.wave2{animation-duration:9s;opacity:.4;bottom:10px}h2{margin-top:20px;font-weight:600}.pool-party-loading{position:relative;height:250px;background:linear-gradient(to bottom,#87cefa,#00bfff);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff}.sun{position:absolute;top:20px;left:50%;width:70px;height:70px;background:radial-gradient(circle at center,#ffed85,#f9c90c);border-radius:50%;transform:translate(-50%);box-shadow:0 0 30px #ffe96499;animation:pulse 3s ease-in-out infinite}@keyframes pulse{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.1)}}.waves{position:absolute;bottom:0;width:100%;height:100px;overflow:hidden}.wave{position:absolute;bottom:0;width:200%;height:100px;background:#ffffff4d;border-radius:100%;animation:waveMove 6s linear infinite}.wave1{animation-duration:7s;opacity:.5}.wave2{animation-duration:9s;opacity:.4}.wave3{animation-duration:11s;opacity:.3}@keyframes waveMove{0%{transform:translate(0)}to{transform:translate(-50%)}}.floatie{position:relative;width:60px;height:60px;background:radial-gradient(circle at 30% 30%,#ff6f61,#e03e36);border-radius:50%;animation:float 3s ease-in-out infinite;border:5px solid rgba(255,255,255,.8);margin-bottom:20px}.floatie .inner{width:20px;height:20px;background:#87cefa;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.loading-text{font-size:20px;margin-top:10px;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.tagline{font-size:14px;opacity:.8}