:root {
  color-scheme: light dark;
}

body {
  font-family: sans-serif;
}

menu {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin-bottom: 0;
  gap: 1ch;
}

.ib {
  display: inline-block;
}

.banner {
  width: 100%;
  aspect-ratio: 3 / 1;
  background-image: url("https://flavortown.hackclub.com/assets/default-banner-3d4e1b67.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.project {
  border: 1px solid light-dark(black, white);
  border-radius: 0.5em;
  margin: 0.5ch;
  padding: 0.5em;
  width: min(calc(600px - 1.5em - 2px), calc(100% - 1.5em - 2px));
  vertical-align: top;
}

.project > p {
  overflow-y: scroll;
}

.demo, .repo, .demo-repo, .bruh {
  display: none;
}

.demo::before {
  content: "🌐 ";
}

.repo::before {
  /* closest one I could find */
  content: "🍒 ";
}

.demo::after {
  content: attr(data-host);
  font-size: 11px;
  color: light-dark(silver, grey);
}

.repo::after {
  content: attr(data-host);
  font-size: 11px;
  color: light-dark(silver, grey);
}

.visible {
  display: initial;
}

#profile-link {
  border-radius: 10px;
  text-decoration: none;
  border: 2px solid light-dark(silver, grey);
  background-color: light-dark(lightgrey, dimgrey);
}

#profile-link > img {
  border-radius: 5px;
}

/* not sure if we'll need this in the future,
since Flavortown is only in English,
but it's nice for me to know about
:dir(rtl) a[target="_blank"]::before {
  content: "↖ ";
}
*/