project.css

nav {
	text-transform: uppercase;
	flex: 0 0 auto;
	padding: 10px 0;
	
	width: 100%;
	background: black;
	z-index: 100;
	position:sticky;
	top:0;
	left:0;
	right:0;
  }


  nav ul {
	list-style-type: none;
  }
  
  nav ul li {
	margin: 0 5px;
  }
  
  nav ul li a {
	display: block;
	color: pink;
	background: transparent;
	text-decoration: none;
	padding: 10px;
	border-radius: 10px;
	font-size: 20px;
	transition: color 1s ease, background 1s ease, padding 1s ease;
  }
  
  nav ul li a:hover {
	color: #f5f5f5;
	padding-left: 60px;
	background: pink;
  }
  
  #nav-top {
	display: flex;
	justify-content: space-between;
	padding: 20px 20px 20px 10px;
  }
  
  #nav-top h3 {
	font-size: 30px;
	padding: 9px 20px;
	color: pink;
	/* border: 3px solid; */
	border-bottom: 3px solid;
	border-radius: 30px;
	transition: color 2s ease, background 2s ease;
  }
  
  #nav-top h3:hover {
	background: pink;
	color: #f5f5f5;
  }
  
  #menu-btn {
	padding: 5px;
	border: 2px solid pink;
	cursor: pointer;
	align-self: center;
  }
  
  .bar1,
  .bar2,
  .bar3 {
	height: 5px;
	width: 35px;
	background-color: pink;
	margin: 5px 0;
	transition: transform 0.3s ease;
  }
  
  .turn .bar1 {
	transform: rotate(-45deg) translate(-7px, 6px);
  }
  
  .turn .bar2 {
	opacity: 0;
  }
  
  .turn .bar3 {
	transform: rotate(45deg) translate(-7px, -8px);
  }
  
  @media screen and (min-width: 690px) {
	nav {
	  display: flex;
	  align-items: baseline;
	  flex-wrap: wrap;
	  padding: 0 20px;
	}
  
	#menu-btn {
	  display: none;
	}
  
	nav ul {
	  flex: 1 1 auto;
	  display: flex !important;
	  /*    important*/
	  flex-wrap: wrap;
	}
  
	nav ul li {
	  flex: 1 0 125px;
	}
  
	nav ul .icon {
	  flex: 0 0 20px;
	}
  
	nav ul a {
	  text-align: center;
	}
  
	nav ul a:hover {
	  padding: 10px !important;
	}
  
	#nav-top {
	  padding: 10px;
	}
  }

.mainbody{
	width:100%;
	height:100%;
	background-color: black;
	position:fixed;
	left:0;
	right:0;
}




.title{
	padding-left:0px;
	font-size:20px;
	font-weight:bold;
	margin-top:0px;
	color:white;
	font-size:20px;
	padding-right:0px;
	color:#45b6fe;
	font-family: 'Orbitron', sans-serif;

}

