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

/* Navbar */

.navbar{
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: rgba(0,0,0,0.5);
}

.navbar ul{
    display: flex;
    list-style: none;
    margin: 20px 0px;
}

.navbar ul li{
    font-family: century;
    font: size 1.1rem;
    font-weight: bold;
}

.navbar ul li a {
    text-decoration: none;
    color: white;
    padding: 8px 26px;
    transition: all .5s ease;
}

.navbar ul li a:hover{
    background-color: white;
    color: black;
    box-shadow: 0 0 10px white;
}

/*Home Part*/

#home{
    display: flex;
    flex-direction: column;
    background-color: rgba(0,0,0,0.5);
    height: 840px;
    justify-content: center;
    align-items: center;
    color: white;
}

#home::before{
    content: "";
    position: absolute;
    top: 0;
    right:0;
    height: 880px;
    width:100%;
    z-index: -1;
    opacity: .7;

}
.logos{
    margin: 20px 10px;
}
.main{
    display: flex;
    flex-direction: column;
   /* border: 1px solid white;*/
    position: absolute;
    align-items: center;
    right: 10%;
    top: 30%;
}

.headings{
    font-family: century;
    font-size: 2rem;
    text-align: center;
    margin: 40px 0px;
}

.btn{
    padding: 10px 35px;
    background-color: transparent;
    border: 1px solid white;
    color:  white;
    outline: none;
    transition: .6s ease;
}

.btn:hover{
    cursor: pointer;
    background-color: white;
    color: black;
    box-shadow: 0 0 6px white, 0 0 12px white, 0 0 18px white;
    font-weight: bold;
}

#about{
    display: flex;
    flex-direction: column;
}

#pic{
    display:flex;
}

#pic img{
    width: 575px;
    height: 400px;
}

#introduction{
    display: flex;
    flex-direction: column;
    text-align: justify;
    padding: 10px;
}

#introduction h2{
    font-size: 2rem;
    margin-bottom: 20px;
}

#portfolio{
    display: flex;
    flex-direction: column;
    background-color: yellowgreen;
    color: WHITE;
    padding: 20px;
}

#portfolio h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    align-items: center;
    text-align: center;
}

.por{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    box-sizing: border-box;
    margin: 20px 10px;
}


#contactMe{
    display: flex;
    flex-direction: column;
    background-color: rgba(0,0,0,0.5);
    color: WHITE;
    align-items: center;
    padding: 20px;
    background-color: darkcyan;
    text-align: center;
}

#contactMe h2{
    font-size: 2rem;
    margin-bottom: 20px;
    align-items: center;
    text-align: center;
    
}

.contact{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    box-sizing: border-box;
    align-items: center;
    text-align: center;
}

#experiences{
    display: flex;
    flex-direction: column;
    background-color: orange;
    color: WHITE;
    align-items: center;
    text-align: center;
    padding: 20px;
}

#techKnowledge{
    display: flex;
    flex-direction: column;
    background-color: brown;
    color: WHITE;
    align-items: center;
    text-align: center;
    padding: 20px;
}

#techKnowledge h2{
    font-size: 2rem;
    margin-bottom: 20px;
    align-items: center;
    text-align: center;
}


#certificates{
    display: flex;
    flex-direction: column;
    background-color: violet;
    color: WHITE;
    align-items: center;
    text-align: center;
    padding: 20px;
}


#experiences h2{
    font-size: 2rem;
    margin-bottom: 20px;
    text-align: center;
    align-items: center;
}

.experience{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    box-sizing: border-box;
    align-items: center;
    text-align: center;
}

.animate-charcter{
	text-transform: uppercase;
	background-image: linear-gradient(
	-225deg,
	#231557 0%,
	#44107a 37%,
	#ff1361 70%,
	#fff800 100%
	);
	background-size: auto auto;
	background-clip: border-box;
	background-size: 200% auto;
	color: #fff;
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: textclip 2s linear infinite;
	display: inline-block;
	font-size: 190px;
	}
	
	@keyframes textclip {
	to {
	background-position: 200% center;
	}
}

#certificates h2 {
    margin-bottom: 20px;
}