portfolio.css

*{
    padding:0;margin:0;box-sizing: border-box;
}
.tapestry{
    font-family: 'Tapestry', cursive;
}
.brush{
    font-size:50px;
    
    font-family: 'Water Brush', cursive;
}
header{
    width:100%;
    height:100vh;
    position:relative;
}
nav{
    width:100%;
    height: 100px;
    display:flex;
    justify-content: space-between;
    align-items:center;
    padding:0px 100px;
    
}
.menu a{
text-decoration: none;
padding:10px 15px;
font-size:20px;
color:white;
font-style: bold;

}
.menu a:last-child{
    background:blue;
    color:white;
    border-radius:8px;


}
.header-text{
    max-width:500px;
    position:absolute;
    top:30%;
    left:10%;
    z-index: -1;
}
.header-text h1{
    text-decoration: none;
    font-size:3em;
    color:rgb(2, 2, 2);
    font-family: 'Ms Madi', cursive;
   
}
.header-text p{
    font-size: 20px;
    margin-bottom:30px;
}
.header-text a{
    text-decoration: none;
    background:blue;
    color:white;
    font-size:20px;
    padding :10px 20px;
    font-family:'Times New Roman', Times, serif;
    border-radius:8px;

}
#more{
    background:transparent;
    color:red;
    box-shadow: 2px 0px 0px grey;

}
.icon{
   position:fixed;
   top:50%;
   left:0;
   transform:translateY(-50%);
   display: flex;
   flex-direction:column;
}
.icon i{
    color:white;
    padding:10px;
    font-size:20px;
    margin:5px 0px;
    background:blue;
}
.icon i:hover{
    background:transparent;
    transition:0.4s;
    border:1px solid black;
    color:black;
    border-radius:8px;
}
.box{
    width:60%;
    height:70%;
    position:absolute;
    top:0;
    right:0;
    background:rgb(238, 250, 9);
    z-index: -2;
}
#mukesh{
    width: 390px;
    height:100;
    position:absolute;
    right:10%;
    top:0;
    z-index:-1;
    
}
.header-text a:hover{
   background-color: white;
   color:black;
}
.main{
    display: flex;

    margin:auto;
    width:100vw;
    height:500px;
    top: 100px;
    background:rgb(238, 250, 9);
    border-radius:16px;
    
    padding:10px;

}