/* Smaller screens */
@media (max-width: 600px) {
  .folder i {
    font-size: 40px;
  }

  .character img {
    width: 40px;
    height: 40px;
  }

  .back-button i {
    font-size: 30px;
  }

  .folder-label, .character-name {
    font-size: 12px;
  }
}


body{
	font-family: "Quicksand", sans-serif;
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none;    /* Firefox */
	-ms-user-select: none;     /* IE/Edge */
	user-select: none;         /* Standard */
}

h2{
	color: hotpink;
	font-weight: bolder;
	text-transform: uppercase;
}

hr{
	margin: 0;
	border: 1px solid #ccc;
}
.card-container {
	width: 80%;
	margin: 0 auto;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	border: 1px solid #ccc;
}

.card-header{
	color: white;
	font-weight: bolder;
	text-align: center;
	background-color: hotpink;
	padding: 10px;
}

.container{

	padding: 30px 50px;
}



.character-container {
	display: flex;
	justify-content: flex-start; /* left-align row */
	align-items: center;         /* vertically center all items in row */
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 20px;
}
.folder-container, .character-container {
	display: flex;
	justify-content: flex-start; /* align items to the left */
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 20px;
}

/* Items stacked vertically, centered internally */
.folder, .character, .back-button {
	display: flex;
	flex-direction: column;  /* stack icon/image and label */
	align-items: center;     /* center inside each item */
	cursor: pointer;
	transition: transform 0.2s;
}

/* Folder icon */
.folder i {
	font-size: 50px;
	color: pink;
}

/* Character images fixed size */
.character img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 10px;
}

/* Labels */
.folder-label, .character-name {
	font-size: 12px;
	margin-top: 5px;
	font-weight: bold;
	padding: 3px 10px;
}

.character-name{
	background-color: pink;
	border-radius: 1em;
}

/* Back button icon */
.back-button i {
	color: pink;
	font-size: 40px;
}

/* Hover effect */
.folder:hover, .character:hover, .back-button:hover {
	transform: scale(1.1);
}

/* Content initially hidden */
.content {
	display: none;
	margin-top: 20px;
}