style.css

*{
    margin: 0;
    padding: 0;
}
body{
    padding:0px;
    background-image: url(wp.jpg);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}
span{
    position: relative;
    
    font-size: 30px;
    
    color:#f1f1f1;
}
    
    h1{
        transition: 0.2s all;
        overflow: hidden;
        color: #f1f1f1;
        text-align: center;
        padding: 1px,1px;
        font-size: 40px;


}
h2{
    color:white;
    text-decoration-line: underline;
    padding:5px,5px;
    margin:15px;
    font-size:23px;
    

}


#p1:hover{
    transform: scale(1.1);
    transition: 0.3s ease-in-out;
    z-index: 2;
}


.img4 {
    max-height: 60%;
}

h3{
    color:rgb(255, 255, 255);
    text-decoration-line: underline;
    margin:15px;
    font-size:23px;
    text-align: center;
}
h4{
    color:rgb(255, 255, 255);
    text-decoration-line: underline;
    margin:10px;
    font-size:25px;
    text-align: center;
}

.div1{
    display: flex;
    flex-wrap: nowrap;
}
.div2{
    display:flex;
    flex-wrap:nowrap;
}
 .div3 img{
    padding: 50px 70px;
     height:300px;
    width:300px; }
   
.div4 img{
    padding:50px 200px;
    
} */
.class1, .class2{
    display:inline;
}
body .greet {
    position: relative;
    bottom: 0px;
    margin: 0px;

}


/* 
@media screen and (max-width:768px) {
    span {
    position: relative;
    font-size: 20px;
    }
    .img5 {
        height:200px;
        width:200px;
    }
    img4{
        height:150px;
        width:150px;
    }
    body .greet {
        text-align: centre;
        font-size: 30px;
    }
    .div3 img {
        height: 145px;
        width:145px;
        padding:3px 3px;
    }
    .div5 {
        padding:20px 20px;
    }
    .div4 img{
         
         padding: 10px; 

    }
    .img3 {
        height: 40px;
        width:50px;
    }
    .img2 {
        height:40px;
        width:40px;
    }
    .img1 {
        height:40px;
        width:40px;
    }
    .div4 {
        padding:100px ;


    
    }
} */

#lll{padding: 100px;}


@media screen and (max-width:380px) {
    span{
        font-size: smaller;
    }
    #p1{
        height: 90px;
        width: 90px;
    }
    .img4 {
        height:90px ;
        width:90px;
    }
    .img5 {
        height:100px;
        width:110px;
    }
    .img1{
        height:20px;
        width:20px;
    }
    .img2{
        height:20px;
        width:20px;

    }
    .img3{
        height:20px;
        width:30px;
    }



}

@media screen and (max-width:500px) {
    span{
        font-size: 15px;
    }
    .img4{
        height: 150px;
        width: 150px;
    }
    .img5{
        height: 150px;
        width: 150px;
    }
    #p1{
        height: 100px;
        width: 100px;
    }

    .img4{
        height: 180px;
        width: 180px;
    }
    .img5{
        height: 180px;
        width: 180px;
    }
    #p1{
        display: flex;
        flex-direction: column;
        height: 150px;
        width: 150px;
       
    }
    .div4 img{
        padding: 50px 30px;
    }
    .img1{
        height:50px;
        width:50px;
    }
    .img2{
        height:50px;
        width:50px;

    }
    .img3{
        height:50px;
        width:60px;
    }
}

/* }
@media screen and (max-width:768px) {
    span{
        font-size: 23px;
    }
    
    .img1{
        height:40px;
        width:40px;
    }
    .img2{
        height:40px;
        width:40px;

    }
    .img3{
        height:40px;
        width:50px;
    }
    .img5{
        height: 250px;
        width: 250px;
    }
} */