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

html{
background-color: #5F8572;
}

/* Default (Light Mode) */
	body {
 		 width: 600px !important;
 		 margin: 0 auto !important;
     display: flex;
     flex-direction: column;
		 background-color: #9FBFB5 !important;
 		 padding: 0 20px 20px 20px !important;
  		 border: 5px solid black !important;
		 transition: background-color 0.3s ease, color 0.3s ease !important;
	}

  /* Default (Light Mode)
	body {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #9FBFB5;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
  transition: background-color 0.3s ease, color 0.3s ease;
}

@media screen and (max-width: 768px) {
  body {
    padding: 0 10px 20px 10px;
  }
} */

body.dark-theme {
	background-color: #333333 !important;
  	color: #ffffff !important;
}
html.dark-theme {
  background-color: #4b6659 !important;
}

#theme-toggle {
  position: absolute; 
  top: 1rem;
  right: 1rem;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

#theme-toggle:hover {
  background: transparent;
  transform: scale(1.1);
}

/*Title at top of page*/
	h1{ 
  		font-size: 100px;
  		font-family: "Megrim", system-ui;
  		font-weight: 400;
  		font-style: normal;
		text-align:center;
		margin: 0;
  		padding: 20px 0;
	}

/*Response text after entering name*/
	h2{
		text-align: center;
	}

	button {
  		margin:auto;
  		display:block;
		transition: background-color 0.3s ease;
	}

	#roseImage {
 		 display: block;
                 margin: 0 auto;
		 width: 90%;
		}

/*Logo on "game"Main.html*/
	#gameLogo {
		 display: block;
                 margin: 0 auto;
		 width: 80%;
		}


	.row {
  		display: flex;
		justify-content: center;
  
	}

	.column {
  		flex: 33.33%;
  		padding: 5px;
	}

.navBar { width: 100%;}
	
	/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #0D0D0D; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #F2F2F2;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #A8A8A8;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.nav-button {
    width: 100%; /* Adjust width as needed */
    height: 100%; /* Adjust height as needed */
    border: none;
    padding: 10px;
    cursor: pointer;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* .game-main: formats character grid on main game pages
/* Style the body to center content */
        .game-main-body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* Style the container of images */
        .game-main-image-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Creates a responsive grid */
            gap: 20px; /* Space between images */
            padding: 20px;
            justify-items: center; /* Centers the images horizontally */
        }

        /* Style for each image */
        .game-main-image-container a img {
            width: 100%; /* Make the image take the full width of the grid item */
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
        }

        /* Hover effect for images */
        .game-main-image-container a img:hover {
            transform: scale(1.05);
        }

        /* Hover effect for images */
        .game-main-image-container img:hover {
            transform: scale(1.05);
        }

/* .game-choice formats game grid on index.html */
        .game-choice {
    		  display: grid;
    		  grid-template-columns: repeat(3, 1fr); /* 3 columns */
    		  gap: 24px;
   			  padding: 24px 0;
    		  justify-items: center;
		      }
		    .game-choice a img {
   			  width: 100%;
    		  max-width: 220px;
    		  border-radius: 8px;
    		  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    		  transition: transform 0.2s;
		}
		.game-choice a img:hover {
    		transform: scale(1.05);
		}

#imgChar {
      display: block;
      margin: 1rem auto;
      max-width: 300px;
    }

    #tag-filters {
      display: block;
      margin: 1rem auto;
      max-width: 300px;
    }

    select {
      padding: 0.5rem;
      font-size: 1rem;
    }
    
/* Formats individual combos added to page */
    .combo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* border: 1px solid #444;
  background-color: #222; */
  padding: 1rem;
  margin: 1rem auto;
  max-width: 800px;
  border-radius: 10px;
}

.combo-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.combo-content video {
  max-width: 320px;
  height: auto;
}

.notation {
  flex: 1;
  /* background-color: #1a1a1a; */
  padding: 0.5rem 1rem;
  border-radius: 8px;
  /* border: 1px solid #333; */
  text-align: left;
}

.filter-container {
  width: 100%;
  max-width: 600px;
  margin: 1rem auto;
  font-family: sans-serif;
}

.filter-header {
  background-color: #000;
  color: #fff;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  user-select: none;
  border: 1px solid #333;
  border-radius: 6px 6px 0 0;
}

.filter-panel {
  background-color: #1a1a1a;
  overflow: hidden;
  max-height: 0;
  padding: 0 1rem;
  border: 1px solid transparent;
  border-top: none;
  transition:
    max-height 0.3s ease,
    padding 0.3s ease,
    border-color 0.3s ease,
    opacity 0.3s ease;
  opacity: 0;
  visibility: hidden;
  margin-top: 0; /* remove unwanted spacing */
  border-radius: 0 0 6px 6px;
  color: white;
}

.filter-panel.show {
  max-height: 500px; /* enough to show content */
  padding: 1rem;
  border-color: #333;
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}

.filter-panel label {
  display: inline-block;
  margin: 0.5rem;
}

.black-baccara-logo {
    display: flex;
    flex-direction: column;   /* logo on top, text underneath */
    align-items: center;
    gap: 4px;                 /* space between logo and text */
    font-size: 0.9rem;
    padding: 4px 6px;
    border-radius: 6px;
}

.black-baccara-logo-link {
    position: fixed;          /* stays in the bottom-left corner */
    bottom: 10px;
    left: 10px;
    text-decoration: none;    /* remove underline from link */
    color: #000000;              /* text color */
    z-index: 1000;            /* ensure it's above other content */
}

.black-baccara-logo img {
    height: 60px;             /* adjust logo size */
    width: auto;
    display: block;
}