body {
    font-family: Arial; /* Use Inter font */
    background-image: url('https://sadhost.neocities.org/images/tiles/sky.png');
    text-align: center;
    background-color: #f3f4f6; /* Equivalent to bg-gray-100 */
    min-height: 100vh; /* Equivalent to min-h-screen */
    display: flex;
    flex-direction: column; /* Equivalent to flex flex-col */
}

/* horizontal */
nav ul {
  list-style-type:none;
  padding-left:0;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
}
nav ul li {
  padding-right:10px;
}

nav {
  margin-top: 16px;
  margin-bottom: 40px;
}



/* Main Content Area Styles */
.main-content {
    max-width: 1280px; /* Equivalent to Tailwind's container max-width for xl breakpoint, adjust as needed */
    margin-left: auto; /* Equivalent to mx-auto */
    margin-right: auto; /* Equivalent to mx-auto */
    padding: 32px; /* Equivalent to p-8 (8 * 4 = 32px) */
    flex-grow: 1; /* Equivalent to flex-grow */
    width: 100%; /* Ensure it takes full width within its max-width */
    box-sizing: border-box; /* Include padding in the element's total width and height */
}

/* Product Grid Styles */
.product-grid {
    display: grid;
    grid-template-columns: 1fr; /* Equivalent to grid-cols-1 for mobile */
    gap: 32px; /* Equivalent to gap-8 (8 * 4 = 32px) */
    width: 100%; /* Ensure the grid takes full width of its parent */
}

/* Responsive Grid Columns */
@media (min-width: 640px) { /* Equivalent to sm breakpoint */
    .product-grid {
        grid-template-columns: repeat(2, 1fr); /* Equivalent to sm:grid-cols-2 */
    }
}

@media (min-width: 1024px) { /* Equivalent to lg breakpoint */
    .product-grid {
        grid-template-columns: repeat(3, 1fr); /* Equivalent to lg:grid-cols-3 */
    }
}

@media (min-width: 1280px) { /* Equivalent to xl breakpoint */
    .product-grid {
        grid-template-columns: repeat(3, 1fr); /* Equivalent to xl:grid-cols-3 */
    }
}

/* Product Item Link Styles */
.product-item {
    display: block; /* Equivalent to block */
    /* Removed transform, transition, duration-300, hover:scale-105 for hover animations */
    text-decoration: none; /* Ensure links within product items don't have default underline */
    color: inherit; /* Inherit text color from parent */
}

/* Product Card Background Styles */
.product-card-bg {
    background-color: transparent; /* Ensure no background color remains */
    background-size: cover;
    background-position: center;
    aspect-ratio: 1 / 1; /* Make the background container square */
    padding: 16px; /* Equivalent to p-4 (4 * 4 = 16px) */
    display: flex; /* Equivalent to flex */
    justify-content: center; /* Equivalent to justify-center */
    align-items: center; /* Equivalent to items-center */
    border-radius: 6px; /* Equivalent to rounded-md (Tailwind's default for rounded-md) */
}

/* Product Image Styles */
.product-image-square {
    width: 100%; /* Take full width of its parent */
    height: 100%; /* Take full height of its parent */
    object-fit: contain; /* Ensure the entire image is visible, scaled to fit */
    border-radius: 6px; /* Equivalent to rounded-md */
}

/* Product Info Text Styles */
.product-info {
    padding: 16px; /* Equivalent to p-4 */
    text-align: center; /* Equivalent to text-center */
}

/* Product Title Styles */
.product-title {
    font-size: 18px; /* Equivalent to text-lg (18px) */
    font-weight: 600; /* Equivalent to font-semibold */
    color: #2d3748; /* Equivalent to text-gray-800 */
}

/* Product Price Styles */
.product-price {
    color: #4a5568; /* Equivalent to text-gray-600 */
    margin-top: 4px; /* Equivalent to mt-1 (1 * 4 = 4px) */
}

h1 {
    font-size: 40px;
    font-weight: bold;
}

/* Responsive Grid Columns - Centering the last item */

/* For screens 640px and up (sm breakpoint) */
@media (min-width: 640px) {
    .product-grid a:nth-last-child(1) { /* Selects the last product item */
        grid-column: 1 / -1; /* Forces the item to span all columns available in the grid */
        max-width: 320px; /* Limit the item's maximum width to match other items */
        margin-left: auto; /* Center the item horizontally */
        margin-right: auto; /* Center the item horizontally */
    }
}

/* For screens 1024px and up (lg breakpoint) */
@media (min-width: 1024px) {
    .product-grid a:nth-last-child(1) { /* Selects the last product item */
        grid-column: 1 / -1; /* Forces the item to span all columns available in the grid */
        max-width: 320px; /* Limit the item's maximum width to match other items */
        margin-left: auto; /* Center the item horizontally */
        margin-right: auto; /* Center the item horizontally */
    }
}

/* For screens 1280px and up (xl breakpoint) */
@media (min-width: 1280px) {
    .product-grid a:nth-last-child(1) { /* Selects the last product item */
        grid-column: 1 / -1; /* Forces the item to span all columns available in the grid */
        max-width: 320px; /* Limit the item's maximum width to match other items */
        margin-left: auto; /* Center the item horizontally */
        margin-right: auto; /* Center the item horizontally */
    }
}
footer {
  margin-top: 160px;
  margin-bottom: 40px;
  text-align: center;
}