@import url(https://fonts.googleapis.com/css?family=Montserrat);
html, body {
margin:0px;
padding:0px;
overflow-x:hidden;
height:600vh;
background-color: teal;
color:#ffffff;
font-family:'Montserrat', sans-serif;
font-size: calc(15px + 0.390625vw);
z-index: 1;
}
section{
display:grid;
place-items:center;
align-content:center;
min-height:100vh;
z-index:2;
}
section div{
    display:grid;
    place-items:center;
    align-content:center;
    z-index:2;
}

/*start nav menu code*/
#nav-toggle{
    height:3rem;
    width:3rem;
    position:fixed;
    z-index:3;
    background-color:bisque;
    left:51.5%;
    bottom:1rem;
    transform:translateX(-50%);
    border:none;
    border-radius: 5rem;
    outline:none;
    box-shadow: 0rem 0rem 5rem rgb(0 0 0 / 35%);
    cursor:pointer;
    transition: transform, background-color;
    transition-timing-function: ease;
    transition-duration: 400ms;
}
#nav-toggle:hover{
    transform: translateX(-50%) scale(1.04);
}
#nav-toggle:active{
    transform: translateX(-50%) scale(.096);
}
#nav-toggle > i{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%) scale(0.9);
    color: rgb(0 0 0 / 75%);
    font-size: 1.75rem;
    opacity:0;
}

body:not([data-nav="true"]) > #nav-toggle:hover > .open{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
}
body[data-nav="true"] > #nav-toggle > .close{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
}
#nav-links > .nav-link{
    text-decoration: none;
}
#nav-links > .nav-link > .nav-link-label{
    color:white;
    font-size:1.25rem;
    margin:0rem;
    text-transform:uppercase;

}
#nav-links > .nav-link > .nav-link-image{
    width:max(20vw, 400px);
    aspect-ratio: 1.8 / 1;
    border-radius:0.5rem;
    margin-top:0.75rem;
    object-fit: cover;
}
nav{
    height:40vh;
    width:100%;
    position:fixed;
    left:0px;
    bottom:0px;
    z-index:3;
    background-color: black;
    box-shadow: 0px -10px 10px rgb(0 0 0 / 35%);
    padding-left: 2rem;
    padding-right: 2rem;
    visibility:hidden;

}
#nav-links{
    display:flex;
    gap:clamp(1rem, 2vw, 2rem);
    margin-top: clamp(2rem, 2vw, 3rem);
    padding:0rem clamp(1rem, 2vw);
    transform:translateY(70%) scale(0.9);
    transition: transform 500ms cubic-bezier(.13, .53, .38, .97);
    transition-duration: 0ms;
}
body[data-nav="true"] > nav >#nav-links{
    transform:translateY(0%) scale(1);
    transition-duration: 400ms;
}
body[data-nav="true"] > nav{
    visibility:visible;
    overflow-x: scroll;
}
/*End nav menu code*/
a{
color:#ffffff;
text-decoration: none;
}
a:hover{
    color:#FF7474;
    transition:.5s;

}
/*scroll animation*/
.hidden{
opacity:0;
transition:all 1s;
filter:blur(5px);
transform: translateX(-100%);
}
@media(prefers-reduced-motion){
    .hidden{
        transition:none;
    }
}
.show{
opacity:1;
filter:blur(0);
transform:translateX(0);
}
.menu:nth-child(2){
    transition-delay:200ms;

}
.menu:nth-child(3){
    transition-delay:300ms;

}
.menu:nth-child(4){
    transition-delay:400ms;

}
.menu:nth-child(5){
    transition-delay:500ms;

}
/*end scroll animation*/
/*wave svgs*/
.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    z-index: 2;
}

.wave svg {
    position: relative;
    display: block;
    width: calc(189% + 1.3px);
    height: 127px;
    transform: rotateY(180deg);
}

.wave .shape-fill {
    fill: #FF7474;
}

.topwave{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
}

.topwave svg {
    position: relative;
    display: block;
    width: calc(189% + 1.3px);
    height: 127px;
    transform: rotateY(180deg);
}

.topwave .shape-fill {
    fill: #FF7474;
}
.portfoliowave{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    overflow: hidden;
    line-height: 0;
    transform:rotate(180deg);
    z-index: 2;
}

.portfoliowave svg {
    position: relative;
    display: block;
    width: calc(189% + 1.3px);
    height: 127px;
    transform: rotateY(180deg);
}

.portfoliowave .shape-fill {
    fill: teal;
}
/*about wave*/
.aboutwave{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    z-index: 2;
}

.aboutwave svg {
    position: relative;
    display: block;
    width: calc(189% + 1.3px);
    height: 127px;
    transform: rotateY(180deg);
}

