@media (min-width:1200px){
    html,body{
        max-width: 100%;
        overflow-x: hidden;
    }
    .img{
        width: 80px;
        height: 80px;
        border-radius: 100%;
        max-width: 100%;
        max-height: 100%;
    }
  
    body,
    h1,
    h2,
    h3,
    h4,
    h5 {
        font-family: "Raleway", sans-serif
    }

    .w3-third img {
        margin-bottom: -6px;
        opacity: 0.8;
        cursor: pointer
    }

    .w3-third img:hover {
        opacity: 1
    }
    .img2{
        width: 500px;
        height: 500px;
        max-width: 100%;
    }
}

@media (min-width:767px){
    html,body{
        max-width: 100%;
        overflow-x: hidden;
    }
    .img{
        width: 80px;
        height: 80px;
        border-radius: 100%;
        max-width: 100%;
        max-height: 100%;
    }
    #me{
        width: 400px;
        height: 400px;
       
    }
    .img2{
        width: 500px;
        height: 500px;
    }
    body,
    h1,
    h2,
    h3,
    h4,
    h5 {
        font-family: "Raleway", sans-serif
    }

    .w3-third img {
        margin-bottom: -6px;
        opacity: 0.8;
        cursor: pointer
    }

    .w3-third img:hover {
        opacity: 1
    }
}
@media (max-width:768px){
    html,body{
        max-width: 100%;
        overflow-x: hidden;
    }
    .img{
        width: 80px;
        height: 80px;
        border-radius: 100%;
        max-width: 100%;
        max-height: 100%;
    }
    .img2{
       max-width: 100%;
        height: 300px;
        width: 400px;
    
    }
    body,
    h1,
    h2,
    h3,
    h4,
    h5 {
        font-family: "Raleway", sans-serif
    }

    .w3-third img {
        margin-bottom: -6px;
        opacity: 0.8;
        cursor: pointer
    }

    .w3-third img:hover {
        opacity: 1
    }
    #me{
        width: 300px;
        height: 300px;
    }
  
}