.main-header {
    position: relative;
    box-sizing: border-box;
    background-color: #1e1f26;
    text-align: center;
    width: 100%;
    min-height: 250px;
    border-bottom: 2px solid var(--primary-color);
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90%;
}

.intro-text {
    flex: 1;
    max-width: 48rem;
    text-align: center;
    color: var(--text-color-dark);
    padding: 1rem;
    /* margin-top: 1rem; */
}

.bio-icon-discord {
    display: inline-block;
    color: var(--primary-color);
    width: 1.25em;
    height: 1em;
    vertical-align: -0.125em;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Discord-Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.644 96"><path id="Discord-Symbol-Black" fill="%2362cbff" d="M81.15,0c-1.2376,2.1973-2.3489,4.4704-3.3591,6.794-9.5975-1.4396-19.3718-1.4396-28.9945,0-.985-2.3236-2.1216-4.5967-3.3591-6.794-9.0166,1.5407-17.8059,4.2431-26.1405,8.0568C2.779,32.5304-1.6914,56.3725.5312,79.8863c9.6732,7.1476,20.5083,12.603,32.0505,16.0884,2.6014-3.4854,4.8998-7.1981,6.8698-11.0623-3.738-1.3891-7.3497-3.1318-10.8098-5.1523.9092-.6567,1.7932-1.3386,2.6519-1.9953,20.281,9.547,43.7696,9.547,64.0758,0,.8587.7072,1.7427,1.3891,2.6519,1.9953-3.4601,2.0457-7.0718,3.7632-10.835,5.1776,1.97,3.8642,4.2683,7.5769,6.8698,11.0623,11.5419-3.4854,22.3769-8.9156,32.0509-16.0631,2.626-27.2771-4.496-50.9172-18.817-71.8548C98.9811,4.2684,90.1918,1.5659,81.1752.0505l-.0252-.0505ZM42.2802,65.4144c-6.2383,0-11.4159-5.6575-11.4159-12.6535s4.9755-12.6788,11.3907-12.6788,11.5169,5.708,11.4159,12.6788c-.101,6.9708-5.026,12.6535-11.3907,12.6535ZM84.3576,65.4144c-6.2637,0-11.3907-5.6575-11.3907-12.6535s4.9755-12.6788,11.3907-12.6788,11.4917,5.708,11.3906,12.6788c-.101,6.9708-5.026,12.6535-11.3906,12.6535Z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

}

.bio-icon-discord:hover {
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Discord-Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.644 96"><path id="Discord-Symbol-Black" fill="%23f8f8f2" d="M81.15,0c-1.2376,2.1973-2.3489,4.4704-3.3591,6.794-9.5975-1.4396-19.3718-1.4396-28.9945,0-.985-2.3236-2.1216-4.5967-3.3591-6.794-9.0166,1.5407-17.8059,4.2431-26.1405,8.0568C2.779,32.5304-1.6914,56.3725.5312,79.8863c9.6732,7.1476,20.5083,12.603,32.0505,16.0884,2.6014-3.4854,4.8998-7.1981,6.8698-11.0623-3.738-1.3891-7.3497-3.1318-10.8098-5.1523.9092-.6567,1.7932-1.3386,2.6519-1.9953,20.281,9.547,43.7696,9.547,64.0758,0,.8587.7072,1.7427,1.3891,2.6519,1.9953-3.4601,2.0457-7.0718,3.7632-10.835,5.1776,1.97,3.8642,4.2683,7.5769,6.8698,11.0623,11.5419-3.4854,22.3769-8.9156,32.0509-16.0631,2.626-27.2771-4.496-50.9172-18.817-71.8548C98.9811,4.2684,90.1918,1.5659,81.1752.0505l-.0252-.0505ZM42.2802,65.4144c-6.2383,0-11.4159-5.6575-11.4159-12.6535s4.9755-12.6788,11.3907-12.6788,11.5169,5.708,11.4159,12.6788c-.101,6.9708-5.026,12.6535-11.3907,12.6535ZM84.3576,65.4144c-6.2637,0-11.3907-5.6575-11.3907-12.6535s4.9755-12.6788,11.3907-12.6788,11.4917,5.708,11.3906,12.6788c-.101,6.9708-5.026,12.6535-11.3906,12.6535Z"/></svg>');

}

.profile-card {
    background-color: var(--card-bg-color);
    width: 80%;
    padding: 1.5rem;
    border-radius: 20px;
    display: grid;
    grid-template-columns: auto auto;
    gap: 2rem;
    align-items: center;
    text-align: justify;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin-bottom: 2rem;
}

.profile-foto-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.profile-photo {
    display: flex;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    justify-self: center;
    object-fit: cover;
    border: 2px solid var(--secondary-color);
}

.projects {
    padding-top: 4rem;
}

.project-grid {
    display: grid;
    width: 80%;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.project-card {
    background-color: var(--card-bg-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.project-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}

.project-card img {
    width: 100%;
    object-fit: cover;
    display: block;
    border-bottom: 3px solid var(--primary-color);
    filter: saturate(10%);
}

.project-card:hover img {
    filter: grayscale(0);
}

.project-info {
    padding: 1rem;
}

@media (max-width: 768px) {

    .profile-card {
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    .project-grid {
        width: 100%;

    }

}

@media (max-width: 550px) {
    .project-card img {
        filter: grayscale(0);
    }
}