@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: #E6F4F1;
    text-decoration: none;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
    background-color: #1676F3B2;
    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: #B1E1FF;
    
}

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

.pic1{
    width: 1496.84px;
    height: 2959px;
}

.pic2{
    width: 1497px;
    height: 842.06px;
}
.pic3{
    width: 1497px;
    height: 842.06px;
}

.pic4{
    width: 1497px;
    height: 842.06px;
}

.pic5{
    width: 1497px;
    height: 842.06px;
}

.pic6{
    width: 1497px;
    height: 842.06px;
}
.gifs{
    display: flex;
    align-content: center;
}
.pic7{
    width: 1497px;
    height: 842.06px;
}

.pic8{
    width: 1497px;
    height: 842.06px;
}

.pic9{
    width: 1497px;
    height: 842.06px;
}


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

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

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

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

    @media only screen and (max-width: 700px)
    {
        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;}

        .pic1{
            width: 336.96px;
            height: 666.12px;
        }
        .pic2{
            width: 337px;
            height: 189.56px;
        }
        .pic3{
            width: 337px;
            height: 189.56px;
        }

        .pic4{
            width: 337px;
            height: 189.56px;
        }

        .pic5{
            width: 337px;
            height: 189.56px;
        }

        .pic6{
            width: 337px;
            height: 189.56px;
        }

        .gifs{
            display: none;
        }

        .pic7{
            width: 337px;
            height: 189.56px;
        }

        .pic8{
            width: 337px;
            height: 189.56px;
        }
        .pic9{
            width: 337px;
            height: 189.56px;
        }
        .buttons{
            display: flex;
            flex-direction: column;
            gap: 8px;
         }
         .pictures{
            padding-top: 90px;
          }

     
    }