body{
font-weight:bold;
font-size:20px;
background-image:linear-gradient(#FFC0CB,#800080,#FFC0CB);
font-family: 'Gayathri', sans-serif;
}
a{
	text-decoration:none;

}

 .logo{
	color:white;
	font-size:36px;
	font-weight:bold;
	list-style: none;

}
.logo{
	
	animation-name:py;
	animation-duration:5s;
	animation-delay:2s; 
	animation-iteration-count:infinite;
	text-align:center;
	font-family: 'Orbitron', sans-serif;

}
@keyframes py{
	0% {color:red;}
	20% {color:pink;}
	40% {color:yellow;}
	60%{color:blue;}
	80%{color:lightgreen;}
	100%{color:orange;}

}
.content{
	margin-bottom:200px;
	margin:50px;
}
.p1{
	animation-name:py;
	animation-duration:5s;
	animation-delay:2s; 
	animation-iteration-count:infinite;
	text-align:center;
	animation-direction:reverse;
	color:white;
	font-size:72px;
	text-align:center;
	margin-top:100px;

}


span{
	color:white;
	font-size:55px;
}
.sign{
	color:white;
	border-bottom:3px solid gray;
	font-size:60px;
	letter-spacing: 10;
	font-family: 'Orbitron', sans-serif;
	margin-top:50px;
	text-align:center;
}

.signup{
	color:white;
	font-weight:bold;
	font-size:60px;
	text-align:center;
	letter-spacing:3;
	font-family: 'Orbitron', sans-serif;
}
.box{
	margin-top:50px;
	text-align:center;
	

}
p{
	color:white;
	font-weight:bold;
	font-size:72px;

}
.button{
	height:80px;
	width:160px;
	color:white;
	background-color:gray;
	font-size:40px;
	margin-top:50px;
	border-radius:10%;
}
.button:hover{
	background-color:lightblue;
}
input{
	height:50px;
	width:200px;
	margin-top:20px;
	margin-bottom:20px;
	background-color:lightpink;
	font-size:30px;
	color:#800080;
}
footer{
	width:100%;
	height:200px;
	background-color:#F8F8FF;
}
footer div{
	color:pink;
	font-size:30px;
	margin-top:80px;
	float:left;
	padding-right:50px;
	padding-left:50px;
}
.dev{
	font-size:50px;
	font-weight:bold;
	color:gray;
	text-align:center;
	margin-bottom:50px;
}
.lesson{
	color:white;
	font-size:80px;
	text-align:center;
	font-weight:bold;
	border-bottom:3px solid gray;
	height:auto;
	width:auto;
	background-color:lightblue;
	margin-left:30px;
	margin-right:30px;
	text-align:left;
	padding:100px 100px 100px 100px;
	
	margin-top:100px;

}
.lessons{
	color:white;
	animation-name:py;
	animation-duration:3s;
	animation-delay:1s; 
	animation-iteration-count:infinite;
	text-align:center;
	animation-direction:alternate;
	margin-top:100px;
	border-bottom:3px solid gray;
}
.def{
	color:#6A0DAD;
	font-size:30px;
	font-weight:bold;
	margin-bottom:10px;
	letter-spacing:5;
	border-bottom:3px solid gray;
	margin-bottom:20px;
	font-family: 'Orbitron', sans-serif;
	

}
.con{
	font-size:20px;
	color:#E75480;
}
img{
	margin-top:20px;
	border:4px solid lightpink;
	}
.stat{
padding:50px 50px 50px 50px;
color:purple;
font-size:70px;
text-align:center;
}
#sco{
padding:50px 50px 50px 50px;
color:black;
font-size:90px;
text-align:center;
}
.res{
	background-color:lightblue;
	margin-top:200px;
	margin-left:300px;
	height:500px;
	width:800px;
}





.toptop{
    background-color:black;
    color:white;
   
    text-align:center;
    padding:25%;
}
#o1,#o2,#o3{
    color:white;
    font-size: 50px;
}
#o1{
animation:fadeIn;
animation-iteration-count: 1;
animation-delay: 0s;
animation-duration: 5s;
}
#o2{
    animation:fadeIn;
animation-iteration-count: 1;

animation-duration: 5s;
display:none;
}
#o3{
    animation:fadeIn;
animation-iteration-count: 1;

animation-duration: 5s;
display:none;
}


input{
	color:white;
	border-radius:30px;
	border:4px solid white;
	outline:none;
}
input:focus{
	box-shadow:4px 4px 4px 4px blue;

}



#comment{
	height:200px;
	width:300px;
	color:white;
	border-radius:30px;
	border:4px solid white;
	background-color:pink;
	font-size:26px;
}

#comment:focus{
	box-shadow:4px 4px 4px 4px blue;

}


/* Typewriter Animation */
.typewriter{
	width: max-content;
	margin-left:47%;
	transform: translateX(-47%);
}
.typewriter h1 {
	/* font-family:  */
	overflow: hidden; 
	border-right: .15em solid orange; 
	white-space: nowrap; 
	margin: 0 auto; 
	letter-spacing: .15em; 
	animation: 
	  typing 4.5s steps(70, end) .5s infinite,
	  blink-caret .5s step-end infinite;
  }
  
  /* The typing effect */
  @keyframes typing {
	from { width: 0 }
	to { width: 100% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
	from, to { border-color: transparent }
	50% { border-color: #ee4646;
	border-width: 2px; }
  }


  /* Ends */

/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
  
/* Modal Content/Box */
.modal-content {
	background-color: #fefefe;
	margin: 15% auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 80%; /* Could be more or less, depending on screen size */
}
  
/* The Close Button */
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}
  
.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}