html,
body,
.container {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  color: #dee;
  background: linear-gradient(#032, #215);
}

.container {
  overflow: scroll;
  display: grid;
  place-items: center;
  gap: 0;
}

.main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: min(640px, 100vw);
  background: #ffffff14;
  --padding: 32px;
  padding: var(--padding);
  border-radius: 8px;
}

.main::before {
  content: "";
  background: linear-gradient(
    135deg,
    #e40303 calc(100% / 6 * 0.5),
    #ffa52c calc(100% / 6 * 1.5),
    #ffff41 calc(100% / 6 * 2.5),
    #008018 calc(100% / 6 * 3.5),
    #0000f9 calc(100% / 6 * 4.5),
    #86007d calc(100% / 6 * 5.5)
  );
  --extra: 0.618;
  transform: translate(
    calc(-1 * var(--padding) * var(--extra)),
    calc(-0.25 * var(--padding))
  );
  width: calc(100% + var(--padding) * 2 * var(--extra));
  height: 7px;
  border-radius: 2px;
}

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

@media (max-width: 640px) {
  .main {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 0;
    transform: none;
    --padding: 16px;
  }

  .container > .spacer {
    display: none;
  }

  .header {
    flex-direction: column;
    align-items: start;
  }
}

.header .avatar {
  max-width: min(161px, 100%);
  border-radius: 10%;
}

.header .header-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.header .name {
  font-size: 28px;
}

.header .name-sec {
  font-size: 18px;
  color: #bcc;
  margin-bottom: 4px;
}

.header .bio img {
  max-height: 20px;
  vertical-align: sub;
}

.links {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: fit-content;
}

.links > li {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.links > li img {
  display: block;
  width: 24px;
  height: 24px;
}

.links > li code {
  line-break: anywhere;
}

a {
  color: #9ef;
  text-decoration: dashed underline;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration: solid underline;
}