:root{--body-repos-bg: #141d2f;--theme: #fff;--theme-hover: #4b6a9b;--search-bg: #1e2a47;--not-available: #8f95a3;--blue: #0079ff;--blue-hover: #60abff;--dark-blue: #4b6a9b;--logo-numbers: #fff;--shadow: 0 0 38px #151b2b;--joined-date: #697c9a;--bio-connections: #fff}[data-theme=light]{--body-repos-bg: #f6f8ff;--theme: #4b6a9b;--theme-hover: #2b3442;--search-bg: #fefefe;--not-available-c: #a4b4cc;--blue: #0079ff;--blue-hover: #60abff;--logo-numbers: #2b3442;--dark-blue: #4b6a9b;--shadow: 0 16px 30px -10px rgba(70, 96, 187, .2);--joined-date: #697c9a;--bio-connections: #4b6a9b}html{font-size:100%}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;font-family:Space Mono,monospace}h1,p{margin:0}button{border:none;outline:none}input,input::placeholder{font-family:Space Mono,monospace}a{color:unset;text-decoration:none;transition:.3s text-decoration ease}a:hover{text-decoration:underline}body{background-color:var(--body-repos-bg);width:100%;height:100vh;display:flex;align-items:center;justify-content:center;overflow-y:hidden}#root{width:100%}.app{width:730px;display:flex;justify-content:center;gap:40px;flex-direction:column;margin-inline:auto}@media (max-width: 768px){.app{width:576px;margin:auto}}@media (max-width: 576px){.app{width:95%;margin:auto}}.header{display:flex;align-items:center;justify-content:space-between}.header h1{color:var(--logo-numbers);font-size:26px}.header .theme{display:flex;align-items:center;gap:12px;cursor:pointer}.header .theme:hover{color:var(--theme-hover)}.header .theme p{text-transform:uppercase;font-size:14px;color:var(--theme)}.search-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px;background-color:var(--search-bg);height:69px;border-radius:15px;box-shadow:var(--shadow)}.search-bar .search-icon{margin-inline:24px}.search-bar input{width:100%;padding:10px;border:none;outline:none;background-color:transparent;color:var(--logo-numbers);font-size:18px}.search-bar button{padding:13px 24px;background-color:var(--blue);transition:background-color .3s ease;cursor:pointer;font-weight:700;color:#fff;border-radius:10px;font-size:16px}.search-bar button:hover{background-color:var(--blue-hover)}@media (max-width: 576px){.search-bar{height:57px}.search-bar .search-icon{margin-inline:12px}.search-bar button{padding:10px 20px}}.search-bar.invalid{animation:invalid .25s ease;transition:all .2s ease}.search-bar.invalid input{color:red}@keyframes invalid{0%{margin-left:0rem;margin-right:0rem}25%{margin-left:.5rem;margin-right:-.5rem}75%{margin-left:-.5rem;margin-right:.5rem}to{margin-left:0rem;margin-right:0rem}}.user-info{background-color:var(--search-bg);border-radius:15px;box-shadow:var(--shadow);position:relative;padding:48px;display:flex;align-items:flex-start;gap:50px;justify-content:space-between}.user-info .avatar-lg{width:117px;height:117px}.user-info .avatar-lg img{width:100%;height:100%;border-radius:50%}.user-info .main-info{display:flex;align-items:flex-start;flex-direction:column;flex:1}.user-info .main-info .profile-info{display:flex;align-items:center;width:100%;gap:25px}.user-info .main-info .profile-info .profile-info-user{display:flex;align-items:flex-start;justify-content:space-between;width:100%}.user-info .main-info .profile-info .profile-info-user .name-userName h1{font-size:26px;color:var(--logo-numbers)}.user-info .main-info .profile-info .profile-info-user .name-userName p{color:var(--blue)}.user-info .main-info .profile-info .profile-info-user .joined-date{color:var(--joined-date)}@media (max-width: 540px){.user-info .main-info .profile-info .profile-info-user{flex-direction:column}.user-info .main-info .profile-info .profile-info-user .name-userName h1{font-size:16px}.user-info .main-info .profile-info .profile-info-user .name-userName p,.user-info .main-info .profile-info .profile-info-user .name-userName .joined-date{font-size:14px}}.user-info .main-info .profile-info img{width:117px;height:117px;display:none;border-radius:50%;transition:.3s ease all}.user-info .main-info .bio{color:var(--bio-connections);margin-top:15px}.user-info .main-info .repos-connections{padding:16px 32px;display:flex;align-items:center;justify-content:space-between;background-color:var(--body-repos-bg);width:100%;margin:30px 0;border-radius:15px}.user-info .main-info .repos-connections .connection span{font-size:14px;color:var(--bio-connections)}.user-info .main-info .repos-connections .connection h2{color:var(--logo-numbers);font-size:22px}.user-info .main-info .status-socials{display:flex;justify-content:space-between;flex-direction:row;gap:20px;width:100%}.user-info .main-info .status-socials .col{display:flex;align-items:flex-start;flex-direction:column}.user-info .main-info .status-socials .col .row{display:flex;align-items:center;gap:15px;margin-bottom:20px}.user-info .main-info .status-socials .col .row p,.user-info .main-info .status-socials .col .row a{color:var(--bio-connections);font-size:15px}@media (max-width: 576px){.user-info .main-info .status-socials .col .row p,.user-info .main-info .status-socials .col .row a{font-size:13px}}.user-info .main-info .status-socials .col .row.not-available a,.user-info .main-info .status-socials .col .row.not-available p{color:var(--not-available);cursor:default}@media (max-width: 576px){.user-info .main-info .status-socials{flex-direction:column;gap:0}}@media (max-width: 768px){.user-info{padding:32px 24px}.user-info .avatar-lg{display:none}.user-info .main-info .profile-info img{display:block}}@media (max-width: 576px){.user-info .main-info .profile-info img{display:block;width:70px;height:70px}.user-info .main-info .bio{font-size:14px}}