/* APPLIED TO ALL PAGES */
html {
  scroll-behavior: smooth;
}

body {
  margin: var(--margin-zero);
  padding: 0;
}

.main-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 70px;

  overflow: hidden;
  background-color: var(--color-main-background);
}

#logo {
  margin-left: 20px;
  width: auto;
  height: 70px;
}

.main-nav-bar a {
  display: flex;
  align-items: center;
  padding: 0 16px;
  line-height: 70px;
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  height: 100%;
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
}

.main-nav-bar a:hover {
  background-color: var(--color-sub-background);
  color: var(--color-white);
}

.main-nav-bar .search-bar {
  display: flex;
  align-items: center;
}

.main-nav-bar input[type="text"] {
  padding: 8px 10px;
  font-size: 17px;
  border: none;
  border-radius: 4px;
}

.main-nav-bar .search-bar button {
  padding: 8px 10px;
  background-color: var(--color-sub-background);
  font-size: 17px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.main-nav-bar .search-bar button:hover {
  background-color: var(--color-white);
  color: var(--color-sub-background);
  border-radius: 4px;
}

.popular-movies-out-now {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.background-slide {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: opacity 1.5s ease-in-out;
}

.background-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-main-background);
}

.footer p {
  color: var(--color-white);
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
}

/* HOME */
.home-page {
  margin: var(--margin-for-body);
  padding: var(--padding-insider);
}

.theaters-near-you h2,
.movies-out-now h2,
.coming-soon h2,
.goat h2 {
  margin-bottom: 5px;
  color: var(--color-main-background);
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--h2-font-size);
}

.theaters-near-you h3,
.movies-out-now h3,
.goat h3 {
  margin-top: 5px;
  color: var(--color-sub-background);
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--h3-font-size);
}

.theaters-near-you-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.theaters-near-you-list-item {
  padding: var(--padding-insider);
  width: 500px;
  height: auto;
  border: 3px solid var(--color-main-background);
}

.theaters-near-you-list-item a {
  text-decoration: none;
  color: var(--color-sub-background);
  font-family: var(--sub-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--p-font-size);
}

.horizontal-slider-gallery-wrap {
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.horizontal-slider-gallery-wrap button {
  border-radius: 30px;
}

.horizontal-slider-gallery {
  display: flex;
  flex-wrap: nowrap;
  width: var(--width-horizontal-slider-container);
  overflow-x: auto;
  scroll-behavior: smooth;
}

.horizontal-slider-gallery div {
  display: flex;
  gap: 1rem;
}

.horizontal-slider-gallery div span {
  flex: 0 0 auto;
}

.horizontal-slider-gallery div img {
  width: var(--width-slider-imgs);
  height: var(--height-slider-imgs);
  object-fit: cover;
}

.horizontal-slider-gallery::-webkit-scrollbar {
  display: none;
}

.arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: var(--color-sub-background);
  color: var(--color-white);
  font-size: var(--h3-font-size);
  border: none;
  cursor: pointer;
}

.arrow:hover {
  background-color: var(--color-white);
  color: var(--color-sub-background);
}

.left-arrow {
  display: none;
  position: absolute;
  left: 0px;
}

.right-arrow {
  position: absolute;
  right: 0px;
}

/* MOVIES OUT NOW , MOVIE LIBRARY, SOUNDTRACK LIBRARY, ARTIFACTS LIBRARY */
.out-now-grid,
.movie-library-grid,
.soundtrack-library-grid,
.artifact-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 250px);
  gap: 2rem;
  padding: var(--padding-body);
  justify-content: center;
}

.out-now-grid-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 450px;
  background-color: var(--color-main-background);
}

.out-now-grid-item-img img,
.movie-library-grid-item-img img,
.soundtrack-library-grid-item-img img,
.artifact-library-grid-item-img img {
  width: 200px;
  height: 191px;
}

.out-now-grid-item-text p,
.movie-library-grid-item-text p,
.soundtrack-library-grid-item-text p,
.artifact-library-grid-item-text p {
  color: var(--color-white);
  font-family: var(--sub-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--h3-font-size);
}

.squares {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 1rem;
  padding-bottom: 15px;
}

.square {
  width: 20px;
  height: 20px;
  background-color: var(--color-white);
}

.buttons button,
.movie-library-grid-item button,
.soundtrack-library-grid-item-text button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-sub-background);
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  width: 200px;
  height: 30px;
  font-family: var(--sub-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--p-font-size);
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.buttons button:hover,
.movie-library-grid-item button:hover,
.soundtrack-library-grid-item-text button:hover {
  background-color: var(--color-white);
  color: var(--color-sub-background);
  text-decoration: underline;
  transform: scale(1.03);
}

/* MOVIES OUT NOW */
.buttons {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
/* MOVIES OUT NOW ITEM TEMPLATE */
.movie-bio-background {
  background-color: var(--color-main-background);
  margin: var(--margin-for-body);
  padding: var(--padding-insider);
}

.movie-bio-background h1 {
  color: var(--color-white);
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--h1-font-size);
}

