/* Ensures global styles don't unintentionally reset or override these styles */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif; /* Consistent font */
    /* font-family: 'Press Start 2P', cursive; /* retro font; can be used for .project, .description specifically, if desired */
}

/* Navigation styling */
nav {
    display: flex;
    justify-content: center; /* Centers content horizontally */
    padding: 20px 0; /* Adds padding above and below */
}

nav a {
    text-decoration: none;
    color: #000; /* Text color */
    padding: 10px 20px; /* Adds padding for better clickability */
    border: 1px solid transparent; /* Transparent border, visible on hover */
}

nav a:hover {
    border-color: #000; /* Border color on hover */
}

/* About section styling */
.about-section {
    text-align: center; /* Centers the text */
    padding: 20px;
}

.about-section p {
    max-width: 600px;
    margin: 0 auto; /* Centers the paragraph */
}

/* Projects container */
.projects-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers tiles */
    gap: 20px;
    padding: 20px;
}

/* Individual project tiles */
.project {
    background-color: #f0f0f0; /* Light background for contrast */
    color: #000; /* Default text color */
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s, color 0.3s; /* Smooth transitions for color changes */
}

/* Hover state for project tiles */
.project:hover {
    background-color: #000; /* Dark background */
}

/* Description text styling, visible by default */
.description {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
    text-align: center; /* Centers the text */
    transition: opacity 0.3s;
}

/* Hover-description styling, invisible by default */
.hover-description {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
    text-align: center; /* Center text */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Smooth transition */
    color: #fff; /* Ensures visibility against the hover background */
}

/* Reveals hover-description on project hover */
.project:hover .hover-description {
    opacity: 1; /* Becomes visible on hover */
}

/* Optionally hides the initial description on hover */
.project:hover .description {
    opacity: 0; /* Hide the initial description on hover */
}