snort/src/pages/ProfilePage.css

.profile {
  flex-direction: column;
}

.profile .banner {
    width: 100%;
    height: 210px;
    margin-bottom: -80px;
    object-fit: cover;
    mask-image: linear-gradient(to bottom, var(--bg-color), rgba(0,0,0,0));
    -webkit-mask-image: linear-gradient(to bottom, var(--bg-color), rgba(0,0,0,0));
    z-index: 0;
}

@media (min-width: 720px) {
  .profile .banner {
      width: 100%;
      max-width: 720px;
      height: 300px;
      margin-bottom: -120px;
  }
}

.profile p {
    white-space: pre-wrap;
}

.profile .name h2 {
    margin: 0;
}

@media (min-width: 720px) {
  .profile .banner {
      width: 100%;
      max-width: 720px;
      height: 300px;
      margin-bottom: -120px;
  }
}

.profile .avatar-wrapper {
    align-self: flex-start;
    z-index: 1;
    margin-left: 4px;
}

.profile .avatar {
    border-radius: 50%;
    height: 210px;
    width: 210px;
    background-image: var(--img-url), var(--gray-gradient);
    border: 4px solid transparent;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-size: cover;
    box-sizing: border-box;
}

.profile .avatar[data-domain="snort.social"] {
    background-image: var(--img-url), var(--snort-gradient);
}

.profile .avatar[data-domain="nostrplebs.com"] {
    background-image: var(--img-url), var(--nostrplebs-gradient);
}

.profile .avatar[data-domain="nostrpurple.com"] {
    background-image: var(--img-url), var(--nostrplebs-gradient);
}

.profile .avatar[data-domain="nostr.fan"] {
    background-image: var(--img-url), var(--nostrplebs-gradient);
}

.profile .avatar[data-domain="nostrich.zone"] {
    background-image: var(--img-url), var(--nostrplebs-gradient);
}

.profile .avatar[data-domain="nostriches.net"] {
    background-image: var(--img-url), var(--nostrplebs-gradient);
}

.profile .name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.profile .name h2 {
    margin: 0;
}

.profile .details {
    max-width: 680px;
    width: 100%;
    margin-top: 12px;
}

.profile .details p {
    word-break: break-word;
}

.profile .details a {
    color: var(--highlight);
}

.profile .website {
    color: var(--highlight);
    margin: 6px 0;
}

.profile .lnurl {
    color: var(--highlight);
    margin: 6px 0;
    cursor: pointer;
}

.profile .lnurl:hover {
    text-decoration: underline;
}

.profile .btn-icon {
    color: var(--font-color);
    padding: 6px;
    margin-left: 4px;
}

.profile .website::before {
    content: '🔗 ';
    font-size: 10px;
}

.profile .lnurl {
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile .details-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    width: 100%;
    margin-left: 4px;
}

.profile .copy .body { font-size: 12px }

@media (min-width: 360px) {
  .profile .copy .body { font-size: 14px }
  .profile .details-wrapper, .profile .avatar-wrapper { margin-left: 21px; }
  .profile .details { width: calc(100% - 21px); }
}

@media (min-width: 720px) {
  .profile .details-wrapper, .profile .avatar-wrapper { margin-left: 30px; }
  .profile .details { width: calc(100% - 30px); }
}

.profile .follow-button {
    position: absolute;
    top: -30px;
    right: 20px;
}

.profile .message-button {
    position: absolute;
    top: -30px;
    right: 74px;
}

.profile .no-banner .follow-button {
  right: 0px;
}
.profile .no-banner .message-button {
  right: 54px;
}

.tabs {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin: 10px 0;
}

.tabs > div {
  margin-right: 0;
}

.tab {
    margin: 0;
    padding: 8px 0;
    border-bottom: 3px solid var(--gray-secondary);
}
.tab.active {
    border-bottom: 3px solid var(--highlight);
}

.profile .no-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.profile .no-banner .avatar {
    height: 256px;
    width: 256px;
    margin-bottom: 30px;
}

.profile .no-banner .avatar-wrapper, .profile .no-banner .details-wrapper {
  margin: 0 auto;
}

@media (min-width: 720px) {
  .profile .no-banner {
      width: 100%;
      flex-direction: row;
      justify-content: space-around;
      margin-top: 21px;
  }
  .profile .no-banner .avatar-wrapper {
      margin: auto 10px;
  }
  .profile .no-banner .details-wrapper {
      margin-left: 10px;
      margin-top: 21px;
      max-width: 420px;
  }
}