.movie-bio-background h2,
.theater-item h2 {
  color: var(--color-white);
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--h2-font-size);
}

.theater-item {
  margin-top: 25px;
  padding: var(--padding-insider);
  width: auto;
  height: auto;
  border: 1px solid var(--color-white);
}

.theater-item h3 {
  color: var(--color-white);
  font-family: var(--main-alternative-font-family);
  font-weight: var(--main-alternative-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--h3-font-size);
}

.showing-times {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.showing-times button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-sub-background);
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  width: 100px;
  height: 30px;
  font-family: var(--sub-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--p-font-size);
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.showing-times button:hover {
  background-color: var(--color-white);
  color: var(--color-sub-background);
  text-decoration: underline;
  transform: scale(1.03);
}

/* MOVIE LIBRARY */
.sub-nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-body);
  background-color: var(--color-main-background);
}

.sub-nav-bar-content {
  width: 100%;
}

.sub-nav-bar p {
  text-align: left;
  color: var(--color-white);
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--h3-font-size);
}

.sub-nav-bar-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 1.25rem;
  width: 100%;
  justify-items: center;
}

.sub-nav-bar-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background-color: var(--color-sub-background);
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  width: 145px;
  height: 45px;
  font-size: 17px;
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
}

.sub-nav-bar-links a:hover {
  background-color: var(--color-white);
  color: var(--color-sub-background);
}

.movie-library-grid-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 400px;
  background-color: var(--color-main-background);
}
/* MOVIE LIBRARY ITEM TEMPLATE */
.movie-bio-background img {
  width: 1000px;
  height: auto;
}

.movie-bio-text {
  margin-top: 25px;
}

.movie-bio-text p {
  color: var(--color-white);
  font-family: var(--main-alternative-font-family);
  font-weight: var(--main-alternative-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--p-font-size);
}

/* THEATERS */
.theaters-list-background {
  background-color: var(--color-main-background);
  margin: var(--margin-for-body);
  padding: var(--padding-insider);
}

.theater-list-item {
  margin-top: 25px;
  padding: var(--padding-insider);
  width: auto;
  height: auto;
  border: 1px solid var(--color-white);
}

.theater-list-item h2 {
  color: var(--color-white);
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--h2-font-size);
}

.theater-list-item h3 {
  color: var(--color-white);
  font-family: var(--main-alternative-font-family);
  font-weight: var(--main-alternative-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--h3-font-size);
}

.theaters-gallery {
  display: flex;
  justify-content: start;
  gap: 1rem;
  width: auto;
  height: auto;
}

.theaters-gallery img {
  width: var(--width-theater-imgs);
  height: var(--height-theater-imgs);
  object-fit: cover;
}
/* THEATERS ITEM TEMPLATE */

/* MUSIC LIBRARY */
.soundtrack-library-grid-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 475px;
  background-color: var(--color-main-background);
}

.soundtrack-library-grid-item-text {
  width: 200px;
}

#runtime {
  color: var(--color-white);
  font-family: var(--sub-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--p-font-size-smaller);
}
/* MUSIC LIBRARY ITEM TEMPLATE */
.playlist-bio {
  margin: var(--margin-for-body);
}

.playlist-heading {
  background-color: var(--color-main-background);
  padding: var(--padding-insider);
}

.playlist-heading h1 {
  color: var(--color-white);
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--h1-font-size);
}

.playlist-heading h2,
.playlist-text h2 {
  color: var(--color-white);
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--h2-font-size);
}

.playlist {
  margin-top: var(--margin-for-body);
}

.playlist-item {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin-top: 25px;
}

.playlist-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-text {
  flex: 1;
  position: relative;
  background-color: var(--color-main-background);
  padding: var(--padding-insider);
}

.playlist-text h3 {
  color: var(--color-white);
  font-family: var(--main-alternative-font-family);
  font-weight: var(--main-alternative-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--h3-font-size);
}

.playlist-text p {
  color: var(--color-white);
  font-family: var(--main-alternative-font-family);
  font-weight: var(--main-alternative-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--p-font-size);
}

.svg.icon {
  display: inline;
  width: 2em;
  height: 2em;
  vertical-align: top;
  fill: var(--color-white);
}

.playlist-text .icon {
  position: absolute;
  width: 110px;
  height: 110px;
  bottom: 10px;
  right: 10px;
}

/* ARTIFACT LIBRARY */
.artifact-library-grid-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 575px;
  background-color: var(--color-main-background);
}

.artifact-library-grid-item-text {
  width: 200px;
}

#artifact-description {
  color: var(--color-white);
  font-family: var(--sub-font-family);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-type);
  font-size: var(--p-font-size-smaller);
}

/* FAMOUS FILM LOCATION */