style.css

@keyframes slideInRight{
    0%{opacity:0;transform:translateX(100%)
    }
    100%{opacity:1;transform:translateX(0)}
}
*{
    box-sizing:border-box;
    margin:0;
    padding:0
}
body{
    background-color:#030302;color:#f2f0ee
}nav{
    padding:1.2rem 3rem;
    align-content:center;
    justify-content:space-between;
    height:20vh
}
nav h5{
    font-size:1rem
}
#about_me,.nav_menu,nav{
    display:flex
}
#Contact hr,#Project hr,#Skills hr{
    margin:auto auto 2.5rem
}
.Contect_me_button,form button{
    background-color:#062ab8
}
.nav_menu{
    gap:1.5rem;
    width:70%;
    justify-content:flex-end
}
.Projects_container,.Skills_container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr))
}
.nav_menu li{
    list-style-type:none;
    font-weight:700;
    font-size:.95rem;
    cursor:pointer
}
a{
    text-decoration:none;
    color:inherit
}
.active{
    color:#336fd1
}
#Resume,.Contect_me_button{
    border:none;
    padding:.5rem 1rem;
    color:#f2f0ee;
    font-size:.8rem;
    font-weight:700;
    cursor:pointer;
    margin-top:.5rem    
}
.nav_menu li:hover{
    transition:250ms ease-in;color:#336fd1
}
#landing_page{
    display:flex;
    flex-direction:column;
    height:65vh;
    justify-content:center;
    align-items:center;
    gap:.5rem
}
#landing_page h3{
    font-size:1.7rem
}
span{
    background:linear-gradient(120deg,#062ab8,#7b7693);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}
.Contect_me_button:hover,.Project_container button:hover,form button:hover{
    transition:.2s ease-in;
    background-color:#336fd1
}
#about_me{
    gap:5rem;
    padding:6rem;
    width:100%;
    justify-content:center;
    align-items:center
}
#about_me div h3{
    font-size:1.4rem;
    font-weight:700
}
#about_me div hr{
    width:20%;
    border:1px solid #062ab8;
    margin-bottom:.7rem
}
#about_me div p{
    font-size:.75rem;
    font-weight:700;
    margin-bottom:.6rem
}
.about_me_image{
    height:69vh
}
#Resume{
    background-color:#3f3d56;
    margin-right:.5rem   
}
#Project,#Skills{
    padding:4.5rem
}
#Project h3,#Skills h3{
    text-align:center;
    font-size:1.9rem
}
#Skills hr{
    width:9.5rem;
    border:1px solid #062ab8
}
.Skills_container{
    gap:1rem
}
.image_container{
    height:10rem;
    border-radius:4px;
    cursor:pointer
}
.Project_container:hover,.image_container:hover{
    transition:250ms;
    transform:scale(1.1)
}
.image_container img{
    height:100%;
    width:100%
}
#Project hr{
    width:10rem;
    border:1px solid #062ab8
}
.Projects_container{
    gap:1.5rem;
    height:70%
}
.Project_container{
    height:fit-content;
    border-radius:4px;
    cursor:pointer;
    background:linear-gradient(120deg,#062ab8,#7b7693)
}
.Project_container h4{
    color:#030302;
    font-size:1rem;
    text-align:center;
    margin-top:.25rem
}
.Project_container p{
    padding:.1rem .5rem;
    color:#030302;
    font-size:1rem;
    margin:.35rem 0
}
.Project_container button,form button{
    border:none;
    color:#f2f0ee;
    font-weight:700;
    cursor:pointer
}
.Project_container img{
    height:14rem;
    width:100%
}
.Project_container button{
    background-color:#3f3d56;
    padding:.5rem 1rem;
    font-size:.8rem;
    margin-left:40%;
    margin-bottom:.4rem
}
#Contact{
    height:80vh;
    padding:2rem
}
#Contact h3{
    text-align:center;
    font-size:1.8rem
}
#Contact hr{
    width:10.5rem;
    border:1px solid #062ab8
}
input,textarea{
    padding:.9rem .8rem;
    outline:0;
    font-size:1rem;
    display:block;
    margin-left:4%;
    width:92%;
    margin-bottom:.6rem;
    border:none;
    border-radius:.325rem;
    background:#c7c4d8
}
form button{
    margin-top:.5rem;
    margin-left:4%;
    padding:1rem;
    font-size:1rem;
    width:92%;
    border-radius:7px
}
.error,.recive{
    margin-left:4%;
    margin-top:1rem;
    text-align:center;
    padding:.7rem .8rem;
    font-size:1rem;
    width:92%;
    border:none;
    font-weight:700;
    position:relative;
    animation:.35s ease-in-out forwards slideInRight
}
.error{
    background-color:#bf0606
}
.recive{
    background-color:#16ad16
}
@media (max-width:768px){
    nav{
        padding:1.2rem 1rem
    }
    .nav_menu{
        gap:1rem;
        justify-content:center;
        width:100%
    }
    .nav_menu li{
        font-size:.9rem
    }
    .about_me_image_conatainer,nav h5{
        display:none
    }
    #landing_page h3{
        font-size:1.1rem
    }
    #landing_page{
        height:48vh
    }
    #Resume{
        margin-right:0
    }
    .about_me_text_container{
        display:flex;
        flex-direction:column;
        gap:.2rem;
    }
    #Contact{
        height:60vh
    }
}
@media (max-width:430px){
    #Project,#Skills{
        padding:3.5rem
    }
}