@view-transition {
  navigation: auto;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*:focus:focus-visible {
  outline: solid 2px var(--color-limegreen);
  outline-offset: 2px;
}

html {
  --color-limegreen: rgba(104, 204, 88, 1);
  --color-seagreen: rgba(44, 144, 28, 1);
  --gradient-green-angle: 180deg;
  --gradient-green: linear-gradient(var(--gradient-green-angle), var(--color-limegreen), var(--color-seagreen));
  --gradient-pink: linear-gradient(var(--gradient-green-angle), pink, hotpink);
  --font-primary: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue,
    helvetica, Ubuntu, roboto, noto, arial, sans-serif;
  font: 600 16px/1 var(--font-primary);
  -webkit-text-size-adjust: 100%;
}
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background: #111;
  color: rgb(255 255 255 / 85%);
  min-height: 100vh;
}
header {
  background: rgb(17 17 17 / 0.95);
  border-bottom: 1px solid rgb(255 255 255 / 25%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: 0.5rem;
  padding: 1rem;
  position: sticky;
  top: 0;
  z-index: 1;
}
header h1 {
  font: 500 1.125rem/1.25 var(--font-primary);
}

header h1 span {
  background-color: var(--color-limegreen);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: block;
  font-weight: 700;
}

form.cinema-date-select {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}
.cinema-date-select select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32v32h128V32c0-17.7 14.3-32 32-32s32 14.3 32 32v32h48c26.5 0 48 21.5 48 48v48H0v-48c0-26.5 21.5-48 48-48h48V32c0-17.7 14.3-32 32-32zM0 192h448v272c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm80 64c-8.8 0-16 7.2-16 16v96c0 8.8 7.2 16 16 16h96c8.8 0 16-7.2 16-16v-96c0-8.8-7.2-16-16-16H80z'/%3E%3C/svg%3E ")
      0.625rem center / 1.25rem 1.25rem no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E ")
      calc(100% - 0.625rem) center / 1.25rem 1.25rem no-repeat,
    var(--gradient-green),
    black;
  border: none;
  border-radius: 4px;
  color: black;
  cursor: pointer;
  font: 700 1rem/1.2 var(--font-primary);
  padding: 0.75em 2.5rem 0.75em 2.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}
.cinema-date-select select option {
  color: white;
}
.cinema-date-select select#select-location {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M74.6 373.2c41.7 36.1 108 82.5 166.1 73.7 6.1-.9 12.1-2.5 18-4.5-9.2-12.3-17.3-24.4-24.2-35.4-21.9-35-28.8-75.2-25.9-113.6-20.6 4.1-39.2 13-54.7 25.4-6.5 5.2-16.3 1.3-14.8-7 6.4-33.5 33-60.9 68.2-66.3 2.6-.4 5.3-.7 7.9-.8l19.4-131.3c2-13.8 8-32.7 25-45.9 18.6-14.3 50.9-30.5 103.6-35.3l-2.4-2.1c-20.2-15.6-72.4-41.6-185.1-24.5S20.5 63 5.7 83.9C0 91.9-.8 102 .6 111.8l24.2 164.3c5.5 37.3 21.5 72.6 49.8 97.2zm87.7-219.6c4.4-3.1 10.8-2 11.8 3.3.1.5.2 1.1.3 1.6 3.2 21.8-11.6 42-33.1 45.3S99.8 192 96.6 170.3c-.1-.5-.1-1.1-.2-1.6-.6-5.4 5.2-8.4 10.3-6.7 9 3 18.8 3.9 28.7 2.4s19.1-5.3 26.8-10.8zM261.6 390c29.4 46.9 79.5 110.9 137.6 119.7s124.5-37.5 166.1-73.7c28.3-24.5 44.3-59.8 49.8-97.2l24.2-164.3c1.4-9.8.6-19.9-5.1-27.9-14.8-20.9-57.3-61.2-170-78.3s-164.8 8.9-185 24.5c-7.8 6-11.5 15.4-12.9 25.2l-24.2 164.3c-5.5 37.3-.4 75.8 19.6 107.7zm142.9-154.7c-7.7-5.5-16.8-9.3-26.8-10.8s-19.8-.6-28.7 2.4c-5.1 1.7-10.9-1.3-10.3-6.7.1-.5.1-1.1.2-1.6 3.2-21.8 23.2-36.8 44.7-33.5s36.3 23.5 33.1 45.3c-.1.5-.2 1.1-.3 1.6-1 5.3-7.4 6.4-11.8 3.3zm136.2 15.5c-1 5.3-7.4 6.4-11.8 3.3-7.7-5.5-16.8-9.3-26.8-10.8s-19.8-.6-28.7 2.4c-5.1 1.7-10.9-1.3-10.3-6.7.1-.5.1-1.1.2-1.6 3.2-21.8 23.2-36.8 44.7-33.5s36.3 23.5 33.1 45.3c-.1.5-.2 1.1-.3 1.6zM530 350.2c-19.6 44.7-66.8 72.5-116.8 64.9s-87.1-48.2-93-96.7c-1-8.3 8.9-12.1 15.2-6.7 23.9 20.8 53.6 35.3 87 40.3s66.1.1 94.9-12.8c7.6-3.4 16 3.2 12.6 10.9z'/%3E%3C/svg%3E")
      0.625rem center / 1.25rem 1.25rem no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E ")
      calc(100% - 0.625rem) center / 1.25rem 1.25rem no-repeat,
    var(--gradient-green);
}

