@media screen and (max-width:500px) {
    body{
        padding: 30px;
    }
    .container{
        display: flex;
        flex-direction: column;
    }

    .info-card{
        width: 80vw;
        height: 490px;

        
    }


    
    .card-name{
        font-size: 35px;
    }

    .dramatic-text-1,.dramatic-text-2{
        font-size: 6rem;;
    }

    .card-menu{
        gap: 10vw;
    }
    .card-menu img{
        width: 50px;
    }

    .card-description{
        font-size: 1.2rem;
        margin-top: 0px;
    }

    .main-description{
        font-size: 1.2rem;
        max-width: 95vw;
        text-align: center;
    }

    .main-information-list{
        max-width: 95vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: -15vh;
        background: linear-gradient(to bottom, transparent 0%, #151412 20%);
        z-index:3;
    }

    .skill-cards-1,.skill-cards-2{
        width: 80vw;
        font-size: 1.1rem;
    }
    .topics{
        width: 90vw;
        font-size: 1.7rem;
    }

    .skill-area{
        width: 85vw;
        gap: 10vh;
    }
    .sub-skill-area{
        flex-wrap: wrap;
        gap: 2vw;
    }

    .project{
        width: 85vw;
    }

    .project-title{
        font-size: 1.4rem;
    }

    .project-information{
        font-size: 1.1rem;
    }

}