/* General styles for the body */
body {
  font-family: 'Audiowide', sans-serif;
  background-color: #2f073b;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100vh;
}

/* Header styling */
.header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  background-position: 50px, 10px;
}

/* Title styling */
.title-left, .title-right {
  font-size: 2rem;
  color: white;
}

.title-left {
  margin-right: 1px;
  color: #ff6624;
}

.title-right {
  color: white;
}

/* Styling for the search bar */
.search {
  position: absolute;
  top: 10px;
  right: 10px;
}

.search[type="text"] {
  padding: 6px;
  border: none;
  margin-top: 8px;
  font-size: 17px;
  width: 200px;
}

/* Styling for the search button */
.search-button {
  font-family: Candal, sans-serif;
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  background-color: #ff6624;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.search-button:hover {
  background-color: #CC99FF;
}

/* Dropdown Button Styling */
.dropbtn {
  background-color: #ff6624;
  color: white;
  padding: 16px;
  font-family: Afacad, fantasy;
  font-size: 20px;
  cursor: pointer;
  margin-left: 100px;
  border: none;
  width: 1500px;
  border-radius: 8px;
}

/* Dropdown Content */
.dropdown-content {
  display: none;
  position: relative;
}

/* Show dropdown content when hovering over the dropdown */
.dropdown:hover .dropdown-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: 100px;
  margin-right: 100px;
}

/* Apply same style to genre buttons */
.container {
  display: flex;
  position: relative;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-right: 10px;
  margin-top: 3px;
  cursor: pointer;
  font-size: 22px;
  font-family: Afacad, sans-serif;
  color: bisque;
  user-select: none;
}

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 8px;
  background-color: beige;
}

.container:hover input ~ .checkmark {
  background-color: aquamarine;
}

.container input:checked ~ .checkmark {
  background-color: #ff6624;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid rgb(115, 0, 255);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Dropdown styling for year buttons */
.dropbtn2 {
  margin-top: 50px;
  background-color: #ff6624;
  color: white;
  padding: 16px;
  font-family: Afacad, fantasy;
  font-size: 20px;
  border: none;
  margin-left: 350px;
  width: 1000px;
  border-radius: 8px;
}

.dropdown2 {
  position: relative;
  display: inline-block;
}

.dropdown-content2 {
  display: none;
  position: relative;
}

/* Show the dropdown content on hover */
.dropdown2:hover .dropdown-content2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-left: 200px;
  margin-right: 200px;
}

/* Year button dropdown styling */
.year-label {
  display: flex;
  position: relative;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-right: 10px;
  margin-top: 3px;
  cursor: pointer;
  font-size: 22px;
  font-family: Afacad, sans-serif;
  color: bisque;
  user-select: none;
}

.year-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.year-label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 8px;
  background-color: beige;
}

.year-label:hover input ~ .checkmark {
  background-color: aquamarine;
}

.year-label input:checked ~ .checkmark {
  background-color: #ff6624;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.year-label input:checked ~ .checkmark:after {
  display: block;
}

.year-label .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid rgb(115, 0, 255);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}


/* Dropdown styling for rating buttons */
.dropbtn3 {
  margin-top: 50px;
  background-color: #ff6624;
  color: white;
  padding: 16px;
  font-family: Afacad, fantasy;
  font-size: 20px;
  border: none;
  margin-left: 475px;
  width: 750px;
  border-radius: 8px;
}

.dropdown3 {
  position: relative;
  display: inline-block;
}

.dropdown-content3 {
  display: none;
  position: relative;
}

/* Show the dropdown content on hover */
.dropdown3:hover .dropdown-content3 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-left: 475px;
  margin-right: 450px;
}

/* Year button dropdown styling */
.rating-label {
  display: flex;
  position: relative;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-right: 10px;
  margin-top: 3px;
  cursor: pointer;
  font-size: 22px;
  font-family: Afacad, sans-serif;
  color: bisque;
  user-select: none;
}

.rating-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.rating-label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 8px;
  background-color: beige;
}

.rating-label:hover input ~ .checkmark {
  background-color: aquamarine;
}

.rating-label input:checked ~ .checkmark {
  background-color: #ff6624;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.rating-label input:checked ~ .checkmark:after {
  display: block;
}

.rating-label .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid rgb(115, 0, 255);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Dropdown styling for rating buttons */
.dropbtn4 {
  margin-top: 50px;
  background-color: #ff6624;
  color: white;
  padding: 16px;
  font-family: Afacad, fantasy;
  font-size: 20px;
  border: none;
  margin-left: 225px;
  width: 1250px;
  border-radius: 8px;
}

.dropdown4 {
  position: relative;
  display: inline-block;
}

.dropdown-content4 {
  display: none;
  position: relative;
}

/* Show the dropdown content on hover */
.dropdown4:hover .dropdown-content4 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-left: 225px;
  margin-right: 225px;
}

/* Year button dropdown styling */
.production-label {
  display: flex;
  position: relative;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-right: 10px;
  margin-top: 3px;
  cursor: pointer;
  font-size: 22px;
  font-family: Afacad, sans-serif;
  color: bisque;
  user-select: none;
}

.production-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.production-label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 8px;
  background-color: beige;
}

.production-label:hover input ~ .checkmark {
  background-color: aquamarine;
}

.production-label input:checked ~ .checkmark {
  background-color: #ff6624;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.production-label input:checked ~ .checkmark:after {
  display: block;
}

.production-label .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid rgb(115, 0, 255);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}



.infolbl{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #fff;
  font-size: medium;
  position:absolute;
  right:30px;
  bottom: 2px; 
}