details {
  cursor: pointer;
}

#about-me p {
  margin: 5px;
}

.left-column {
  display: flex;
  flex-basis: 200px;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  justify-content: flex-start;
  align-self: flex-start;
  margin: 0;
}

.right-column {
  display: flex;
  flex-basis: 300px;
  flex-grow: 3;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

.avatar {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 200px;
}

.online-now {
  width: 72px;
  height: 16px;
}

.contacts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}

.btn-full {
  flex-basis: 100%;
}

.btn-half {
  flex: 1;
}

/* Contact links are real <a>s (middle-click, crawlers, screen readers) but
   copy XP.css's <button> look so they match the "Add to friends" button. */
.contacts a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 75px;
  min-height: 23px;
  padding: 0 12px;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ecebe5 86%, #d8d0c4);
  color: #000;
  font-family: 'Pixelated MS Sans Serif', Arial;
  -webkit-font-smoothing: antialiased;
  font-size: 11px;
  text-decoration: none;
}

.contacts a:hover {
  box-shadow:
    inset -1px 1px #fff0cf,
    inset 1px 2px #fdd889,
    inset -2px 2px #fbc761,
    inset 2px -2px #e5a01a;
}

.contacts a:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.contacts a:active {
  box-shadow: none;
  background: linear-gradient(
    180deg,
    #cdcac3,
    #e3e3db 8%,
    #e5e5de 94%,
    #f2f2f1
  );
}

.userbars {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.userbars img {
  max-width: 100%;
}

.left-column p {
  margin: 0px;
  font-size: 10px;
}

/* On phones, flatten the column/sidebar wrappers so every section becomes a
   direct flex item of .window-content, then reorder them with `order`.
   `display: contents` makes the wrapper boxes disappear while keeping their
   children, so cross-container ordering becomes possible.
   Desired order: about me > links > userbars > navigation (avatar/contacts first). */
@media only screen and (max-width: 650px) {
  .window-content {
    flex-direction: column;
  }

  .current-page,
  .right-column,
  .sidebar {
    display: contents;
  }

  .left-column {
    order: 0;
    align-self: stretch;
  }
  #about-me {
    order: 1;
  }
  #links {
    order: 2;
  }
  #userbars {
    order: 3;
  }
  #navigation {
    order: 4;
  }
}