/*# sourceMappingURL=index.ae6840a22c94b760.css.map */
.welcome {
  font-family: Audiowide;
}

.section-header {
  font-family: "Audiowide", sans-serif;
  font-size: 24px;
  display: flex;
}
@media (min-width: 768px) {
  .section-header {
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  .section-header {
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 8px;
  }
}
.section-header {
  border-color: var(--foreground);
  border-style: solid;
  border-width: 0;
}
@media (min-width: 768px) {
  .section-header {
    border-right-width: 1px;
  }
}
@media (max-width: 767px) {
  .section-header {
    border-bottom-width: 1px;
  }
}
.section-header {
  margin: 8px;
  padding-right: 8px;
  text-align: right;
}
@media (max-width: 767px) {
  .section-header .title {
    text-align: left;
  }
}
.section-header .details {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  display: flex;
}
@media (min-width: 768px) {
  .section-header .details {
    flex-direction: column;
    margin-top: 16px;
  }
  .section-header .details :last-child {
    margin-top: 4px;
  }
}
@media (max-width: 767px) {
  .section-header .details {
    width: 100%;
    justify-content: flex-end;
    padding-bottom: 2px;
  }
}
.section-header .details .separator {
  margin: 0 4px;
}

.sections {
  display: grid;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .sections {
    grid-template-columns: 128px 1fr;
  }
}
@media (max-width: 767px) {
  .sections {
    grid-template-columns: 1fr;
  }
}

.post-preview {
  margin: 8px;
}

.tiles {
  display: grid;
  grid-template-columns: 50% 50%;
}
.tiles .tile {
  color: white;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--foreground);
  transition: background-color 0.2s linear;
  min-height: 80px;
  border-radius: 16px;
  margin: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
}
.tile.music-pv {
  display: flex;
  flex-direction: row;
  border: 1px solid var(--foreground);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme-override]) .tile.music-pv:hover {
    background-color: rgb(229.5, 229.5, 229.5);
  }
}
:root[data-theme-override=light] .tile.music-pv:hover {
  background-color: rgb(229.5, 229.5, 229.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme-override]) .tile.music-pv:hover {
    background-color: rgb(46.2, 46.2, 46.2);
  }
}
:root[data-theme-override=dark] .tile.music-pv:hover {
  background-color: rgb(46.2, 46.2, 46.2);
}

.tile.music-pv picture {
  border-radius: inherit;
  height: 80px;
  aspect-ratio: 1;
}
.tile.music-pv picture img {
  border-radius: inherit;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.tile.music-pv .meta {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 8px;
}
.tile.music-pv .meta .title {
  font-size: 18px;
  margin-bottom: 8px;
}
@media (max-width: 519px) {
  .tile.music-pv .meta .title {
    font-size: 16px;
  }
  .tile.music-pv .meta .info {
    font-size: 12px;
  }
}
.tile:hover {
  text-decoration: none;
}
.tile.apertis {
  background-color: #3a5a80;
}
.tile.apertis:hover {
  background-color: rgb(68.1032258065, 105.6774193548, 150.2967741935);
}
.tile.collabora {
  background-color: #5c2983;
}
.tile.collabora:hover {
  background-color: rgb(110.0790697674, 49.0569767442, 156.7430232558);
}
.tile.github {
  background-color: #238636;
}
.tile.github:hover {
  background-color: rgb(42.0621301775, 161.0378698225, 64.8958579882);
}
.tile.mastodon {
  background-color: #5a46da;
}
.tile.mastodon:hover {
  background-color: rgb(106.5, 88.5, 221.7);
}
.tile.srht {
  background-color: #0062cc;
}
.tile.srht:hover {
  background-color: rgb(0, 112.7, 234.6);
}
.tile.soundcloud {
  background-color: #d13805;
}
.tile.soundcloud:hover {
  background-color: rgb(237.908411215, 63.7457943925, 5.691588785);
}
.tile.youtube {
  background-color: #bd0404;
}
.tile.youtube:hover {
  background-color: rgb(220.0430051813, 4.6569948187, 4.6569948187);
}
.tile .header {
  margin: 0;
}
@media (max-width: 519px) {
  .tile .header {
    font-size: 20px;
  }
}