body {
  font-family: 'Roboto', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: white;
  background-color: #131520;
}

nav {
  background-color: #31343E;
  /* display: flex;
  justify-content: flex-end; */
  overflow: hidden;
  padding: 20px;
  color: white;
}

h1 {
  color: #2fcad8;
}

input {
  padding: 7px;
}

button {
  padding: 7px;
}

.search-field {
  height: 42px;
  width: 200px;
}

.search-icon {
  width: 32px;
  height: 32px;
}

.search-bar {
  display: flex;
  justify-content: center;
}

/* #playing-title {
  color: white;
} */

.video-player {
  width: 40%;
  height: auto;
}

@media only screen and (max-width: 600px) and (orientation: portrait) {
  .video-player {
    width: 90%;
    height: auto;
  }
}


.movie-gallery-container {
  display: flex;
  justify-content: space-evenly;
  margin-top: 30px;
  margin-bottom: 30px;
}

.movie-gallery-container * {
  width: 20vw;
}

.genres-container {
  display: flex;
  justify-content: center;
}

.genres-container a {
  padding: 10px;
}

.movie-cover-slider {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
  overflow: hidden;
}

.movie-cover-slider-wrapper {
  display: flex;
  width: 100%;
  animation-name: slide-left;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 20s;  /* Set dynamically from code */
  /* Formula - Divider is number of unique images */
  /* animation-duration: calc(20s * (4 / 4)); */
}

.movie-cover {
  min-width: 20%;
  border-radius: 3px;
  margin-right: 4%;
  background-color: #1b1e2c;
}

.movie-cover img {
  width: 100%;
  border-radius: 3px;
  display: block;
  opacity: 0;
  animation: fade-in 2s ease-out forwards;
  animation-delay: 0.5s;
}

@keyframes slide-left {
  from {
    transform: translateX(4%);  /* Use this constant in jinja template */
  }
  to {
    transform: translateX(-92%);  /* Set dynamically from code */
    /* Formula - Number of movies and n-1 */
    /* transform: translateX(calc((-20% * 4) - (4% * 3))); */
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* #company-title {
  font-size: ;
} */

.genre-movie {
  margin-left: 2%;
  margin-right: 2%;
}

.genre-movie img {
  width: 20%;
  border-radius: 3px;
}

.padding {
  padding: 10px;
}

/* Unvisited link */
a:link {
  color: rgb(144, 183, 186);
}

/* Visited link */
a:visited {
  color: rgb(47, 202, 216);
}

/* Mouse over link */
a:hover {
  color: rgb(93, 173, 213);
}

/* Selected link */
a:active {
  color: rgb(224, 143, 213);
}