/* responsive the computer */

 
@media (min-width:1708px) {

        header{
                height: 1300px;
        }

        #about{
                height: 1000px;
        }

        #about .imgWidth img{
                width: 700px;
        }

        .ulList a li {
                font-size: 31px;
                padding: 50px;
        }

        .ulList a li::before{
                border-bottom-width: 5px;
                bottom: 30px;
        }

        .ulList a li:hover::before{
                width: 60px;
        }

        .text{
                font-size: 32px;
        }
        .text p{
                font-size: 32px;
                line-height: 50px;
        }
        .card{
                width: 500px;
        }
        .portfolio-card{
                width: 700px;
        }
        .title h3{
                font-size: 50px;
        }
        .title h2{
                font-size: 70px;
        }
        
}

@media (min-width:2130px) {
        .ulList a li {
                font-size: 35px;
        }
        .text p{
                font-size: 33px;
                line-height: 50px;
        }
        .card{
                width: 500px;
        }
        .portfolio-card{
                width: 700px;
        }
}


@media (min-width:1952px){
        .card{
                width: 600px;
        }
}

/* responive the laptop */

@media (max-width: 1145px) {
        header{
                background-size: cover;
        }
        .ulList a li{
                font-size: 20px;
                padding: 25px;
        }
        .title{
                font-size: 27px;
        }

        .text{
                font-size: 20px;
        }

        .portfolio-card{
                width: 431px;
        }

        .portfolio-card .img{
                width: 400px;
                height: 600px;
        }
        .col-55{
                width: 100%;
        }
        
        #about{
                height: 1200px;
        }

        #skills{
                height: 900px;
        }
        
}

/* responsive the tablet */

@media (max-width: 991px) {

        .logo a{
                padding: 10px;
        }

        .ulList {
                position: absolute;
                right: -100%;
                width: 100%;
                top: 0;
                height: 100vh;
                background-color: #000;
                display: block;
        }
        .ulList a li {
                top: 10%;
                left: 50%;
                transform: translate(-50%,-50%);
                padding-bottom: 20px;
        }

        .none{
                display: block;
        }
        .footer{
                display: block;
                text-align: center;
                
        }

        .footer .col-25{
                width: 100%;
        }
}

@media (max-width: 880px) {
        #about{
                height: 1150px;
        }
}

@media (max-width: 678px) {
        #about{
                height: 1070px;
        }
}

@media (max-width: 610px) {
        #skills{
                height: 1000px;
        }
}

@media (max-width: 483px) {
        .title{
                font-size: 21px;
        }

        #about{
                height: 1100px;
        }
        .portfolio-card{
                width: 300px;
        }
        .portfolio-card .img{
                width: 300px;
                height: 500px;
        }
}

@media (max-width: 552px) {
        .title{
                font-size: 21px;
        }

        .text{
                font-size: 17px;
        }

        
        .portfolio-card{
                width: 270px;
        }
        .portfolio-card .img{
                width: 270px;
                height: 450px;
        }
}