html, body {
    height: 100%; /* Set height to 100% for both html and body */
    margin: 0; /* Remove default margins */
}

body {
    font-family: Arial, sans-serif;
    padding: 20px;
    background: #2c2a2a;
}

header {
    text-align: center;
    margin-bottom: 40px;
}

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Four columns for larger screens */
    gap: 100px;
}

h1 {
    /*font-family: 'Montserrat'; /* Use Google Fonts for decorative style */
    font-size: 6em; /* Increase font size */
    color: transparent; /* Set to transparent for gradient */
    background: linear-gradient(45deg, #FF5733, #33FFF3); /* Create a colorful gradient */
    -webkit-background-clip: text; /* Clip the background to the text */
    background-clip: text;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 5px rgba(220, 220, 220, 0.4); /* Reduced glow 
    animation: fadeIn 2s ease; /* Fade-in animation */
}

.permanent-marker-regular {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
}

.project-box {
    padding: 40px;
    text-align: center;
    border: 8px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
    position: relative;
    overflow: hidden;
    font-size: 24px; /* Increased font size */
    font-weight: bold;
    color: #fff;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.project-box i {
    font-size: 32px; /* Icon size */
    display: block;
    margin-bottom: 10px; /* Space between icon and text */
}

.project-box:hover {
    transform: scale(1.05);
    filter: brightness(1.1); /* Brightness effect on hover */
}

/* Media query for responsive design */
@media (max-width: 768px) {

    header {
        font-size: 1em; /* Adjust header font size for smaller screens */
    }

    .container {
        grid-template-columns: 1fr; /* Single column for mobile */
    }
    
    .project-box {
        padding: 30px; /* Adjust padding for smaller screens */
        font-size: 20px; /* Slightly smaller font size */
    }
}

#visitorStats {
    position: fixed; /* Fixed position */
    bottom: 20px; /* Space from bottom */
    left: 20px; /* Space from left */
    background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent background */
    color: rgba(60, 60, 60, 12); /* Semi-transparent background */
    border: 1px solid #ccc; /* Border for visibility */
    padding: 10px; /* Padding inside the box */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Shadow for depth */
    z-index: 1000; /* Ensure it’s on top of other elements */
}