@import "https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap";header{text-align:center;margin:3rem 0}header img{object-fit:scale-down;width:10rem;height:5rem}header h1{background:linear-gradient(40deg,#fce4b1,#fce4b1,#eb6445,#eb6445);-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 8px #00000080);-webkit-background-clip:text;margin:0;font-family:Roboto Condensed,sans-serif;font-size:5rem}header p{color:#fb8e75;margin:0;font-family:Roboto Condensed,sans-serif;font-size:1.25rem}.user-container{flex-direction:column;align-items:center;padding:20px;display:flex}.card-container{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;width:100%;max-width:1200px;display:grid}.user-card{background-color:#fff;border:1px solid #dee2e6;border-radius:10px;padding:20px;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 8px #0000001a}.user-card:hover{transform:translateY(-5px);box-shadow:0 6px 12px #0003}.user-name{color:#007bff;margin-bottom:0;font-size:1.5rem}.user-detail{color:gray;text-align:center;margin:0;font-size:1rem}.user-detail strong{color:#01b127}*{box-sizing:border-box}html{color:#ebe7ef;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;background:radial-gradient(#6a9feb,#012b66);min-height:80rem;font-family:Quicksand,sans-serif;line-height:1.5}main{width:90%;max-width:50rem;margin:auto}#core-concepts{background-color:#140524;border-radius:6px;padding:2rem;box-shadow:0 2px 8px #0006}main h2{text-align:center;color:#ffda8c;margin:0 0 1.5rem;font-family:Roboto Condensed,sans-serif}#core-concepts ul{flex-wrap:wrap;justify-content:center;gap:1rem;margin:0;padding:0;list-style:none;display:flex}#core-concepts li{text-align:center;width:8.4rem}#core-concepts li img{object-fit:scale-down;width:8rem;height:4rem}#core-concepts li h3{margin:0 0}#core-concepts li p{font-size:.9rem}.custom-link{color:#3995ff;font-weight:700;text-decoration:none}.custom-link:hover{color:#85a7c9;cursor:pointer;text-decoration:underline}#examples{margin:3rem auto}#examples h2{text-align:left}#examples menu{gap:.5rem;margin:1rem 0;padding:0;list-style:none;display:flex}#examples menu button{color:#ffda8c;cursor:pointer;background-color:#0000;border:none;border-radius:6px;padding:.5rem 1rem;font-family:Roboto Condensed,sans-serif;font-size:1rem;transition:all .2s ease-in-out}#examples menu button:hover{color:#ebe7ef;background-color:#1b082f}#examples menu button.active{color:#ebe7ef;background-color:#7925d3}#tab-content{background-color:#2f1d43;border-radius:6px;padding:1rem;box-shadow:0 2px 8px #0000004d}#tab-content span a{color:#ebe7ef;-webkit-text-decoration:pointer;text-decoration:pointer}#tab-content h3{margin:0}#tab-content code{font-size:1rem}#user-input{background:linear-gradient(#307e6c,#2b996d);border-radius:4px;max-width:30rem;margin:2rem auto;padding:1rem}.input-group{justify-content:space-evenly;gap:1.5rem;display:flex}#user-input label{text-transform:uppercase;margin-bottom:.25rem;font-family:Roboto Condensed,sans-serif;font-size:.5rem;font-weight:700;display:block}#user-input input{color:#c2e9e0;background-color:#0000;border:1px solid #76c0ae;border-radius:.25rem;width:100%;padding:.5rem;font-size:1rem}