/* my responsive is linked under my style.css so it overrides it following the CSS cascade. so I defined new styling for these 3 screen sizes, 1024px, 768px and 425px, which I believe will cover most of screen sizes. */
/* max screen width size */
@media(max-width: 1024px) {
    .head {
        padding: 20px;
    }
    
    .home {
        flex-direction: column;
        align-items: center;
        margin: 50px 0;
        gap: 30px;
    }

    .home .info {
        max-width: 100%;
        text-align: center;
    }

    .home .info h2 {
        font-size: 35px;
    }

    .home .info p {
        font-size: 20px;
    }

    .home .info .social-media {
        justify-content: center;
    }

    .home:after {
        content: none;
    }

    .projects .container-pro {
        padding: 0 30px;
    }

    .foot nav h4 {
        line-height: 2;
    }

    .foot nav ul {
        grid-template-columns: repeat(1, 1fr);
    }

    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .lightbox img {
        max-width: 80vw;
        max-height: 70vh;
    }

    .project-container .card {
        grid-template-columns: 1fr;
    }

    .project-container .card .requirements h4 {
        display: flex;
        justify-content: center;
    }

    .project-container .card .requirements p {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .project-container .card .grades {
        display: flex;
        justify-content: center;
    }
}

@media(max-width: 768px) {
    .head {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .head .menu ul {
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
    }

    .head .menu li a {
        display: block;
        font-size: 14px;
        padding: 4px 8px;
        text-align: right;
    }

    .home .info h2 {
        font-size: 30px;
    }

    .home .info p {
        font-size: 16px;
    }

    .home .container-pic img {
        max-width: 320px;
    }

    .home .info .social-media {
        gap: 10px;
    }

    .home .info .social-media a i {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .container-pro {
        grid-template-columns: repeat(2, 1fr);
    }

    .foot {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .foot nav h4 {
        justify-content: center;
        font-size: 15px;
        margin-top: 90px;
    }

    .foot nav ul {
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
    }

    .foot nav ul li a {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .foot .left-side {
        align-items: center;
        /* margin-top: 90px; */
    }

    .foot .social-foot {
        justify-content: center;
        flex-wrap: wrap;
        margin: 20px 0;
    }

    .lightbox img {
        max-width: 95vw;
        max-height: 80vh;
    }

    .projects {
        padding: 30px;
    }

    .project-container .project-header p {
        padding: 20px;
    }
}

@media(max-width: 425px) {
    .container-pro {
        grid-template-columns: repeat(1, 1fr);
    }

    .gallery {
        grid-template-columns: 1fr;
    }
}