body{
    margin: 0;
}
.wave{
    background-color: #3399cc;
    height: 100vh;
    max-width: 100vw;
    clip-path: polygon(100% 0%, 0% 0% , 0.00% 96.24%, 20.00% 87.53%, 40.00% 77.41%, 60.00% 66.53%, 80.00% 55.55%, 100.00% 45.18%);
}
.aboutMe{
display: grid;
grid-template-columns: min-content 1fr;
align-items: center;
position: absolute;
top: 0%;
margin: 5vw;

}

.aboutMe>section{
    max-height: fit-content;
    background-color: #fff;
    padding-left: 1vw;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}
.aboutMe>picture>img{
    max-width: 40vw;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

}
.aboutMe>picture{
    max-width: 40vw;
}

.aboutMe>picture>span{
    position: absolute;
    top: 85%;
    left: 10%;
    font-size: 40px;
    color:#fff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.restOfInfo{
    display: none;
}
.socialMedia{
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}
.socialMedia>a>img{
    max-width:50px;  
      
}
a>svg:hover{
    fill: #3399cc;
}
.myWork{
    display:flex;
    flex-wrap: wrap;
    gap: 3vw;
    margin: 4vw;
        
}

.myWork>section{
    display: grid;
    width: 20vw;
    grid-template-rows:60% 40%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    overflow:auto;

}
.myWork>section>section{
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 26px 26px;
    grid-template-rows: auto auto;
    padding-top:.10rem;
    
}
.myWork>section>section>h2{
    margin: 0;
    font-size: large;
}
footer{
    display: flex;
    padding: 4vw;
    gap: 2vw;
    color:#fff ;
    background-color: #3399cc;
    
}
footer svg:hover{
    fill: #fff;

}

svg{
    vertical-align: middle;
    padding: 1px;
}
@media (max-width:768px) {
    .aboutMe{
        background-color: #fff;
        height: fit-content;
        margin: 10vw;
    
    padding: 0;
        grid-template-columns: 1fr 1fr;
        grid-template-rows:min-content max-content;
        grid-template-areas: 'picture  section''rest rest';
;
        gap: 0;
        
    }
    
    .aboutMe>section{
        box-shadow: none;
        grid-area: section;
        margin-left: -10%;
        
    }
    .aboutMe>section>h1{
        text-align: center;
    }
    .socialMedia{
        display: none;
    }
    .aboutMe picture{
        position: relative;
        top: -10%;
        left: -20%;
        max-width: 50vw;
        grid-area: picture;
    }
    .aboutMe img{
        width: 100%
    }
    .aboutMe>picture>span{
        font-size: 20px;
        top:0%;
        width: fit-content;
        
    }
    .restOfInfo{
        grid-area: rest;
        margin-top: -4%;
        padding-left: 1%;
    }
    .myWork{
        display: grid;
        grid-template-columns:auto auto;
        grid-template-areas: 'title title';
    }
    .myWork h1{
        grid-area: title;
    }
    .myWork>section{
        width: fit-content;
    }
    footer img{
        max-width: 45vw;
    }
}
@media (max-width:480px) {
    .aboutMe{
        background-color: transparent;
        position: relative;
        display: block;
        text-align: center;
    }

    .restOfInfo{
        display: none;
    }
    .aboutMe picture{
        position: absolute;
        top:-30vh;
        left: 23%;
        
        max-width: 50vh;
    }
    .aboutMe img{
        width: 100%;
        
    }
    .aboutMe>section{
        padding-top: 1rem;
    }
    .myWork{
        grid-template-columns: auto;
        grid-template-areas: 'title';
        text-align: center;
    }
    .myWork img{
        max-height: 100%;
        
    }
    .aboutMe>picture> span{
        top:80%;
        left:5%;
    }
    .wave{
        max-height: 45vh;
    }
    
    .socialMedia{
        display: block;
    }
    footer{
        flex-direction: column;
    }
    footer picture img{
        max-width: 100vw;
        margin-left:-4vw;
        margin-bottom:-5vw;
    }
}