index.css

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Ubuntu', sans-serif;
}

body{
    background-color:rgb(153, 187, 216);
    /* background-color: rgb(50, 82, 123); */
}

.Navbar-Box{

    display: flex;
    flex-direction: row;
    background-color:rgb(153, 187, 216);
    box-shadow: 0 0 8px;
    color: rgb(81, 85, 126);
    height: 75px;
    transition: 1.5s box-shadow, height 1.5s;
}
.Navbar-Box:hover{
    box-shadow: 0 0 50px;
    height: 80px;
}







.zenkai{
    height: 80px;
    font-family: 'Bebas Neue';
    color: aliceblue;
    font-size: 80px;
    position: relative;
    bottom: 10px;
    left: 10px;
    font-style: bold;
    stroke: black;
    stroke-width: 10px;
    cursor: pointer;
    transition: color 1s;
    
}
.zenkai:hover{
    color:rgb(81, 85, 126);
    
}





.navbar-home{
    margin-top: 25px;
}


.anchor-home{
    flex:1;
    position: relative;
    left: 300px;
    color:aliceblue;
    text-decoration: none;
    margin-top: 25px;
    transition: color 0.4s, font-size 0.4s;

}
.anchor-home:hover{
    color: rgb(81, 85, 126);
    font-size: 24px;
    

}
.homepage{
    color: aliceblue;
    display: none;
}


.anchor-home:hover + .homepage{
    display: flex;
    flex-direction: column;
    position: relative;
    top: 200px;
    left: 200px;
    font-size:50px;
    
    
}

.home_title{
    position: relative;
    bottom: 150px;
    left: 100px;
    font-size: 80px;
}

/* to manage the width extension problem with homepage text, we will split the texts*/








.navbar-portfolio{
    margin-top: 25px;
}
.anchor-portfolio{
    flex:2;
    position: relative;
    left:400px;
    color:aliceblue;
    text-decoration: none;
    margin-top: 25px;
    transition: color 0.4s, font-size 0.4s;

}
.anchor-portfolio:hover{
    color: rgb(81, 85, 126);
    font-size: 24px;

}
.portfolio{
    display: flex;
    flex-direction: column;
    position: relative;
    bottom: 150px;
    left: 100px;
    font-size: 80px;
    color: aliceblue;
}


.portfolio-carousel{
    display: none;
    position: relative;
    top: 120px;
    left: 60px;
    width: 1100px;
    height: 500px;
    padding: 50px;
    background-color: rgb(153, 187, 216);
}


.anchor-portfolio:hover + .portfolio-carousel{
    display: block;
}

.carousel-image{
    background-image: url(image1.png);
    width: 110%;
    height: 600px; 
    position: relative;
    bottom: 130px;
    /* left: 80px; */
    right: 80px;
    animation: changeImage 8s linear infinite;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}

@keyframes changeImage{
    3%{
        background-image: url(image1.png);
    }
    15%{
        background-image: url(image2.png);
    }
    30%{
        background-image: url(image3.png);
    }
    45%{
        background-image: url(image4.png);
    }
}












.navbar-about{
    margin-top: 25px;
}
.anchor-about{
    flex:3;
    position: relative;
    left: 500px;
    color:aliceblue;
    text-decoration: none;
    margin-top: 25px;
    transition: color 0.4s, font-size 0.4s;
}
.anchor-about:hover{
    color: rgb(81, 85, 126);
    font-size: 24px;
}
.aboutpage{
    color: aliceblue;
    display: none;
}


.anchor-about:hover + .aboutpage{
    display: flex;
    flex-direction: column;
    position: relative;
    top: 75px;
    left: 150px;
    font-size:80px;
    
    
}





.navbar-contact{
    margin-top: 25px;
}
.anchor-contact{
    flex:4;
    position: relative;
    left: 600px;
    color: aliceblue;
    text-decoration: none;
    margin-top: 25px;
    transition: color 0.4s, font-size 0.4s;
}
.anchor-contact:hover{
    color: rgb(81, 85, 126);
    font-size: 24px;

}
.contactpage{
    color: aliceblue;
    display: none;
}


.anchor-contact:hover + .contactpage{
    display: flex;
    flex-direction: column;
    position: relative;
    top: 80px;
    left: 200px;
    font-size:80px;
}


    







/* .search-box{
    margin-left: 400px;
    margin-top: 12px;
}
.search-input{
    height: 40px;
    width: 150px;
    transition: height 1.5s, width 1.5s;
}

.search-input:hover{
    height: 50px;
    color: rgb(81, 85, 126);
    width: 180px
} */



.punchline-text{
    /* margin-left: 100px; */
    position: relative;
    left:900px;
    top: 24px;
    margin-top: 3px;
    font-size: 15px;
    width: 200px;
    height: 0px;
    color: aliceblue;
    transition: color 1s, transform 1s;
}


.punchline-text:hover{
    color: rgb(81, 85, 126);
    transform: rotateZ(2deg) rotateZ(-2deg) rotateZ(-2);
    /* width: 180px */
}


/*Navbar Ends here...*/


.Title{
    margin-left: 625px;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    color:  aliceblue;
    margin-top: 200px;
    font-size: 50px;
    overflow: hidden;
    transition: color 0.8s, font-size 0.7s, transform 1s, display 1s;
    cursor: pointer;
    width: auto;
    
}

.Title:hover{   
    color: rgb(81, 85, 126);
    font-size: 80px;
    /* -ms-transform: skewY(20deg); IE 9 */
    transform: skewY(20deg);
    text-shadow: 0 0 10px;
    
}



.Title:hover + .Intro1{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 
}






/*About me data*/
.Intro1{
    display: none;
    flex: 1;
    flex-direction: column;
    text-align: center;
    margin-top: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: aliceblue;
    white-space: pre-line;
    transition: transform 1s;
}

.Intro2{
    display: none;
    flex:2;
    width: 300px;
    text-align: center;
    margin-top: 10px;
    margin-left: 630px;
    font-family: Arial, Helvetica, sans-serif;
    color: aliceblue;

}