/* GLOBALS */
html, body, h1,h2,h3,h4,h5,h6 { font-family: 'Poppins', sans-serif; user-select: none; }
textarea:focus, input:focus{ outline: none; }
.overflow-hidden { overflow: hidden; }
.flex-center { display: flex; justify-content: center; align-items: center; gap:16px; }
.space-between { display: flex; justify-content: space-between; align-items: center; gap:16px; }
.container-vertical { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.view { max-width: 560px; margin: 0 auto; }
.padding-16 { padding: 16px; }

/* HEADER */
#header { position: sticky; top: 0; left: 0; z-index: 1; transition: all 0.5s; }
#header .home-btn { display: flex; align-items: center; gap: 8px; }
#header .home-btn .logo { display: inline-block; width: 42px; height: 42px; color: aliceblue; fill: #fff; }
#header .home-btn .title { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; }
#header .home-btn .subtitle { text-align: right; }

/* AUTH & HOMEPAGE */
#auth.view { max-width: 1024px; }
#auth.view>h1 { margin: 0; padding: 16px 16px 0 16px; }
#auth.view>.grids { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding: 16px; }
#auth.view>.grids>.box { display: flex; flex-direction: column; justify-content: space-between; }
#auth.view>.grids>.block>.images>.image { height: calc(100vh/3); background-size: cover; background-position: center; }
#auth.view>.grids>.block>.content>h1 { margin:0; }

/* PROFILE CHOOSER */
#profile-chooser .w3-ul li { padding:8px; }
#profile-chooser .profile-card { display: flex; gap:8px; }
#profile-chooser .profile-card .avatar, #profile-chooser .profile-card .avatar>img { width: 82px; height: 82px; }
#profile-chooser .profile-card .about { padding: 6px 0; }

#profile-chooser .skeleton.avatar { height: 82px; width: 82px; animation: pulse 2s infinite ease-in-out; }
#profile-chooser .skeleton.name { height: 12px; width: 124px; margin-bottom: 8px; animation: pulse 2s infinite ease-in-out; }
#profile-chooser .skeleton.about { height: 24px; width: 154px; margin-bottom: 8px; animation: pulse 2s infinite ease-in-out; }
#profile-chooser .skeleton.buttons { height: 36px; width: 134px; animation: pulse 2s infinite ease-in-out; }

@keyframes pulse {
    0% { background-color: #94A3B8; }
    50% { background-color: #CBD5E1; }
    100% { background-color: #94A3B8; }
}

/* PROFILE */
#profile { padding-bottom: 110px; }
#profile .basic-info .avatar { width: 252px; height: 252px; margin: auto; }
#profile .cover-photo { position: fixed; top: 0; height: 218px; width: 100%; left: 0; z-index: -1; border-radius: 0 0 148px 148px; }
#profile .basic-info .avatar,#profile .basic-info .open-photo-editor { border: 8px solid #fff; }
#profile .social-btns .btns, #profile .social-btns, #profile .btn-wrapper { display: flex; justify-content: start; align-items: center; flex-wrap: wrap; row-gap: 10px; column-gap: 10px; }
#profile .social-btns .btn-container { display: inline-block; }
#profile .about { border:0; resize: vertical; overflow: hidden; height: auto; transition: height 0.5s; }
#profile .name:disabled,#profile .about:disabled { background-color: #fff; }
#profile #profile-theme { width: 162px; }

#profile .skeleton .avatar { animation: pulse 2s infinite ease-in-out; }
#profile .skeleton .share { width: 96px; height: 40px; animation: pulse 2s infinite ease-in-out; }
#profile .skeleton .name { width: 272px; height: 70px; animation: pulse 2s infinite ease-in-out; }
#profile .skeleton .about { width: 272px; height: 43px; animation: pulse 2s infinite ease-in-out; }
#profile .skeleton .social-btn { width: 54px; height: 54px; animation: pulse 2s infinite ease-in-out; }
#profile .skeleton .links .link { height: 54px; animation: pulse 2s infinite ease-in-out; }