html {
  height: 100%;
}

body {
  margin: 10px;
  padding-bottom: 13px;
  font-family: Arial, Helvetica, sans-serif;
  background: #131313;
  color: #eeebff;
}

h1,
p {
  margin: 0;
}

p {
  margin-top: 10px;
  font-size: 0.875rem;
}

a,
.fake-link {
  cursor: pointer;
  text-decoration: underline;
  color: #8a8a8a;
}

code {
  background-color: #ebebeb;
  padding: 0 5px 0 5px;
  border-radius: 10px;
}

.fake-link {
  background: none !important;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.container {
  margin-top: 10px;
  background-color: #202020;
  padding: 10px;
}

.center-text,
.filter {
  text-align: center;
}

.motd {
  background-color: #5a0043;
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
  padding: 10px;
}

.motd:empty {
  display: none;
}

#twitch-embed-wrapper,
#twitch-embed,
#twitch-embed > iframe {
  /* to prevent layout shift */
  min-height: max(70vh, 500px);
}

.minimal #content-container,
.wide #content-container {
  height: 100%;
}

.minimal #twitch-embed-wrapper,
.wide #twitch-embed-wrapper {
  height: calc(100% - 40px);
}

.dual-column #content-container {
  display: flex;
  align-items: start;
}

.dual-column #twitch-embed-wrapper {
  flex: 1.3 1 0px;
  position: sticky;
  top: 0;
}

.dual-column #thumbnail-wrapper {
  flex: 1 1 0px;
}

.dual-column .thumbnail-container {
  display: grid;
  grid-template-columns: 50% 50%;
}

@media only screen and (min-width: 600px) {
  h1 {
    font-size: 2.7rem;
  }

  .grid-container {
    min-height: 20px;
    display: grid;
    grid-template-columns: 80% 20%;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas: "left-pane right-pane";
  }

  .even-grid-container {
    min-height: 20px;
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas: "even-left-pane even-right-pane";
  }

  .options-spacer {
    margin-top: 20px;
  }
}

.left-pane {
  grid-area: left-pane;
  font-style: italic;
}

.even-left-pane {
  grid-area: even-left-pane;
  font-style: italic;
  align-self: center;
  text-align: center;
}

.right-pane {
  grid-area: right-pane;
  align-self: center;
  text-align: center;
}

.even-right-pane {
  font-style: italic;
  grid-area: even-right-pane;
  align-self: center;
  text-align: center;
}

.cookie-check {
  margin-top: 7px;
  font-style: italic;
  text-align: right;
}

.stream_duration_container {
  text-align: left;
}

.thumbnail-container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

.thumbnail-placeholder {
  color: rgba(128, 128, 128, 0.3);
}

@media only screen and (max-width: 599px) {
  .thumbnail-container {
    display: grid;
    grid-template-columns: 50% 50%;
  }

  #new-streamer-button {
    margin-top: 10px;
  }

  h1 {
    font-size: 1.5rem;
  }

  .cookie-check {
    text-align: center;
    display: inline-block;
  }

  .stream_duration_container {
    text-align: center;
  }

  input {
    font-size: 1rem;
  }
}

@media only screen and (min-width: 721px) {
  .motd-mobile {
    display: none;
  }
}

#new-streamer-button {
  background-color: #008a07;
  border: none;
  color: white;
  padding: 10px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#new-streamer-button:disabled,
#new-streamer-button[disabled] {
  background-color: #6d6d6d;
  cursor: default;
}

.thumbnail-update-container {
  height: 30px;
}

.loading-throbber {
  width: 17px;
  height: 17px;
  filter: brightness(0.5);
  position: relative;
  top: 4px;
}

.search-input {
  width: 100%;
  font-weight: bold;
}

.options-columns {
  display: grid;
  grid-gap: 5px;
  align-items: center;
}

.field-description {
  font-style: italic;
  font-size: 0.8rem;
  display: block;
}

.field-config {
  font-size: 0.875rem;
}

.grid-right {
  grid-column: 2;
}

.grid-span {
  grid-column: 1 / span 2;
}

.grid-right > input {
  margin-left: 0;
}

.thumbnail-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  margin: 10px;
  overflow: hidden;
  cursor: pointer;
  width: 90%;
  aspect-ratio: auto 440 / 248;
  justify-self: center;
}

#footer {
  text-align: center;
  margin-top: 13px;
}

.invisible {
  /* throbber animation should run in background, so set to invisible instead of display: none */
  visibility: hidden;
}

.hidden {
  display: none;
}

.nobreak {
  white-space: nowrap;
}

@media only screen and (min-width: 1200px) {
  /* default mode (skinny) */
  #page-container {
    max-width: 70vw;
    margin: auto;
  }

  #twitch-embed-wrapper,
  #twitch-embed,
  #twitch-embed > iframe {
    /* to prevent layout shift */
    min-height: 60vh;
  }

  /* wide and min mode should take up more room -- 80vh is decent until the screen gets weirdly short*/
  .wide #page-container,
  .minimal #page-container {
    max-width: none;
  }

  .wide #twitch-embed > iframe,
  .minimal #twitch-embed > iframe {
    min-height: 80vh;
  }
}

.thumbnail-item:hover {
  filter: brightness(1.25);
}

#new-streamer-button:enabled:hover {
  filter: brightness(1.1);
}

.filter {
  padding-top: 15px;
  padding-bottom: 5px;
}

.filter:hover {
  filter: brightness(1.1);
}

.filter-active {
  color: #ff9e9e;
}

.minimal #page-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.new-thumbnails {
  line-height: 30px;
}

body.minimal {
  height: calc(100% - 12px - 12px); /* Don't forget top and bottom! */
}

.minimal .hide-on-minimal {
  display: none;
}

.minimal .dim-on-minimal {
  filter: brightness(0.2);
}

.minimal #twitch-embed,
.minimal #twitch-embed > iframe {
  height: 100%;
}

.minimal #twitch-embed-wrapper {
  flex-grow: 1;
}

/* background by SVGBackgrounds.com */
.background-textured {
  background-color: #0c000c !important;
  background-image: url("/static/bg.svg") !important;
}

.background-textured .container {
  background: #20202070;
}

/* From https://gist.github.com/ghosh/4f94cf497d7090359a5c9f81caf60699 via https://micromodal.vercel.app/*/

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__container {
  background-color: #fff;
  padding: 30px;
  max-width: 500px;
  max-width: min(100vw, 500px);
  min-width: min(500px, 100vw);
  max-height: 100vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box;
}

.modal__close {
  background: transparent;
  border: 0;
  cursor: pointer;
}

.modal__header .modal__close:before {
  content: "\2715";
}

.modal__content {
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
}

.modal__btn {
  width: 100%;
  font-size: 0.875rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  border-radius: 0.25rem;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  line-height: 1.15;
  margin: 0;
  will-change: transform;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.modal__btn-primary {
  background-color: #00449e;
  color: #fff;
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}