@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

li, a{
    font-family: "Nunito Sans";
    font-weight: 400;
    font-size: 16px;
    color: #516BEB;
    text-decoration: none;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
    background-color: #E1EEFBB2;
    height: 30px;
    width: 100%;
    position: fixed;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}


.logo {
    cursor: pointer;
    width: 252px;
    height: 40px;
    margin-top: 10px;
}
.nav_links {
    list-style: none;
}

.nav_links li {
    display: inline-block;
    padding: 0px 20px;
}

.nav_links li a {
    transition: all 0.3s ease 0s;
    padding: 15px;
}

.nav_links li a:hover {
    opacity: 50%;
}
.body{
    background-color: #FFFFFF;
    
}



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

.p1{
width: 1146px;
height: 644.63px;
margin-top: 30px;
}

.p2{
    width: 1147px;
    height: 3449.42px;
    }

.p3{
    width: 1147px;
    height: 1216.18px;
}

.gif{
    display: flex;
    flex-direction: column;
}

.p4{
    width: 1147px;
    height: 645.19px;
}

.p5{
    width: 1147px;
    height: 645.19px;
}

.p6{
    width: 1147px;
    height: 645.19px;
}
.p7{
    width: 1147px;
    height: 1282.59px;
}

.buttons{
    display: flex;
    margin-top: 74px;
    margin-bottom: 74px;
    align-items: center;
    gap: 30px;
    align-content: center;
    justify-content: center;
}

.button1{
    color: #1676F3;
    border: solid;
    border-radius: 10px;
    font-style: normal;
    font-weight: 500px;
    font-size: 24px;
    background-color: #FFFFFF;
    width: 294px;
    height: 55px;
}
.button1:hover{
    cursor: pointer;
    background-color: #1676F3;
    color: #FFFFFF;
}

.button2{
    color: #1676F3;
    border: solid;
    border-radius: 10px;
    font-style: normal;
    font-weight: 500px;
    font-size: 24px;
    background-color: #FFFFFF;
    width: 294px;
    height: 55px;
}
.button2:hover{
    cursor: pointer;
    background-color: #1676F3;
    color: #FFFFFF;}

    .footer{
        display: flex;
        font-family: "Nunito Sans";
        color: #1676F3;
        justify-content: center;
        justify-items: center;
        height: 50px;
    }


    @media only screen and (max-width: 700px) and (min-width: 400px)
    {
        header{
            align-items: center;
            align-content: center;
            justify-items: center;
            justify-content: center;
        }
        
        .logo{
            margin-left: 90px;
            margin-top: 10px;
        }
        
        .resume{
            margin-right: 95px;
            margin-left: -30px;
        }
        .aboutmine{
            display:none
        }
        
        .working{
            display: none;}

            .p1{
                width: 346px;
                height: 194.46px;
                margin-top: -30px;
                }
                
                .p2{
                    width: 346px;
                    height: 1040.54px;
                    }
                
                .p3{
                    width: 346px;
                    height: 366.87px;
                }
                
                .gif1{
                    margin-left: 80px;
                  
                   
                   
                }
                .gf1{
                    width: 138px;
                    height: 140.86px;
                  
                    
                }
                .gf2{
                    width: 138px;
                    height: 140.86px;
                }
                .gf3{
                    width: 138px;
                    height: 140.86px;
                }
                .gf4{
                    width: 138pxx;
                    height: 140.86px;
                   
                }
                .gf5{
                    width: 138px;
                    height: 140.86px;
                    
                }
                .gf6{
                    width: 138px;
                    height: 140.86px;
                }
                
                .p4{
                    width: 346px;
                    height: 194.63px;
                }
                
                .p5{
                    width: 346px;
                    height: 194.63px;
                }
                
                .p6{
                    width: 346px;
                    height: 194.63px;
                }
                .p7{
                    width: 346px;
                    height: 386.9px;
                }
                .buttons{
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                 }
                 .pictures{
                    padding-top: 90px;
                  }
    }