@charset "UTF-8";
/* Variables */
/* Base Styles */
body {
  background-color: #1b1e23;
  color: #c5c6c7;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.4; }

header {
  background-color: #2b343d;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  color: #c5c6c7;
  display: flex;
  justify-content: stretch;
  align-content: stretch;
  border-bottom: 15px solid #1b1e23;
  height: 5em;
  padding: 0 3em; }
  header .mobile-menu-toggle {
    display: none;
    font-size: 2.5em;
    margin-left: auto; }
    @media screen and (max-width: 600px) {
      header .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center; } }
  header > * {
    display: flex;
    align-items: center;
    justify-content: center; }
  header a {
    color: #c5c6c7;
    text-decoration: none;
    transition: color 0.1s; }
    header a.active {
      color: #4b5358;
      border-bottom: 2px solid #66b6fc; }
    header a:not(.dropbtn):hover {
      color: #66b6fc; }
  header #logo {
    color: #c5c6c7;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2em;
    line-height: 1;
    letter-spacing: 0.13em;
    padding: 0;
    margin: 0; }
    header #logo span {
      color: #66b6fc; }
  header nav {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1;
    margin-left: 3em; }
    @media screen and (max-width: 600px) {
      header nav {
        position: fixed;
        top: 5em;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #2b343d;
        flex-direction: column;
        padding: 1em;
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s; }
        header nav.open {
          opacity: 1;
          pointer-events: auto; } }
    header nav a {
      display: flex;
      align-items: center;
      text-align: center;
      white-space: nowrap; }
      @media screen and (min-width: 600px) {
        header nav a {
          margin: 0 1em; } }
      @media screen and (max-width: 600px) {
        header nav a {
          margin: 1em; } }
      header nav a.dropbtn {
        cursor: default;
        box-sizing: border-box; }
        @media screen and (min-width: 600px) {
          header nav a.dropbtn {
            height: 5em; } }
    header nav .dropdown {
      position: relative;
      display: inline-block; }
      header nav .dropdown.hovered .dropdown-content {
        pointer-events: auto;
        opacity: 1;
        max-height: 100vh; }
      header nav .dropdown .dropdown-content {
        display: block;
        opacity: 0;
        pointer-events: none;
        background-color: #2b343d;
        z-index: 1;
        transition: opacity 0.2s, height 0.2s; }
        @media screen and (min-width: 600px) {
          header nav .dropdown .dropdown-content {
            position: absolute;
            top: 100%;
            left: 0;
            width: 13em;
            border-radius: 0 0 1em 1em;
            border: 1px solid #1b1e23;
            border-top: 0;
            transition: opacity 0.2s;
            padding-bottom: 0.5em; }
            header nav .dropdown .dropdown-content > a:first-child {
              margin-top: 0; } }
        @media screen and (max-width: 600px) {
          header nav .dropdown .dropdown-content {
            max-height: 0;
            margin: 1em 0 0 2em;
            border-left: 1px solid #c5c6c7; } }
        header nav .dropdown .dropdown-content a {
          margin: 0.7em;
          margin-left: 1em; }
          @media screen and (max-width: 600px) {
            header nav .dropdown .dropdown-content a {
              margin: 1em; } }
        header nav .dropdown .dropdown-content form {
          padding: 0 1em;
          text-align: left; }
        header nav .dropdown .dropdown-content .separator {
          position: relative;
          width: 100%;
          padding: 0.5em 0 0.5em 1em;
          color: #4b5358;
          box-sizing: border-box;
          text-align: left; }
          header nav .dropdown .dropdown-content .separator::after {
            position: absolute;
            top: 50%;
            content: "";
            display: block;
            height: 1px;
            background-color: #4b5358;
            width: 5em; }
          header nav .dropdown .dropdown-content .separator::after {
            right: 0; }

main {
  flex: 1;
  padding: 20px; }
  main a, main a:visited, main a:active, main a:link {
    color: #66b6fc;
    text-decoration: none; }
    main a:hover, main a:visited:hover, main a:active:hover, main a:link:hover {
      color: #98cefd; }

h2 {
  font-weight: normal; }

ul {
  list-style-type: none;
  padding: 0; }

li {
  margin: 0 0 0 1em;
  padding: 0; }

.content-text ul {
  list-style-type: disc; }

footer {
  background-color: #2b343d;
  color: #c5c6c7;
  text-align: center;
  padding: 1em;
  position: fixed;
  bottom: 0;
  width: 100%; }

.danger {
  color: red; }

.info {
  color: #66b6fc; }

.warning {
  color: #fc466b; }

.success {
  color: #3ddc84; }

.alert {
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0; }

.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px; }
  .movie-grid .movie-item {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    outline: 2px solid transparent;
    transition: outline-color 0.25s ease;
    aspect-ratio: 500 / 741;
    max-width: 300px; }
    @media screen and (max-width: 600px) {
      .movie-grid .movie-item {
        aspect-ratio: 2 / 3;
        max-width: 100%;
        width: 100%; } }
    .movie-grid .movie-item.has-no-poster {
      background-color: #2b343d;
      border: 1px solid #4b5358;
      color: #c5c6c7; }
    .movie-grid .movie-item .no-poster {
      display: block;
      text-align: center;
      position: relative;
      top: 30%;
      padding: 1em; }
    .movie-grid .movie-item .movie-title {
      margin: 0 0.5em; }
    .movie-grid .movie-item.decided .decision-icon::after {
      position: absolute;
      right: 0.3em;
      top: 0;
      opacity: 0.5;
      font-size: 1.3em;
      z-index: 5; }
    .movie-grid .movie-item.decided.decided-approve {
      outline-color: #0f0; }
      .movie-grid .movie-item.decided.decided-approve .decision-icon::after {
        content: "👍️"; }
    .movie-grid .movie-item.decided.decided-disapprove {
      outline-color: #f00; }
      .movie-grid .movie-item.decided.decided-disapprove .decision-icon::after {
        content: "👎️"; }
    .movie-grid .movie-item.decided.decided-maybe {
      outline-color: #00f; }
      .movie-grid .movie-item.decided.decided-maybe .decision-icon::after {
        content: "🤷️"; }
    .movie-grid .movie-item::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      pointer-events: none;
      background-color: #000;
      transition: opacity 0.25s ease; }
    .movie-grid .movie-item .movie-poster {
      width: 100%;
      display: block;
      transition: opacity 0.5s ease; }
    .movie-grid .movie-item.hovered .overlay {
      opacity: 1; }
    .movie-grid .movie-item .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: stretch;
      background: rgba(0, 0, 0, 0.55);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 10; }
      .movie-grid .movie-item .overlay > a,
      .movie-grid .movie-item .overlay > .decide > * {
        display: flex;
        justify-content: center;
        align-items: center; }
      .movie-grid .movie-item .overlay > a {
        color: white;
        text-decoration: none;
        text-shadow: 1px 1px 1px black;
        text-align: center;
        flex: 1 1 auto; }
      .movie-grid .movie-item .overlay .decide {
        cursor: pointer;
        font-size: 2em;
        display: flex;
        flex-direction: row;
        justify-content: stretch;
        align-items: stretch;
        border-top-style: solid;
        border-right-style: none;
        border-bottom-style: solid;
        border-left-style: none;
        border-color: rgba(255, 255, 255, 0.2);
        border-width: 1px;
        flex: 0 0 20%; }
        .movie-grid .movie-item .overlay .decide > * {
          flex: 1 1 33%; }
  .movie-grid.movie-grid-all .movie-item.decided::after, .movie-grid.movie-grid-pending .movie-item.decided::after {
    opacity: 0.5; }

.form-row {
  margin: 0.6em 0;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  max-width: 25em; }
  .form-row.checkbox {
    margin: 1em 0; }
  .form-row button {
    width: 30%;
    flex: 0 0 auto;
    margin-left: auto; }
  .form-row div {
    flex-basis: 100%;
    font-size: 0.8em;
    font-style: italic;
    margin-left: 6.5rem; }
  .form-row label {
    width: 6rem;
    padding-right: 0.5em;
    text-align: right;
    flex: 0 0 auto;
    box-sizing: border-box; }
  .form-row input, .form-row select {
    flex: 1 1 auto;
    box-sizing: border-box;
    padding: 5px;
    min-width: 0;
    max-width: calc(25em - 6rem);
    border-radius: 4px;
    background-color: #4b5358;
    color: #c5c6c7;
    border: none;
    position: relative;
    height: 2.5em;
    top: -7px; }
    .form-row input[type="checkbox"], .form-row select[type="checkbox"] {
      position: relative;
      top: 0;
      height: auto;
      flex: 0 0 auto;
      padding: 0;
      margin: 0; }
      .form-row input[type="checkbox"] + label, .form-row select[type="checkbox"] + label {
        text-align: left;
        width: auto;
        margin-right: 1em;
        margin-left: 0.25em; }

input, select {
  box-sizing: border-box;
  padding: 5px;
  min-width: 0;
  border-radius: 4px;
  background-color: #4b5358;
  color: #c5c6c7;
  border: none;
  height: 2.5em; }

form {
  margin-bottom: 1em; }

button {
  background-color: #4b5358;
  color: #c5c6c7;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer; }
  button:hover {
    background-color: #66b6fc;
    color: #1b1e23; }
  button.danger {
    background-color: #f00;
    color: white; }
  button:disabled {
    background-color: #2b343d;
    color: #4b5358;
    cursor: default; }
    button:disabled:hover, button:disabled.danger {
      background-color: #2b343d;
      color: #4b5358; }

.profile-message {
  color: #66b6fc;
  margin: 1em 1em 4em; }
  .profile-message button {
    margin-top: 1em; }

ul.release-list li {
  margin: 0.6em 0;
  background-color: #4b5358;
  border-radius: 5px;
  position: relative;
  padding: 0; }
  ul.release-list li a {
    padding: 0.6em;
    display: block;
    color: #c5c6c7;
    text-decoration: none; }
  ul.release-list li.maybe {
    background-color: #34393c; }
    ul.release-list li.maybe a {
      color: #abadae; }

#calendar {
  max-width: 1500px; }

.calendar-type {
  margin-top: 1em; }

.calendar-url {
  font-family: monospace;
  padding: 1em;
  border: 1px solid #c5c6c7;
  background: #2b343d;
  margin: 0.5em 0;
  display: inline-block; }

.calendar-copy-button {
  display: block; }

.post-button {
  margin-top: 1em; }

#tmdb-logo {
  height: 1em; }

.danger-zone {
  margin-top: 7em;
  border: 1px solid red;
  padding: 1em 4em;
  background-color: #ff000014;
  display: inline-block;
  color: white;
  text-transform: uppercase; }

.movie-details {
  max-width: 1200px; }
  .movie-details .poster {
    float: right;
    margin: 0 0 2em 2em;
    max-width: 100%; }
  .movie-details .plot {
    max-width: 30em; }

.movie-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

.filter-group {
  display: flex;
  align-items: center; }

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin-right: 15px; }

.checkbox-container input[type="checkbox"] {
  margin-right: 5px; }

.checkbox-label {
  font-size: 14px; }

@media (max-width: 768px) {
  .movie-filters {
    flex-direction: column;
    align-items: flex-start; }
  #name-filter {
    width: 100%; } }