@import url(../vendor/color.css);
@import url(../vendor/beer.min.css);
@import url(../vendor/type.css);
@import url(../vendor/fluent-emoji/SegoeUIEmoji.css);

:root {
  --emoji-font: SegoeUIEmoji, 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Symbol';
  --font: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif, var(--emoji-font);
}
html, body {
  font-family: var(--font);
}

body {
  font-size: 1.2em;
}

a {
  text-decoration: underline;
}

:is(h1, h2, h3, h4, h5, h6) i {
  ---size: 1em;
  margin-right: 0.3em;
}

:is(nav) a, .author {
  text-decoration: none;
}

p, li {
  line-height: 160%;
}

.author {
  font-family: 'VC Honey Deck', var(--font);
  color: inherit;
  font-size: 1.2em;
}

img {
  max-inline-size: 100%;
  max-block-size: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.status .emoji {
  margin-bottom: auto;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  font-size: 3.5rem;
  line-height: 3.5rem;
  text-indent: -10px;
  /*visibility:hidden;*/
}

.profile.avatar {
  border-radius: .75rem;
  max-block-size: 10rem;
  max-inline-size: 10rem;
}

#bio :is(h1, h2, h3, h4, h5, h6) {
  text-align:center;
  display: block;
}

.skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
  min-height: 1em;
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 80%);
  }

  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

.author.skeleton {
  width: 6em;
  display: inline-block;
}

p.skeleton {
  width: 80%;
}

.chip.skeleton {
  width: 10em;
}

main {
  position: relative;
}

.skeleton-container {
  flex:1 1 auto;
  overflow: hidden;
}