/* Responsive Logic for smaller screens */

@media screen and (max-width: 1024px) {
    .second-part {
        display: none;
    }

    nav ul {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    main {
        flex-direction: column;
        align-items: center;
    }

    aside {
        width: 90%;
        margin: 0 auto 20px auto;
    }

    .three-columns {
        flex-direction: column;
    }

    .three-columns section {
        width: 100%;
    }

    .projects-section ul li {
        width: 101.9%;
    }

    .work-experience .job {
        width: 102.5%;
        margin-left: -5px;
    }

    .education {
        width: 100%;
    }

    .review-box {
        max-width: 100%;
    }

    .review-container {
        flex-direction: column;
        align-items: center;
    }
}

@media (min-width: 1024px) { 
    aside {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .second-part {
        display: none;
    }

    .header {
        flex-direction: column;
        text-align: center;
    }

    .second-part .nav-links {
        margin-left: 0;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .second-part .nav-links a {
        display: block;
        padding: 8px;
        border: 1px solid black;
        width: 100%;
        max-width: 200px;
        /* max-width: width; */

        /* Ensure that the element only takes as much space as it needs. */
        width: auto;
        max-width: max-content;
        
        margin: 0 auto;
        text-align: center;
        background-color: #f8f8f8;
    }

    .profile-header {
        padding: 1rem;
    }

    .three-columns-table td {
        display: block;
        width: 100%;
        border: none;
        border-bottom: 2px solid black;
    }

    .three-columns-table td:last-child {
        border-bottom: none;
    }

    .review-container {
        flex-direction: column;
        align-items: center;
    }

    .review-box {
        width: 90%;
    }
}

@media screen and (max-width: 480px) {
    .second-part {
        display: none;
    }

    .profile-header h1 {
        font-size: 1rem;
    }

    .profile-header img {
        width: 30px;
        height: 30px;
    }

    .projects-section h2,
    .work-experience h2,
    .education h2,
    .reviews h2 {
        font-size: 1rem;
    }

    .review-box {
        width: 100%;
    }

    .second-footer {
        font-size: 0.9rem;
    }
}

@media (min-width: 480px) { 
    .projects-section ul li {
        width: 104%;
    }

    .work-experience .job {
        width: 105.2%;
    }
}

@media (min-width: 480px) and (max-width: 1024px) { 
    .projects-section ul li {
        width: 101.8%;
        /* width: 103.8%; */
        margin: 0 auto;
    }

    .work-experience .job {
        width: 102.4%;
        /* width: 105%; */
        margin: 0 auto;
        margin-left: -5px;
    }
}

@media (min-width: 1024px) { 
    .projects-section ul li,
    .work-experience .job {
        width: 100%;
        max-width: 1200px; 
        margin: 0 auto;
    }
}

@media (min-width: 500px) {
    .projects-section ul li {
        width: 104%;
    }

    .work-experience .job {
        width: 105.2%;
    }
}

@media (min-width: 550px) {
    .projects-section ul li {
        width: 103.3%;
    }

    .work-experience .job {
        width: 104.7%;
    }
}

@media (min-width: 600px) {
    .projects-section ul li {
        width: 102.9%;
    }

    .work-experience .job {
        width: 103.9%;
    }
}

@media (min-width: 650px) {
    .projects-section ul li {
        width: 102.6%;
    }

    .work-experience .job {
        width: 103.5%;
    }
}

@media (min-width: 700px) {
    .projects-section ul li {
        width: 102.5%;
    }

    .work-experience .job {
        width: 103.3%;
    }
}

@media (min-width: 800px) {
    .projects-section ul li {
        width: 102.1%;
    }

    .work-experience .job {
        width: 102.8%;
    }
}

@media (min-width: 900px) {
    .projects-section ul li {
        width: 101.9%;
    }

    .work-experience .job {
        width: 102.5%;
    }
}

@media (min-width: 1000px) {
    .projects-section ul li {
        width: 101.9%;
    }

    .work-experience .job {
        width: 102.4%;
    }
}