/* Basic Reset */
.poppins-thin {
  font-family: "Poppins", serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", serif;
  font-weight: 900;
  font-style: italic;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

p,li{
  color: var(--white);
}

.aboutsection {
  background-color: var(--black-variant);
  padding: 16px;
  margin-top: 2vw;
  border-radius: 10px;
  margin: 20px;
}

li{
  margin-left: 5px;
}

.card-wrapper{
  justify-content: flex-start;
}


:root {
  --goldenrod-yellow: #d1b400ff;
  --lemon-yellow: #e1c700;
  --amber-yellow: #d8a700ff;
  --white: #ffffff;
  --whitetrans: #ffffffd8;
  --black: #000000;
  --black-variant: #1c1c1c;

  --heading-font: "Outfit", serif;
  --paragraph-font: "Poppins", sans-serif;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: var(--black);
  color: #333;
}

main {
  margin: auto;
}

.image-container {
  position: relative;
  width: auto;
  height: 60vw;
  overflow: hidden;
}

.image-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.image-container img.swipe-left {
  transform: translateX(-100%);
  opacity: 0;
}

/* Gradient overlay using a div */
.gradient-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Adjust as needed */
  background-image: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
  
}

.section {
  padding: 16px;
  margin-top: 2vw;
}

.aboutsection h2{
  margin-bottom: 20px ;
}

.aboutsection span{
  font-weight: bold;
}

.aboutsection li{
  margin-top: 10px;
}

.card-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  justify-content: space-between;
}

.aboutcard-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  justify-content: center;
}

.card {
  border: 1px solid var(--black-variant);
  padding: 5px;
  background-color: var(--black-variant);
  width: calc(25% - 20px); /* Four cards per row */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  text-align: center;
  height: auto;
}

.card a{
  text-decoration: none;
}

.card img {
  max-width: 100%;
  width: auto;
  margin-bottom: 8px;
  height: auto;
}

.aboutcard img {
  max-width: 300px;
  width: auto;
  margin-bottom: 8px;
  height: auto;
  
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.card h3 {
  margin: 0 0 8px;
  color: var(--amber-yellow);
}

.aboutcard h3 {
  margin: 0 0 8px;
  color: var(--amber-yellow);
  text-align: center;
}

.card p {
  color: var(--white);
}

.aboutcard p {
  color: var(--white);
  text-align: center;
}

input[type="text"] {
  padding: 10px;
  padding-right: 40px;
}


.beforefooter {
  background-color: var(--black-variant);
  width: 100vw;
  text-align: center;
  margin-top: 3vw;
  padding-bottom: 3vw;
}

.beforefooter h2 {
  font-size: 2rem;
  margin-bottom: 4vw;
  margin-top: 3vw;
  padding-top: 30px;
}

.beforefooter p {
  color: var(--white);
  font-size: 1rem;
  text-align: center;
  margin: 10px;
}

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  transition: opacity 0.5s ease-in-out;
  transform: translateY(-20px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.hidden {
  display: none;
}

.form.visible {
  display: block; /* Show the form when it has the 'visible' class */
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 
  opacity: 1;/* Add shadow when visible */
}


.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 80vw;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
  max-width: 600px;
}

input[type="submit"] {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: var(--lemon-yellow);
  width: 80vw;
  border: 0;
  padding: 15px;
  color: var(--black);
  font-size: 14px;
}
input[type="submit"]:hover,
input[type="submit"]:active,
.form button:focus {
  background: var(--amber-yellow);
}


.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}

.stars-filled{
  color: #e1c700;
  background-color: white;
}

#showFormButton {
  text-transform: uppercase;
  outline: 0;
  background: var(--lemon-yellow);

  border: 0;
  padding: 15px;
  color: var(--black);
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

#showFormButton:hover {
  background-color: var(--amber-yellow); /* Change background on hover */
}

#showFormButton:focus {
  transform: scale(1.1); /* Small focus animation for the button */
}

#showFormButton p:hover {
  background-color: var(--amber-yellow);
   /* Change background on hover */
}
.form .message a {
  color: var(--amber-yellow);
  text-decoration: none;
}
.form .register-form {
  display: none;
}
.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before,
.container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #ef3b3a;
}

input[type="submit"]:hover {
  background-color: var(--amber-yellow);
}

.details img {
  width: 80%;
  height: 100%;
  margin-top: 20px;
  
}

.details {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  background-color: #000; /* Optional: background color for the video container */
  margin-bottom: 20px;
  border: 1px solid var(--amber-yellow);
}

#movieVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}


