@media screen and (max-width: 768px) {
    body {
        /*display: flex;*/
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    /* Navbar */
    .navbar {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .menu li {
        margin: 10px 0;
    }

    .header-text {
        text-align: center;
        top: 20%;
    }

    .header-text .greeting {
        font-size: 18px;
    }

    .header-text .name {
        font-size: 36px;
    }

    .header-text span {
        font-size: 22px;
        margin: 0;
    }

    .about-me-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .about-me-left {
        order: 2;
        padding: 10px;
    }

    .skills-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .skills-section h2 {
        font-size: 24px;
    }

    .skill-cards {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .skill-card {
        width: 100%;
        margin: 10px 0;
    }

    .projects-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }

    .card {
        width: 100%;
        height: auto;
    }

    .card .image {
        top: 0;
    }

    .card .content {
        top: 0;
    }

    .connect {
        text-align: center;
        margin-bottom: 20px;
    }

    .connect ul {
        font-size: 20px;
    }

    .copyright {
        font-size: 12px;
    }
}