@font-face {
  font-family: "Pixelbasel";
  src: url("/static/fonts/pixelbasel/Pixelbasel.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.f-pixel { font-family: "Pixelbasel"; }

@font-face {
  font-family: "Rollmops";
  src: url("/static/fonts/rollmops/Rollmops.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.f-mops { font-family: "Rollmops"; }

:root {
  --color-light: #9a9f4bdb;
  --color-text: #496b22db;
  --color-bold: #0e450bdb;
  --color-shadow: #1b2a09db;

  --bump-a: 2px;
  --bump-b: 3px;
  --bump-c: 4px;
  --bump-d: 6px;
  --bump-e: 8px;
  --bump-f: 12px;
  --bump-g: 16px;
  --bump-h: 20px;
  --bump-i: 24px;
  --bump-max: 28px;
  --bump-uber: 32px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.14;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.2) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(27, 42, 9, 0.15) 0 1px,
      transparent 1px 4px
    );
}

.content {
  min-height: 100vh;
  padding: var(--bump-f);

  background-color: var(--color-light);
  color: var(--color-bold);
  font-size: 1.75rem;
  font-family: "Pixelbasel";
}

header,
main,
footer {
  max-width: 2160px;
  margin: var(--bump-d) auto;
  padding: var(--bump-d);
}

.header {
  max-width: 72%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: var(--bump-d);
  margin: 0 auto;

  background-color: var(--color-text);
  border-radius: var(--bump-d);
  box-shadow: var(--bump-a) var(--bump-a) var(--bump-a) var(--color-bold);
}

.header a {
  display: inline-block;
  transition: transform 0.2s ease;

  color: var(--color-shadow);
  font-weight: bold;
}

.header a:hover {
  transform: translateY(-2px);

  color: var(--color-light);
  text-shadow: 1px 2px 1px var(--color-shadow);
}

.view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: var(--bump-d);
}

h1 {
  letter-spacing: 8px;
  font-size: 6rem;
  margin: -8px 0;
  color: var(--color-shadow);
}

.listing {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bump-uber);
  margin: var(--bump-e);
  padding: var(--bump-h);
}
.listing-item {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--color-text);
  display: grid;
  place-items: center;
  padding: var(--bump-i);
  margin: 0 var(--bump-d);
  text-align: center;
  font-size: smaller;
  transition:
    background-color 1.7s ease-in-out,
    color 1.7s ease-in-out;
}
.listing-item.active {
  background-color: var(--color-shadow);
  color: var(--color-light);
}

.display {
  max-width: 72%;
  margin: var(--bump-g);
  padding: var(--bump-h);

  background-color: var(--color-text);
  color: var(--color-shadow);
  border-radius: var(--bump-f);
  border-bottom-right-radius: 72px;
  box-shadow: var(--bump-a) var(--bump-a) var(--bump-a) var(--color-bold);
}
.display p {
  padding: 16px;
}
.display-f {
  display: flex;
  flex-direction: row;
}
#owner-photo {
  height: 200px;
  width: 200px;
}
#ff-photo {
  height: 175px;
  width: 175px;
}
.big-hide {
  display: none;
}
.small-hide {
  display: contents;
}

.imagebox {
  max-width: 72%;
  padding: var(--bump-f);
  z-index: 9999;
  font-size: 1.3rem;

  background-color: var(--color-text);
  color: var(--color-shadow);
  border-radius: var(--bump-d);
  box-shadow: var(--bump-a) var(--bump-a) var(--bump-a) var(--color-bold);
  margin-top: var(--bump-f);
}