/* The font Everett picked in Canva. */
@font-face {
  font-family: "Display";
  src: url("assets/display-font.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

/*
  The black "liquid" card fills the whole window. All sizes inside it use `cqw`
  (1% of the card's width) so the layout scales the same way Canva's page does.
*/
:root {
  --ink: #000;
  --shadow: #acb4bf;
  --white: #fff;
}

html, body { height: 100%; }
body {
  margin: 0;
  background: #000;
  font-family: "Display", "Arial Black", system-ui, sans-serif;
  font-weight: 700;
}

.card {
  container-type: inline-size;
  position: relative;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  background: #000 url("assets/background.jpg") center / cover no-repeat;
  box-sizing: border-box;
}

/* Canva's "Splice" text effect: hollow black outline with a light grey copy offset behind it. */
.splice {
  position: relative;
  z-index: 0;                 /* keeps the ::before shadow above the background image */
  display: inline-block;
  margin: 0;
  color: transparent;
  -webkit-text-stroke: 0.28cqw var(--ink);
  line-height: 1.39;
  white-space: nowrap;
}
.splice::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  transform: translate(0.35cqw, 0.35cqw);
  color: var(--shadow);
  -webkit-text-stroke: 0;
  z-index: -1;
}

.title {
  position: absolute;
  left: 17.7cqw;
  top: 7.4cqw;
  font-size: 7.8cqw;
}

.youtube {
  position: absolute;
  left: 26cqw;
  top: 16.6cqw;
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  text-decoration: none;
}
.youtube img { width: 12.6cqw; height: auto; display: block; }
.handle { font-size: 6.2cqw; }

/* The games list is our addition to the design. Same font, same hollow look as the title. */
.games {
  position: absolute;
  left: 17.7cqw;
  bottom: 6cqw;
  display: flex;
  flex-wrap: wrap;
  gap: 3cqw;
}
.games a {
  display: inline-flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 0.9cqw 2.6cqw;
  font-size: 3.4cqw;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(180deg, var(--white), var(--shadow));
  border: 0.25cqw solid var(--ink);
  border-radius: 100vw;
  /* the offset shadow echoes the header's text effect */
  box-shadow: 0.5cqw 0.5cqw 0 var(--ink), 0.5cqw 0.5cqw 0 0.25cqw var(--shadow);
  transition: transform 0.1s, box-shadow 0.1s;
}
.games a:hover {
  transform: translate(-0.2cqw, -0.2cqw);
  box-shadow: 0.7cqw 0.7cqw 0 var(--ink), 0.7cqw 0.7cqw 0 0.25cqw var(--shadow);
}
.games a:active { transform: translate(0.3cqw, 0.3cqw); box-shadow: 0.2cqw 0.2cqw 0 var(--ink); }
.games .emoji { font-size: 0.9em; }

/* Visit counter, bottom right. */
.hits {
  position: absolute;
  right: 4cqw;
  bottom: 3cqw;
  margin: 0;
  font-size: 1.8cqw;
  color: var(--shadow);
  text-shadow: 0.15cqw 0.15cqw 0 var(--ink);
}

/* On phones the card is tall and narrow, so stack everything top to bottom instead. */
@media (max-width: 600px) {
  .card { display: flex; flex-direction: column; gap: 5cqw; padding: 8cqw 6cqw; }
  .title, .youtube, .games { position: relative; left: auto; top: auto; bottom: auto; }
  .splice { white-space: normal; }
  .title { display: block; font-size: 9cqw; }
  .youtube img { width: 18cqw; }
  .handle { font-size: 9cqw; }
  .games { margin-top: auto; }
  .games a { font-size: 7cqw; padding: 2cqw 6cqw; }
  .hits { position: static; font-size: 4cqw; }
}