*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:linear-gradient(to right,#473914,#af975b);color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:16px;scroll-behavior:smooth;overflow-y:scroll;min-height:100vh}.App{display:grid;grid-template-rows:auto 1fr;justify-items:center;width:100%;height:100vh;padding:1rem;gap:1rem}main{display:flex;flex-direction:column;align-items:center;flex:1;width:100%;max-width:600px}header{width:100%;max-width:600px;background:#433a24e6;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem 0;border-radius:10px;flex-shrink:0}header h1{font-size:clamp(1.5rem,2.5vw,2.2rem);margin-bottom:.5rem}input{border:2px solid rgba(198,197,197,1);border-radius:10px;height:3rem;width:100%;max-width:400px;padding:0 1rem;font-size:clamp(1rem,1.5vw,1.2rem);transition:all .3s ease;background-color:#f0b1b168;color:#fff}input::placeholder{color:#fdececf1}input:focus{outline:none;border:2px solid #ffa500;background-color:#ffffff26}.user-list{background:#433a24e6;border-radius:10px;width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center;padding:1rem;gap:1rem;position:relative;overflow-y:scroll;max-height:85vh}.user-list-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1rem;width:100%}.user-display{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#521818f2;color:#fff;box-shadow:#0000003d 0 3px 8px;border-radius:10px;padding:1rem;width:100%;max-height:10rem}.user-display span{font-weight:700;font-size:clamp(1.1rem,2vw,1.5rem);margin-bottom:.5rem}.user-display p{font-size:clamp(.95rem,1.5vw,1.2rem);margin:.2rem 0;text-align:center}.user-placeholder{height:12rem;width:90%;max-width:400px;border-radius:10px;background-color:#ffffff26;animation:pulse 1.2s infinite}@keyframes pulse{0%{opacity:.3}50%{opacity:.6}to{opacity:.3}}.loading-indicator{border:3px solid rgba(82,24,24,.75);border-radius:5px;background-color:#937878bf;color:#241515;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:.5rem;width:100%;opacity:1;transition:opacity .5s ease}.remaining-users,.scroll-hint{font-style:italic;font-size:clamp(1rem,1.5vw,1.1rem);text-align:center}.user-list p{text-align:center;font-style:italic;margin:1rem 0}.load-more-btn{margin-top:.5rem;padding:.5rem 1rem;font-size:1rem;border-radius:5px;border:2px solid #8b8a88ee;background-color:#f3181868;color:#000;cursor:pointer;transition:all .2s ease}.load-more-btn:hover{background-color:#ffb733}.no-data-to-display{display:flex;justify-content:center;align-items:center;font-size:1.1rem;height:100%;width:100%}@media(max-width:600px){input{width:95%;font-size:1rem}.user-display,.user-placeholder{width:95%;min-height:10rem;padding:.8rem}.user-display span{font-size:1rem}.user-display p{font-size:.85rem}.remaining-users,.scroll-hint{font-size:.9rem}}