.stars {
  display: inline-block;
  position: relative;
  width: 100px; /* Adjust width as needed */
  height: 20px;
  background: url('images/mdi--star-outline.svg') repeat-x; /* Use your star outline image */
  background-size: contain;
}


#itemTitle{
  color: var(--lemon-yellow);
  margin-bottom: 10px;
}

.summary{
  margin-top: 20px;
  text-align: justify;
  
}

 #itemDescription{
  font-style: italic;
}

.griding{
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  justify-content: center;
  align-items: center;
}

#itemImage{
  grid-column: 1;
}

#itemYear,#itemRating{
  font-weight: bold;
  grid-column: 2;
}
#itemRating{
  font-weight: bold;
  grid-column: 3;
  color: var(--goldenrod-yellow);
}



footer {
  grid-template-rows: 1fr 1fr 1fr;
  justify-content: space-evenly;

  align-items: center;
  text-align: center;
  margin-top: 60px;
  border-top: 1px solid var(--lemon-yellow);
  padding: 25px;
  font-size: 0.9em;
  background-color: var(--black-variant);
  color: var(--white);
}

footer p {
  margin: 0;
  padding: 0;
}

footer a {
  color: var(--lemon-yellow);
  text-decoration: none;
}

@media (max-width: 793px) {
  .navigation {
    display: none; /* Hide navigation by default */
    flex-direction: column;
    padding: 3vw; /* Stack items vertically */
    background-color: var(--black); /* Background color for the menu */
    position: absolute; /* Position it absolutely */
    /* Adjust based on your layout */
    right: 0; /* Align to the right */
    width: 300px; /* Set a width for the menu */
    z-index: 1000; /* Ensure it appears above other content */
  }

  .section {
    padding: 16px;
    padding-right: 0px;
    margin-top: 2vw;
  }

  .card-wrapper {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping for smooth horizontal scrolling */
    overflow-x: auto; /* Enable horizontal scrolling */
    scroll-snap-type: x mandatory; /* Snap to individual cards */
    gap: 16px; /* Space between cards */
    padding: 10px;
    -webkit-overflow-scrolling: touch;/* Smooth scrolling for iOS */
  }

  .aboutcard-wrapper {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping for smooth horizontal scrolling */
    overflow-x: auto; /* Enable horizontal scrolling */
    scroll-snap-type: x mandatory; /* Snap to individual cards */
    gap: 16px; /* Space between cards */
    padding: 10px;
    -webkit-overflow-scrolling: touch;
    justify-content: center;/* Smooth scrolling for iOS */
  }

  .card-wrapper::-webkit-scrollbar {
    display: none; /* Hide scrollbar for better aesthetics */
  }

  .card {
    flex: 0 0 calc(50% - 16px); /* Two cards per view */
    scroll-snap-align: start; /* Align each card when scrolling */
    background-color: var(--black-variant);

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
  }

  .aboutcard {
    flex: 0 0 calc(50% - 16px); /* Two cards per view */
    scroll-snap-align: start; /* Align each card when scrolling */
    background-color: var(--black-variant);

    transition: transform 0.2s ease-in-out;
  
  }

  .card:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
  }

  .card h3 {
    margin: 0 0 8px;
    color: var(--amber-yellow);
  }

  .aboutcard h3 {
    margin: 0 0 8px;
    color: var(--amber-yellow);
  }

  .card p {
    color: var(--white);
  }

  .aboutcard p {
    color: var(--white);
  }

  .navigation.open {
    display: flex; /* Show the navigation when open */
  }

  .navigation a {
    color: white; /* Link color */
    padding: 10px; /* Padding for links */
    font-weight: bold;
    text-decoration: none; /* Remove underline */
    transition: background 0.3s; /* Smooth background transition */
  }

  .navigation a:hover {
    background-color: #555; /* Change background on hover */
  }

  /* Hamburger button styles */
  #menu {
    background: none; /* No background */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor */
    position: relative;
    top: 40px; 
    display: flex;
    float: right;
    right: 40px;
    /* Position relative for the icon */
  }

  .hamburger-icon {
    display: block;
    width: 60px; /* Width of the hamburger icon */
    height: 6px; /* Height of the hamburger lines */
    background-color: var(--white); /* Color of the hamburger lines */
    position: relative;
    z-index: 1; /* Position relative for stacking */
  }

  /* Create three lines for the hamburger icon */
  .hamburger-icon::before,
  .hamburger-icon::after {
    content: "";
    /* Create pseudo-elements */
    width: 60px; /* Same width as the main line */
    height: 6px; /* Same height as the main line */
    background-color: white; /* Color of the lines */
    position: absolute; /* Position absolute for stacking */
    left: 0; /* Align to the left */
    transition: all 0.3s;
    /* Smooth transition */
  }

  .hamburger-icon::before {
    top: -10px; /* Position above the main line */
  }

  .hamburger-icon::after {
    top: 10px; /* Position below the main line */
  }

  /* Change the hamburger icon to an 'X' when open */
  #menu.open .hamburger-icon {
    background-color: transparent; /* Hide the main line */
  }

  #menu.open .hamburger-icon::before {
    transform: rotate(45deg); /* Rotate the top line */
    top: 0; /* Align to the center */
  }

  #menu.open .hamburger-icon::after {
    transform: rotate(-45deg); /* Rotate the bottom line */
    top: 0; /* Align to the center */
  }

  .search-container {
    display: flex;
    align-items: center;
    border-radius: 25px;
    background-color: white;
    width: 100%; /* Adjust width as needed */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 2vw;
  }

  .search-container input {
    border: none;
    flex: 1;
    border-radius: 25px 0 0 25px;
    font-size: 1.8vw;
    outline: none;
  }

  .search-container button {
    background-color: var(--lemon-yellow); /* Auburn */
    border: none;
    padding: 10px 15px;
    border-radius: 0 25px 25px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-container button img {
    font-size: large;
    width: 2vw;
    height: 4vw;
  }

  .search-container button:hover {
    background-color: var(--amber-yellow); /* Falu Red */
  }

  input::placeholder{
    font-size: 20px;
    text-align: left;
    
  }

  header img {
    width: auto;
    height: 80px;
    margin-left: 1vw;
    margin-top: 1vw;
    margin-bottom: 1vw;

  }

  .sign {
    background-color: var(--lemon-yellow);
    padding: 2vw;
    border-radius: 5px;
    margin-top: 2vw;
    text-align: center;
    color: var(--black);
  }

  .sign a{
    text-decoration: none;
    color: var(--black);
  }

  .sign a:hover {
    background-color: var(--amber-yellow); /* Falu Red */
    padding: 2vw;
    color: var(--black);
    font-weight: bold;
    
  }

  .sign:hover {
    background-color: var(--amber-yellow); /* Falu Red */
    padding: 2vw;
    
  }
  
}


