.button{cursor:pointer;color:#fff;background-color:#5865f2;border:1px solid #6571f3;border-radius:5px;padding:10px;font-size:1em;transition:background-color .2s}.button:hover{background-color:#4654c0}.color-pickers{justify-content:space-around;gap:20px;display:grid}@media not (max-width:360px){.color-pickers{grid-template-columns:1fr 1fr}}.color-input-group{flex-direction:column;align-items:center;gap:10px;display:flex}.color-input-label{cursor:pointer;border-radius:50%;width:80px;height:80px}.color-input{display:none}.color-text-input{border:0;border-radius:5px;width:100%;padding:10px 12px}.heading{color:#fff;text-align:center;margin-block:0}.heading-2{margin-top:20px}.profile-preview{background:linear-gradient(to bottom,var(--primary-color),var(--accent-color));border-radius:8px;align-self:center;max-width:400px;padding:4px;overflow:clip;box-shadow:0 2px 4px #0000001a}.profile-banner{background-position:50%;background-size:cover;background-color:color-mix(in srgb,var(--primary-color),var(--mix-color)20%);border-top-left-radius:4px;border-top-right-radius:4px;width:100%;height:120px}.profile-avatar-wrapper{background:linear-gradient(to bottom,color-mix(in srgb,var(--primary-color),var(--mix-color)60%)-100%,color-mix(in srgb,var(--accent-color),var(--mix-color)60%)200%);border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;margin-top:-60px;margin-bottom:10px;margin-left:20px;display:flex}.profile-avatar{border-radius:50%;width:90px;height:90px;overflow:clip}.profile-avatar img{object-fit:cover;object-position:center;width:100%;height:100%;transition:filter .1s}.profile-avatar:hover img{filter:brightness(.6)}.profile-content{background:linear-gradient(to bottom,color-mix(in srgb,var(--primary-color),var(--mix-color)60%)-100%,color-mix(in srgb,var(--accent-color),var(--mix-color)60%)100%);border-bottom-right-radius:4px;border-bottom-left-radius:4px;margin-top:-52px;padding:40px 20px 20px}.profile-info{padding-left:10px}.profile-username{color:var(--text-color);margin-block:10px 0;font-size:1.3em;font-weight:700}.profile-bio{color:var(--text-color);font-size:.9em;line-height:1.4}*{box-sizing:border-box}body{color:#f6f6f7;background-color:#202024;justify-content:center;margin:0;font-family:sans-serif;display:flex}.container{background-color:#333338;flex-direction:column;gap:20px;padding:20px;display:flex;box-shadow:0 4px 8px #0003}@media not (max-width:480px){.container{border-radius:8px;margin:20px;padding:30px}}