@import url('header.css');
@font-face {
    font-family: 'Keep-on-Truckin';
    src: url('fonts/KeeponTruckin.ttf') format('truetype');
}

.projects{
    overflow: hidden;
    /* background: #FFDDF4; */
    background: url('images/bow.png') no-repeat center center/cover;
    padding: 60px 0;
    text-align: center;
}

.projects h1 {
    font-family: 'Keep-on-Truckin', sans-serif;
    color: #C3388E;
    overflow: hidden;
    padding: 5% 0 2% 0;
    /* margin-top: 10px;
    margin-bottom: 0; */
    text-align: center; /* Center of screen*/
    font-size: 3rem;
    margin-bottom: 30px;
}

.projects h2 {
    font-size: 3rem;
    color: #804585;
    margin-bottom: 40px;
    font-family: 'Fredoka', sans-serif;
    padding: 5%;
}

/* Project Sections (College, UI/UX, Experience) */
.college-projects,
.uiux-projects,
.experience {
    margin: 40px auto;
    width: 80%;
}

/* Project Item Box */
.project-item {
    background: white; /* Box background */
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease-in-out;
    max-width: 320px; /* Limit width */
}

/* Hover Effect */
.project-item:hover {
    transform: translateY(-5px);
}

/* Project Items Layout */
.project-item img {
    width: 100%;
    border-radius: 8px;
}

.project-item h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    color: #8F5194;
    margin: 10px 0;
}

.project-item p {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    color: #555;
}

/* Flexbox for Aligning Project Items */
.projects div {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Wraps items for responsiveness */
}

.project-link {
    text-decoration: none;
    color: inherit;
    display: block; /* ensures the entire area is clickable */
}


/* Responsive Design */
@media (max-width: 768px) {
    .projects {
        padding: 40px 20px;
    }
    
    .projects h1 {
        font-size: 2.5rem;
    }

    .projects h2 {
        font-size: 1.8rem;
    }

    .project-item {
        max-width: 90%; /* Full width on small screens */
    }
}

/*Saano paardaa p isn't below h2*/
/*The h2 should be the heading for project-items so I should be above h2 and not next to it*/