body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding-bottom: 60px;
  box-sizing: border-box;
  background-color: #1b1e2a;
  color: white;
  font-family: Verdana, sans serif;
  font-size: 18px; }

.hidden {
  display: none !important; }

a {
  color: #a1a7b3; }

input {
  font-size: 18px; }
  input[type="text"], input[type="password"], input[type="email"] {
    padding: 9px 12px;
    border: none;
    border-radius: 10px;
    background-color: #585d6f;
    color: white; }
    input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
      outline: #a1a7b3 1px solid; }
  input::placeholder {
    color: #a1a7b3; }

button, input[type="submit"], .button {
  padding: 6px 10px;
  border: none;
  border-radius: 10px;
  background-color: #585d6f;
  color: white;
  text-decoration: none; }
  button:focus, input[type="submit"]:focus, .button:focus {
    outline: #a1a7b3 2px solid; }
  button:hover, input[type="submit"]:hover, .button:hover {
    cursor: pointer; }
  button.primary, input[type="submit"].primary, .button.primary {
    background-color: #83ddd2;
    color: black;
    font-weight: bold; }
    button.primary:hover, input[type="submit"].primary:hover, .button.primary:hover {
      background-color: #aee6de; }

.loading {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: white 6px solid;
  margin: 5px;
  rotate: 45deg;
  animation: loading 1s infinite linear; }

@keyframes loading {
  0% {
    border-top-color: white;
    border-right-color: rgba(255, 255, 255, 0);
    border-bottom-color: rgba(255, 255, 255, 0);
    border-left-color: rgba(255, 255, 255, 0); }
  25% {
    border-top-color: rgba(255, 255, 255, 0);
    border-right-color: white;
    border-bottom-color: rgba(255, 255, 255, 0);
    border-left-color: rgba(255, 255, 255, 0); }
  50% {
    border-top-color: rgba(255, 255, 255, 0);
    border-right-color: rgba(255, 255, 255, 0);
    border-bottom-color: white;
    border-left-color: rgba(255, 255, 255, 0); }
  75% {
    border-top-color: rgba(255, 255, 255, 0);
    border-right-color: rgba(255, 255, 255, 0);
    border-bottom-color: rgba(255, 255, 255, 0);
    border-left-color: white; }
  100% {
    border-top-color: white;
    border-right-color: rgba(255, 255, 255, 0);
    border-bottom-color: rgba(255, 255, 255, 0);
    border-left-color: rgba(255, 255, 255, 0); } }

.box, .tv-title, #form-page {
  padding: 16px;
  border-radius: 20px;
  background-color: #303342;
  box-shadow: 6px 16px 32px 0 rgba(0, 0, 0, 0.6); }

#form-page {
  width: 320px;
  max-width: 75vw;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 26vh;
  gap: 14px; }
  #form-page > .msg-box {
    margin-bottom: 20px; }
  #form-page > .buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 6px;
    gap: 10px; }
    #form-page > .buttons > .loading {
      width: 12px;
      height: 12px;
      border-width: 4px;
      margin-right: auto; }

.msg-box {
  padding: 12px;
  border-radius: 10px;
  color: black; }
  .msg-box.error {
    background-color: #964f58; }
  .msg-box.info {
    background-color: #b1ceac; }

#forgot-password {
  align-self: flex-end;
  font-size: 13px;
  margin-top: 13px;
  margin-right: 4px; }

.rating > div {
  border-radius: 100%;
  background: center no-repeat;
  background-size: contain; }
  .rating > div.bad {
    background-image: url(/static/img/rating/bad.svg); }
  .rating > div.neutral {
    background-image: url(/static/img/rating/neutral.svg); }
  .rating > div.good {
    background-image: url(/static/img/rating/good.svg); }
  .rating > div.better {
    background-image: url(/static/img/rating/better.svg); }
  .rating > div:hover {
    cursor: pointer; }
  .rating > div.selected {
    background-color: black !important;
    filter: invert(1); }

#head-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #1b1e2a;
  box-shadow: 0 30px 30px #1b1e2a;
  z-index: 2; }
  #head-bar > .box, #head-bar > .tv-title, #head-bar > #form-page {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    gap: 36px; }
  #head-bar .suggestions {
    font-weight: bold;
    padding: 8px 12px;
    margin-right: -12px;
    border-radius: 10px; }
    #head-bar .suggestions.selected {
      background-color: white;
      color: black; }
    #head-bar .suggestions:hover {
      cursor: pointer; }
  #head-bar .rating {
    display: flex;
    flex-direction: row;
    align-items: center; }
    #head-bar .rating > div {
      width: 36px;
      height: 36px; }
  #head-bar .search {
    display: flex;
    flex-direction: row;
    align-items: stretch; }
    #head-bar .search > input[type="text"] {
      width: 260px;
      padding-right: 20px; }
    #head-bar .search > input[type="submit"] {
      width: 48px;
      margin-left: -15px;
      background: #585d6f url(/static/img/loupe.svg) center no-repeat;
      background-size: contain; }
      #head-bar .search > input[type="submit"].selected {
        background-color: black;
        filter: invert(1); }

