style.css

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

body{
    font-family: 'Poppins', sans-serif;
}
header{
    background:linear-gradient(to right,#63bdfc,#8591ff );
    display: flex;
    height: 10vh;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: +1;
}
.logo-container, .nav-links{
    
    display: flex;
}
.logo-container{
    padding: 0px 0px 0px 150px;
 flex:1
}
.logo{
    font-weight: 400;   
}
h4{
    font-weight: 700;
    padding:5px
}
nav{
flex: 1;
padding:  0px 150px 0px 0px;
}
.nav-links{
justify-content: space-around;
list-style: none;
}
.nav-link{
    color: cornsilk;
    text-decoration: none;
    font-weight: 500;
}
.nav-link:hover{
    font-weight: 700;
    color: white;
}
.main-container{
    margin-top:70px ;
}
.presentation{
    display: flex;
    padding: 0px 9vw 0px 9vw;

    min-height: 100vh;
    align-items: center;    
}
.introduction{
    flex:1
}
.intro-text h1{
    font-size: 72px;
    background: linear-gradient(to right,#63bdfc,#8591ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
}
.intro-text h3{
    margin-bottom: 5px;
    font-size: 35px;
    color: #585772;
    font-weight: 300;
}
.intro-text p{
    color: #403f55;
    font-size: 16px;
    font-weight: 400;
}
.cover{
    flex:1   
}
.cover img{
    
    height: 90vh;
    filter: drop-shadow(0px 7px 4px black);
    /* animation: drop 0.5s ease; */
}
.big{
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: -1;
    opacity: 0.5;
    height: 80%;
}
.mid{
    position: absolute;
    top: 30%;
    right: 30%;
    z-index: -1;
    height: 60%;
}
.small{
    position: absolute;
    bottom: 0%;
    left: 30%;
    z-index: -1;
    opacity: 0.3;
}
/* @keyframes drop{
    0%{
        opacity: 0;
        transform: translateY(-80px);

    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
} */
.projects{
    
    padding: 0px 9vw 0px 9vw;
    min-height: 100vh;
    align-items: center; 
    background:linear-gradient(to right,#63bdfc,#8591ff);   
}
.question{
    padding-top: 70px;
    padding-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between ;
}
.question a{
    font-weight: 300;
    font-size: 20px;
    color: cornsilk;
    text-decoration: none;
    padding-right: 50px;
}
.question h2{
    padding-left:25vw;
    font-weight: 500;
    font-size: 40px;
    color:cornsilk;
}
.question button{
    background: transparent;
    border: 1px white;
}
h3{
    color: cornsilk;
    font-weight: 400;
    font-size: 30px;   
}
.content{
    display: flex;
    align-items: center;
}
.categories{
    flex:1;   
}
.clipart{
    flex: 0.5;
    justify-content:space-between;
    
}

.cdwork{
    height: 55vh;
}
.work a{
    font-weight: 400;
    font-size:20px;
    text-decoration: none;
    color: black;
}
.flutter, .unity,.cp,.hack{    
    padding-bottom: 20px;
}
.work{
    list-style: none;
}
.about{
    display: flex;
    padding: 0px 9vw 0px 9vw;
    min-height: 90vh;
    align-items: center; 
    background:cornsilk;  
}
.abt-clipart{
flex:1;
}
.abt-clipart img{
    height:40vh;
}

.abt-content{   
    flex:1.5;
    align-items:center;
}
.abtquestion{
    text-align: center; 
    font-size: 26px;
    color:#8591ff;
    padding-bottom:20px ;
    
}
.abtquestion h2{
    padding-top:60px ;
    font-weight: 700;
}
.abt-text{
    padding-bottom:40px ;
    font-size: 18px;
    
    color:#585772;
}
.abt-text p{
    font-weight: 300;
    text-align: center;
}
.btn{
    float: inherit;
    padding: 3px 300px 3px 300px;
    justify-content: center;
}

.hire-btn{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    display: block;
    width: 100%;
    border: none;
    background-color: #8591ff ;
    border: 0.8px solid #8591ff;
    color: white;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    border-radius: 10px;
}
.hire-btn:hover{
    border: 0.8px solid #585772;
    background: cornsilk ;
    color: #8591ff ;
}
.contact{
    display: flex;
    padding: 0px 9vw 0px 9vw;

    min-height: 30vh;
    align-items: center; 
    background:linear-gradient(to left,#63bdfc,#8591ff);   
}
.display-text{
    flex: 1;  
}
.display-text h2{
    font-weight: 500;    
}
.con-links{
    list-style: none;
    display: flex;
    flex:0.8;
    justify-content: space-around;    
}
.con-link img{
    height: 5vh;   
}

.cdthink{ 
    height: 20vh;
    padding-left: 4.4vw;
}
.footer{
    display: flex;
    padding: 0px 9vw 0px 9vw;

    min-height: 10vh;
    align-items: center; 
    background:linear-gradient(to left,#63bdfc,#8591ff);  
    justify-content: center;
}
.quote{
    flex:1;
}
.quote h2{
    padding-left: 24.9vw ;
    font-weight: 300;
    font-size: 16px;
}
html{
    scroll-behavior: smooth;
}
@media screen and (max-width:800px)
{
    *{
        margin: 0px;
        padding: 3vw;
        box-sizing: border-box;
    }
    .logo{
        padding: 0px 0px 0px 10px;
    }
    .logo-container{
        justify-content: flex-start;
    }
    .presentation{
        flex-direction: column;
        justify-content: center;
    }
    .introduction{
        margin-top: 5vh;
        text-align: center;
    }
}