@charset "UTF-8";

/* Global & Body Changes */
body{
	/* Dark background for a sleek look */
	background-color:#1e1e1e;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
	color: #e0e0e0; 
}

#wrapper{
	max-width:960px;
	margin:0 auto;
}

/* Header & Title */
h1{
	margin:50px 0 30px 0;
	color:#00e676; 
	font-family: 'Roboto Mono', monospace; 
	font-size:3.5em; 
	text-align: center;
	border-bottom: 2px solid #333;
	padding-bottom: 10px;
}

/* Button Container */
#buttons {
    text-align: center; 
    margin-bottom: 40px;
}

/* Button Styling */
button{
	font-size:1em;
	margin-right:15px;
	margin-bottom: 15px;
	color:#fff;
	padding:12px 30px; 
	background:#333; 
	border-radius:5px; 
	border:1px solid #00e676; 
	display:inline-block;
	cursor:pointer;
	transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

#buttons button:last-child{
	margin-right:0;
}

button:focus{
	outline:none;
}

/* Active/Hover State */
button:hover{
	background:#00e676; 
	color: #1e1e1e; 
	transform: translateY(-2px); 
}

/* Product List Container */
.bigbox {
    display: flex;
    justify-content: center; 
}

#list{
	/* Removed negative margin and float */
	padding-top:20px;
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start; 
    gap: 20px; 
    max-width: 850px; 
}

/* Individual List Item (Product Card) */
#list li{
	width:180px;
	height:180px;
	list-style-type:none;
	overflow: hidden; 
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); 
    background-color: #282828; 
    border: 1px solid #444;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Image Styling */
#list li img {
    width: 100%; 
    height: 100%;
    object-fit: cover; 
    transition: transform 0.4s ease;
}

/* Hover Effects */
#list li:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 25px rgba(0, 230, 118, 0.4); 
}

#list li:hover img {
    transform: scale(1.15) rotate(1deg); 
    filter: brightness(1.2); 
}