@media (max-width: 426px) {
  /* Basic styles for the navigation */
  .navigation {
    display: none; /* Hide navigation by default */
    flex-direction: column;
    padding: 2vw; /* Stack items vertically */
    background-color: var(--black); /* Background color for the menu */
    position: absolute; /* Position it absolutely */
    /* Adjust based on your layout */
    right: 0; /* Align to the right */
    width: 200px; /* Set a width for the menu */
    z-index: 1000; /* Ensure it appears above other content */
  }

  .section {
    padding: 16px;
    padding-right: 0px;
    margin-top: 2vw;
  }

  .card-wrapper {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping for smooth horizontal scrolling */
    overflow-x: auto; /* Enable horizontal scrolling */
    scroll-snap-type: x mandatory; /* Snap to individual cards */
    gap: 16px; /* Space between cards */
    padding: 10px;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
  }

  .aboutcard-wrapper {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping for smooth horizontal scrolling */
    overflow-x: auto; /* Enable horizontal scrolling */
    scroll-snap-type: x mandatory; /* Snap to individual cards */
    gap: 16px; /* Space between cards */
    padding: 10px;
    -webkit-overflow-scrolling: touch;
    justify-content: center; /* Smooth scrolling for iOS */
  }

  .card-wrapper::-webkit-scrollbar {
    display: none; /* Hide scrollbar for better aesthetics */
  }

  .card {
    flex: 0 0 calc(50% - 16px); /* Two cards per view */
    scroll-snap-align: start; /* Align each card when scrolling */
    background-color: var(--black-variant);

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
  }

  .card a{
    text-decoration: none;
  }

  .aboutcard {
    flex: 0 0 calc(50% - 16px); /* Two cards per view */
    scroll-snap-align: start; /* Align each card when scrolling */
    background-color: var(--black-variant);

    
    transition: transform 0.2s ease-in-out;
  }

  .card:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
  }

  .card h3 {
    margin: 0 0 8px;
    color: var(--amber-yellow);
    font-size: 1em;
  }

  .aboutcard h3 {
    margin: 0 0 8px;
    color: var(--amber-yellow);
    font-size: 1.2em;
    text-align: center;
  }

  .aboutcard p{
    text-align: center;
  }

  .card p {
    color: var(--white);
  }

  .navigation.open {
    display: flex; /* Show the navigation when open */
  }

  .navigation a {
    color: white; /* Link color */
    font-weight: bold;
    padding: 10px; /* Padding for links */
    text-decoration: none; /* Remove underline */
    transition: background 0.3s; /* Smooth background transition */
  }


  /* Hamburger button styles */
  #menu {
    background: none; /* No background */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor */
    position: relative;
    float: right;
    top: 20px; 
    right: 10px;/* Position relative for the icon */
  }

  .hamburger-icon {
    display: block;
    width: 30px; /* Width of the hamburger icon */
    height: 3px; /* Height of the hamburger lines */
    background-color: var(--white); /* Color of the hamburger lines */
    position: relative;
    z-index: 1; /* Position relative for stacking */
  }

  /* Create three lines for the hamburger icon */
  .hamburger-icon::before,
  .hamburger-icon::after {
    content: "";
    /* Create pseudo-elements */
    width: 30px; /* Same width as the main line */
    height: 3px; /* Same height as the main line */
    background-color: white; /* Color of the lines */
    position: absolute; /* Position absolute for stacking */
    left: 0; /* Align to the left */
    transition: all 0.3s;
    /* Smooth transition */
  }

  .hamburger-icon::before {
    top: -10px; /* Position above the main line */
  }

  .hamburger-icon::after {
    top: 10px; /* Position below the main line */
  }

  /* Change the hamburger icon to an 'X' when open */
  #menu.open .hamburger-icon {
    background-color: transparent; /* Hide the main line */
  }

  #menu.open .hamburger-icon::before {
    transform: rotate(45deg); /* Rotate the top line */
    top: 0; /* Align to the center */
  }

  #menu.open .hamburger-icon::after {
    transform: rotate(-45deg); /* Rotate the bottom line */
    top: 0; /* Align to the center */
  }

  .search-container {
    display: flex;
    align-items: center;
    border-radius: 25px;
    background-color: white;
    width: 100%; /* Adjust width as needed */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 2vw;
  }

  .search-container input {
    border: none;
    flex: 1;
    border-radius: 25px 0 0 25px;
    outline: none;
  }

  .search-container button {
    background-color: var(--lemon-yellow); /* Auburn */
    border: none;
    padding: 10px 15px;
    border-radius: 0 25px 25px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  input::placeholder{
    font-size: 10px;
    text-align: left;
    
  }

  .search-container button img {
    font-size: large;
    width: 20px;
    height: 4vw;
  }

  .search-container button:hover {
    background-color: var(--amber-yellow); /* Falu Red */
  }

  .sign:hover {
    background-color: var(--amber-yellow);
    padding: 2vw;
}

  header img {
    width: auto;
    height: 30px;
    margin-left: 1vw;
    margin-top: 1vw;
    margin-bottom: 1vw;

  }

  .sign {
    background-color: var(--lemon-yellow);
    padding: 2vw;
    border-radius: 5px;
    margin-top: 2vw;
    text-align: center;
  }

  .footer a {
    text-decoration: none;
    color: var(--amber-yellow);
    font-size: 14px;
  }

  footer p {
    display: block;
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--goldenrod-yellow)
  }
}