#logout {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: url(/static/img/logout.svg) center no-repeat;
  background-size: contain;
  border-radius: 100%;
  z-index: 2; }
  #logout:hover {
    background-color: #303342; }

body > .loading {
  position: absolute;
  top: 300px;
  left: 50%;
  translate: -50% 0; }

.no-results {
  color: #a1a7b3; }

#content {
  width: calc(100% - 80px);
  min-height: 200px;
  margin-top: 160px;
  margin-bottom: 80px;
  background-color: #1b1e2a;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px; }

.tv-title {
  position: relative;
  width: 280px;
  height: 420px;
  padding: 0;
  background: #303342 center no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s; }
  .tv-title > .name {
    position: relative;
    margin: 0 20px;
    font-weight: bold;
    font-size: 30px;
    text-align: center; }
  .tv-title > .year {
    position: relative;
    font-size: 22px;
    margin-top: 12px;
    margin-bottom: 24px; }
  .tv-title > .type {
    position: absolute;
    left: 20px;
    top: 20px;
    font-size: 18px;
    color: #a1a7b3; }
  .tv-title > .rating {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    background-color: #303342;
    transition: all 0.2s; }
    .tv-title > .rating > div {
      width: 40px;
      height: 40px;
      margin-top: 20px;
      background-color: #585d6f;
      transition: all 0.2s;
      box-shadow: 0 0 0 rgba(0, 0, 0, 0.8); }
      .tv-title > .rating > div:not(.selected):hover {
        translate: 0 -5px;
        box-shadow: 2px 5px 8px rgba(0, 0, 0, 0.3); }
  .tv-title:hover {
    transform: scale(1.2);
    z-index: 1; }
    .tv-title:hover > .rating {
      height: 80px; }

#content.in {
  animation: content-in forwards 0.4s; }

@keyframes content-in {
  from {
    translate: 100vw 0; }
  to {
    translate: 0vw 0; } }

#content.out {
  animation: content-out forwards 0.4s; }

@keyframes content-out {
  from {
    translate: 0vw 0; }
  to {
    translate: -100vw 0; } }

#msg-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px;
  margin-top: 20vh; }
  #msg-page > h1 {
    margin-top: 0; }
  #msg-page > .button {
    align-self: flex-end;
    margin-top: 40px; }

#footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background-color: #303342;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; }
  #footer > a {
    color: #a1a7b3;
    font-size: 13px;
    text-decoration: none;
    margin: 0 20px; }

@media (max-width: 900px) {
  #head-bar > .box, #head-bar > #form-page, #head-bar > .tv-title {
    align-self: flex-start;
    border-bottom-left-radius: 0; }
    #head-bar > .box > .search > input[type="text"], #head-bar > #form-page > .search > input[type="text"], #head-bar > .tv-title > .search > input[type="text"] {
      width: 186px; } }

@media (max-width: 750px) {
  #head-bar > .box, #head-bar > #form-page, #head-bar > .tv-title {
    align-self: flex-start;
    border-bottom-left-radius: 0;
    display: grid;
    grid-template-areas: "suggestions rating" "search search"; }
    #head-bar > .box > .suggestions, #head-bar > #form-page > .suggestions, #head-bar > .tv-title > .suggestions {
      grid-area: suggestions; }
    #head-bar > .box > .rating, #head-bar > #form-page > .rating, #head-bar > .tv-title > .rating {
      grid-area: rating; }
    #head-bar > .box > .search, #head-bar > #form-page > .search, #head-bar > .tv-title > .search {
      grid-area: search;
      width: 100%; }
      #head-bar > .box > .search > input[type="text"], #head-bar > #form-page > .search > input[type="text"], #head-bar > .tv-title > .search > input[type="text"] {
        width: auto;
        min-width: 0;
        flex: 1 1; }
  #content {
    margin-top: 240px; } }