.aboutwave .shape-fill {
    fill: #FF7474;
}

/*End about wave*/
/*contact wave*/
.contactwave{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    overflow: hidden;
    line-height: 0;
    transform:rotate(180deg);
    z-index: 2;
}

.contactwave svg {
    position: relative;
    display: block;
    width: calc(189% + 1.3px);
    height: 127px;
    transform: rotateY(180deg);
}

.contactwave .shape-fill {
    fill: teal;
}
/*End contact wave*/
/*end wave svgs*/

/*page divs*/
.aboutPage, .contactPage, .portfolioPage,.homepage{
    background-color: teal;
    height:100vh;
    width:100vw;
    z-index: 2;
    position: relative;
}
.contactPage, .portfolioPage{
    background-color: #FF7474;
}
.portfolioPage{
    height:300vh;
}
.header{
    margin-top:5rem;
    margin-bottom:2rem;
}
/*end page divs*/
/*portfolio projects cards*/
.card{
    position: relative;
    background-color: white;
    height:80vh;
    width:45vw;
    color:black;
    padding-top:0;
    margin:1rem;
    box-shadow:0 0 20px rgba(0,0,0,0.2);
    display:block;
    border-radius: .75rem;
}
.card-image{
    margin-bottom: 0;
    border-radius: .75rem;
    position: relative;
    width:100%;
    height: 60%;
    aspect-ratio: 1.8 / 1;

}
.card-body{
    padding-top:0;
    padding-left:1rem;
    padding-right:1rem;
    padding-bottom:.5rem;
    margin-top: 0;
}
.Git-Button{

    position:absolute;
    bottom:.5rem;
    left:47.5%;
    margin-top:2rem;
    height:3rem;
    width:3rem;
    background-color:transparent;
    z-index:3;
    border:none;
    border-radius: 5rem;
    outline:none;
    box-shadow: 0rem 0rem 5rem rgb(0 0 0 / 35%);
    cursor:pointer;
    transform: scale(.90);
}
.Git-Button:hover{
    transform:scale(1);

}
.Git-Button:active{
    transform:scale(1.09);
}
.Git-Button > i{
    background-color: transparent;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    color:#333;
    font-size: 3rem;
}
.Git-Button > i:hover{
    color:#FF7474;
    transition:.5s;
}

/*End portfolio projects cards*/

/*contact form styling*/
.contactform{
    width: 40vw;
    height: 50vh;
    margin: 2rem auto;
    border:2px solid;
    padding: 2rem;
    margin-top:0;
}

.contactform > label{
    display:block;
    padding:.2rem;
}
.contactform >input,textarea{
    display:block;
    width: 100%;
    border-radius: 10px;
    border:none;
    padding:.5rem;
    font-size: 16px;
    font-family:'Montserrat', sans-serif;
}
.contactform >input,textarea:focus{
    outline:none;
}

.contactform >input{
    height:1rem;
}
.contactform >textarea{
    height:7rem;
}

#send-btn{
    border:0;
    background-color:bisque;
    border-radius: 10px;
    width:60%;
    padding: .4rem;
    margin-top: 1.5rem;
    margin-bottom:1rem;
    margin-left:20%;
    margin-right: 3rem;
    transition:.3s;
    font-family:'Montserrat', sans-serif;
    font-size: 16px;
}
#send-btn:hover{
    cursor:pointer;
    opacity:.8;
}
#send-btn:active{
    opacity: .5;
}
/*end of contact form styling*/
.about-me-div{
    display:grid;
    justify-content: center;
    margin:2rem;
    
}
/*mobile styling*/
@media only screen and (max-width:959px){
    .contactform{
        width:70vw;
    }
    .card{
        width:80vw;
    }
    .topwave svg{
        height:105px;
    }
    .aboutwave svg{
        height:105px;
    }
    .portfoliowave svg{
        height:105px;
    }
    .wave svg{
        height:105px;
    }
    .contactwave svg{
        height:105px;
    }
    .card-image{
        aspect-ratio: 1/1;
    }
}
@media only screen and (max-width:630px){

    .topwave svg{
        height:85px;
    }
    .aboutwave svg{
        height:85px;
    }
    .portfoliowave svg{
        height:85px;
    }
    .wave svg{
        height:85px;
    }
    .contactwave svg{
        height:85px;
    }
    .card{
        height:95vh;
    }
    .portfolioPage{
        height:350vh;
    }
    .Git-Button{
        left:45.5%
    }
}
    @media only screen and (max-width:330px){

        .topwave svg{
            height:65px;
        }
        .aboutwave svg{
            height:65px;
        }
        .portfoliowave svg{
            height:65px;
        }
        .wave svg{
            height:65px;
        }
        .contactwave svg{
            height:65px;
        }
}