.watch a:hover{
background-color: var(--amber-yellow);
}

.sign a{
  color: var(--black);
}

  .sign {
    background-color: var(--lemon-yellow);
    padding: 2vw;
    border-radius: 5px;
    margin-top: 2vw;
    margin-bottom: 2vw;
    text-align: center;
  }

.review {
  display: flex;
  padding: 3vw;
  border-radius: 20px;
 
  margin: 1vw;
  margin-left: 5vw;
  margin-right: 5vw;
  background-color: var(--black-variant);
  align-items: center;
  margin-top: 2vw;
  flex-direction: column;

}


.review a {
  padding: 3vw;
  border-radius: 20px;
  max-width: 600px;
  margin: 1vw;
  text-align: center;
  color: var(--white);
  color: #e1c700;
}

.review h1 {
  color: var(--white);
}
.footer {
  display: flex;
  background-color: var(--black);
  padding: 20px;
  text-align: center;
  width: 100%;
  justify-content: space-between;

  
}
.footer a {
  text-decoration: none;
  color: var(--amber-yellow);
  font-size: 14px;
}
.footer p {
  display: block;
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--goldenrod-yellow)
}

footer p {
  display: block;
  font-size: 12px;
  color: var(--goldenrod-yellow)
}

footer{
  background-color: var(--black);
  color: var(--amber-yellow);
}