html, body {
  inset: 0 0 0 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  min-height: 100%;
}

main {
  visibility: hidden;
  opacity: 0;
  
  width: 100%;
  height: 100%;

  z-index: 0;
}

#bg-canvas {
  display: block;
  position: fixed;
  
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

.centered-container {
  position: absolute;
  inset: 0 0 0 0;
  margin: auto auto;

  display: flex;
}

.centered {
  margin: auto auto;
  position: relative;
}

/* like iframes but . . . wait what are iframes again? */
.cryframe {
  border: 0.5ch solid var(--theme-tty-border);
  padding: 20px;

  /* width: auto; */
  /* height: auto; */
  
  background-color: var(--theme-bg);
  color: var(--theme-text);

  font-family: monospace;
  font-size: 1.5em
}

#boot-ppty {
  z-index: 1;
}

#frames {
  /* border-box means padding+margin are included in width+height */
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 5% 10% 0% 5%;

  display: grid;
  grid-template-areas:
    "whoami butterfly"
    "socials butterfly"
    "disclaimer disclaimer"
    ;
  grid-template-columns: 1fr 1fr;
}

#whoami {
  grid-area: whoami;
  
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: start;
  gap: 2ch;
}

#whoami .avatar {
  height: 18ch;
  display: block;          /* avoid inline-image gaps */
  object-fit: scale-down;
}

#socials {
  grid-area: socials;
}

#butterfly {
  grid-area: butterfly;
}

#disclaimer {
  grid-area: disclaimer;
}

.socials-list {
  margin: 0;
  padding: 0;
  width: 45ch;

  list-style: none;
}

.socials-item {
  border-bottom: 1px solid var(--theme-icon-off);
  padding: 8px 0;

  display: flex;
  align-items: start;
  gap: 12px;
}

.socials-icon {
  width: 2ch;
  height: 2ch;

  flex: 0 0 40px; /* fixed column */
  object-fit: contain;
}

.socials-name {
  flex: 1 1 9ch;
  overflow: hidden;
  white-space: nowrap;
  
  text-align: left;
  text-overflow: ellipsis;
}

.socials-link {
  min-width: 0; /* important to allow truncation if needed */
  
  overflow: hidden;
  white-space: nowrap;

  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;

  color: var(--theme-tty-command);
}