.cinema-date-select button {
  background: gold;
  border: 0px;
  border-radius: 14px;
  color: black;
  font: 600 1rem/1.2 inherit;
  padding: 0.5em 1em;
}

.movies {
  display: grid;
  align-content: start;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(max(100% / 6 - 1rem, min(15rem, 100%)), 1fr));
  list-style: none inside;
  padding: 1rem;
}
.movie {
  display: grid;
  align-content: start;
  gap: 0.625rem;
  position: relative;
  text-decoration: none;
}
.movie img.poster {
  border-radius: 7px;
  display: block;
  height: auto;
  width: 100%;
  aspect-ratio: 2.1 / 3;
  object-fit: cover;
  object-position: center top;
}
.movie h2 {
  font: 500 1rem/1.15 var(--font-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.placeholder-poster {
  aspect-ratio: 2.1 / 3;
  background: linear-gradient(#111, #222);
  border-radius: 7px;
  display: grid;
  place-content: center;
  font-size: 3rem;
}
.placeholder-poster span {
  filter: grayscale(50%) blur(5px);
  transition: all 250ms ease-in;
}

.placeholder-poster:hover span {
  filter: grayscale(10%) blur(0px);
}

.shows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style-type: none;
}
.shows li {
  color: rgba(255 255 255 / 75%);
  display: grid;
  align-items: center;
  gap: 0.5rem;
  grid-template-columns: min-content 1fr;
  font:
    500 0.875rem/1 ui-monospace,
    "Cascadia Code",
    "Source Code Pro",
    Menlo,
    Consolas,
    "DejaVu Sans Mono",
    monospace;
  text-decoration: none;
  transition: 0.25s;
}

.shows li a {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E")
      0.5rem center / 16px 16px no-repeat,
    var(--gradient-green);
  border-radius: 0.25rem;
  color: #000;
  font-weight: 700;
  padding: 0.625rem 0.625rem 0.625rem 2rem;
  text-decoration: none;
}
.shows li a:hover {
  background:
    url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjYXJ0LXNob3BwaW5nIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2FydC1zaG9wcGluZyIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik00NjMuMSA0MTZjLTI2LjUxIDAtNDcuMSAyMS40OS00Ny4xIDQ4czIxLjQ5IDQ4IDQ3LjEgNDhzNDcuMS0yMS40OSA0Ny4xLTQ4UzQ5MC41IDQxNiA0NjMuMSA0MTZ6TTE3NS4xIDQxNmMtMjYuNTEgMC00Ny4xIDIxLjQ5LTQ3LjEgNDhTMTQ5LjUgNTEyIDE3NS4xIDUxMnM0Ny4xLTIxLjQ5IDQ3LjEtNDhTMjAyLjUgNDE2IDE3NS4xIDQxNnpNNTY5LjUgNDQuNzNjLTYuMTA5LTguMDk0LTE1LjQyLTEyLjczLTI1LjU2LTEyLjczSDEyMS4xTDExOS42IDE5LjUxQzExNy40IDguMTkgMTA3LjUgMCA5NiAwSDIzLjFDMTAuNzUgMCAwIDEwLjc1IDAgMjMuMVMxMC43NSA0OCAyMy4xIDQ4aDUyLjE0bDYwLjI4IDMxNi41QzEzOC42IDM3NS44IDE0OC41IDM4NCAxNjAgMzg0SDQ4OGMxMy4yNSAwIDI0LTEwLjc1IDI0LTIzLjFDNTEyIDM0Ni43IDUwMS4zIDMzNiA0ODggMzM2SDE3OS45TDE3MC43IDI4OGgzMTguNGMxNC4yOSAwIDI2Ljg0LTkuNDcgMzAuNzctMjMuMjFsNTQuODYtMTkxLjFDNTc3LjUgNjMuMDUgNTc1LjYgNTIuODMgNTY5LjUgNDQuNzN6Ij48L3BhdGg+PC9zdmc+")
      0.5rem center / 16px 16px no-repeat,
    #fff;
}
.shows li p {
  background: linear-gradient(
    180deg,
    transparent calc(50% - 0.5px),
    rgb(255 255 255 / 25%) calc(50% - 0.5px),
    rgb(255 255 255 / 25%) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  line-height: 1.2;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shows li p span {
  background: #111;
  box-shadow: -0.5rem 0 0 #111;
}

div.error {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

div.error p {
  font: 500 1rem/1.5 var(--font-primary);
}

div.error ul {
  display: grid;
  gap: 0.75rem;
  list-style: none inside;
}
div.error a {
  color: var(--color-limegreen);
  font-weight: 600;
}


.cinema-picker {
  display: grid;
  list-style: none inside;
}

.cinema-picker li {
  border-bottom: 1px solid #333;
  padding: 0.25rem 1rem;
}

.cinema-picker li.hide {
  display: none;
}

.cinema-picker a {
  border-radius: 4px;
  color: var(--color-limegreen);
  display: inline-block;
  font-size: 1.125rem;
  line-height: 1.75;
  text-decoration: none;
}

input#cinema-filter {
  border: none;
  border-radius: 4px;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin: 1rem;
  padding: 1em;
  width: min(calc(100vw - 2rem), 400px);
}

/* Method to visually hide something but still */
/* keep it available to screen readers */
.visually-hidden {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}