:root {
  --vintageBlue: #75c8ae;
  --vintageBrown: #5a3d2b;
  --vintageOrange: #e5771e;
  --vintageYellow: #f4a127;
  --vintageWhite: #ffecb4;
}
body {
  font-family: "Abel", "Gill Sans", sans-serif;
  font-size: 18px;
  background: var(--vintageBrown);
  background: radial-gradient(circle at calc(100vw - 10vw) 10vw, rgba(90, 61, 43, 1) 0, rgba(90, 61, 43, 1) 5vw, transparent 5vw),
    radial-gradient(circle at calc(100vw - 10vw - 3.5vw) calc(10vw + 3.5vw), rgba(229, 119, 30, 1) 0, rgba(229, 119, 30, 1) 10vw, transparent 10vw),
    radial-gradient(circle at calc(100vw - 10vw - 7vw) calc(10vw + 7vw), rgba(244, 161, 39, 1) 0, rgba(244, 161, 39, 1) 15vw, transparent 15vw),
    radial-gradient(
      circle at calc(100vw - 10vw - 10.5vw) calc(10vw + 10.5vw),
      rgba(255, 236, 180, 1) 0,
      rgba(255, 236, 180, 1) 20vw,
      rgba(90, 61, 43, 1) 20vw
    );
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 1em;
}
body h1 {
  font-family: "Gill Sans", sans-serif;
  background: var(--vintageBlue);
  background: linear-gradient(
    170deg,
    var(--vintageBlue) 0%,
    var(--vintageBlue) 33%,
    #ffffff 33%,
    #ffffff 67%,
    var(--vintageBlue) 67%,
    var(--vintageBlue) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-size: 3rem;
  margin: 0 0 1rem;
}
body .images {
  display: flex;
  align-items: flex-start;
}
body .images > * > * {
  position: relative;
  color: var(--vintageWhite);
  padding: 0.125em 0.5em;
  margin: 0.25em;
  text-decoration: none;
  box-sizing: border-box;
  border-radius: 0.3em;
}
body .images > * > *::after {
  content: "";
  position: absolute;
  inset: 0;
  color: var(--vintageBrown);
  background-color: var(--vintageWhite);
  background-image: radial-gradient(#ffffff 50%, var(--vintageWhite) 100%);
  opacity: 1;
  mix-blend-mode: multiply;
  transition: background-color 0.3s;
}
body .images > * > *:hover:not(:focus) {
  color: #ffffff;
  transform: scale(1.05) rotate(1deg);
  transition: transform 0.3s;
}
body .images > * > *:hover::after,
body .images > * > *:focus::after {
  background-color: #ffffff;
  background-image: radial-gradient(#ffffff, #ffffff);
}

body .categories {
  display: flex;
  flex-wrap: wrap;
  align-content: baseline;
  width: 15em;
  height: calc(100vh - 7rem);
  overflow-y: auto;
}
body .categories a {
  background-color: var(--vintageOrange) !important;
}
body .categories a.active,
body .categories a:active {
  background-color: var(--vintageYellow) !important;
  transform: scale(1.05);
}
body .categories a:focus {
  outline-color: var(--vintageYellow);
}
body .categories a::after {
  content: none !important;
  mix-blend-mode: normal !important;
}

body .list {
  display: grid;
  gap: 1em;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: calc(100% - 15rem);
  margin-left: 1rem;
}
body .list button {
  font-family: "Abel", "Gill Sans", sans-serif;
  font-size: 20px;
  position: relative;
  background-color: transparent;
  height: 33.3vh;
  border: 0;
  padding: 0;
  margin: 0;
}
body .list button > img {
  background-color: #ffffff;
  padding: 0.5em 0.5em 2em;
  width: calc(100% - 1em);
  height: calc(100% - 2.5em);
  object-fit: cover;
  object-position: center;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.5);
}
body .list button > span {
  position: absolute;
  color: #000000;
  font-size: 16px;
  right: 0.5rem;
  bottom: 0.25rem;
}
body .list button:focus > img {
  padding: 0.5em;
  position: fixed;
  inset: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  z-index: 10;
  object-fit: initial;
}
body .list button:focus > span {
  color: var(--vintageWhite);
  position: fixed;
  inset: 0.5rem;
  z-index: 11;
  pointer-events: none;
  text-shadow: 0 1px 0 #000000, 1px 0 0 #000000, 0 -1px 0 #000000, -1px 0 0 #000000;
}

body .back {
  background-color: #000000;
  inset: 0;
  opacity: 0.8;
  position: fixed;
  z-index: 1;
  display: none;
}
body .back.visible {
  display: block;
}

@media screen and (max-width: 1280px) {
  body .list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 1024px) {
  body .list {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  body .images {
    flex-direction: column;
  }
  body .categories {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    flex-wrap: nowrap;
    overflow-y: visible;
    overflow-x: auto;
  }
  body .list {
    width: 100%;
    margin: 0;
  }
}