body{
	position:relative;
	width:100%;
	margin:0%;
}
header{
	position:fixed;
	width:100%;
	height:1.8cm;
	font-family: 'Lobster Two', sans-serif;
	background: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%);
	z-index:5;
	box-shadow:2px 2px 5px grey;
}
header > nav{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-left:1cm;
	margin-right:1cm;
	
}
header ul{
	display:flex;
	list-style-type:none;
	align-items:center;
	margin:0cm;
	gap:30px;
}
header ul > li{
}
header a{
	text-decoration:none;
	color:black;
	font-size:21px;
}
header button{
	color:black;
	font-size:19px;
	font-family: 'Lobster Two', sans-serif;
	padding:0.1cm;
	background-color:white;
	border-radius:5px;
}
header button:hover{
	background:linear-gradient(100deg,rgba(222, 58, 162, 1) 30%, rgba(224, 55, 159, 1) 46%, rgba(82, 112, 163, 1) 100%);/*Gradient colors */
	color:white;
	font-size:19px;
	box-shadow:2px 2px 5px grey;
	z-index:1;
}
header > nav > h2{
	font-family: 'Audiowide', sans-serif;
	background:linear-gradient(90deg, #2ecc71 53%, #000000 10%);
	-webkit-background-clip: text; /* For Safari/Chrome */
    background-clip: text; /* Standard property */
    color: transparent; /* Hide original text color */
}
/*#40E0D0, #2ecc71*/
main{
	position:absolute;
	width:100%;
	font-family: 'Lobster Two', sans-serif;
	display:flex;
}
aside{
	position:fixed;
	width:17%;
	top:13.815%;
	font-size:20px;
	background-color:white;
	box-shadow:2px 2px 5px grey;
}
aside p{
	margin:0;
	padding:0.15cm;
	padding-left:0.6cm;
	background-color:white;
	box-shadow:1px 1px 3px grey;
}
aside p:hover{			
	background:linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
	color:white;
}
aside > p > a{
	text-decoration:none;
	color:black;
}
#Web-info{
	position:absolute;
	width:83%;
	left:17%;
	margin-top:3cm;
}
#Web-info > #Home{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
}
#Web-info > #Home > section > center > h1{
	margin-bottom:0.8cm;
	background:linear-gradient(100deg,rgba(222, 58, 162, 1) 30%, rgba(224, 55, 159, 1) 40%, rgba(82, 112, 163, 1) 100%);
	-webkit-background-clip: text; /* For Safari/Chrome */
    background-clip: text; /* Standard property */
    color: transparent; /* Hide original text color */
}
#home-content{
	position:absolute;
	width:auto;
	left:5%;
	right:5%;
	margin-top:0.5cm;
}
#home-content > #today > center > .div1{
	position:absolute;
	width:60%;
	left:20%;
	display:flex;
	gap:65px;
	margin-top:0cm;
}
#home-content > #today > center > .div2{
	position:absolute;
	width:60%;
	left:20%;
	display:flex;
	gap:30px;
	margin-top:1cm;
}
#home-content > #button{
	position:absolute;
	width:36%;
	left:32%;
	right:32%;
	margin-top:3.5cm;
	display:flex;
	justify-content:space-between;
}
#home-content > #button > p > button{
	background-color:white;
	padding:0.2cm;
	font-size:18px;
	border:2px solid black;
	border-radius:5px;
	font-weight:bold;
	font-family: 'Lobster Two', sans-serif;
	transform: scale(1.1);
}
#home-content > #button > p > button:hover{
	background:linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%);
	color:white;
	box-shadow:1px 1px 5px grey;
}
#Learn{
	position:absolute;
	width:100%;
	margin-top:8.5cm;
}
#Learn > div{
	position:absolute;
	width:32%;
	padding-left:0.2cm;
	border:2px solid grey;
	border-radius:10px;
	box-shadow:1px 1px 5px grey;
}
#Learn > div:hover{
	margin-top:0.3cm;
	transition:margin-top 0.5s linear 0.2s;
}
#Learn > #CSS{
	position:absolute;
	width:30%;
	left:35%;
}
#Learn > #Js{
	position:absolute;
	width:32%;
	left:68%;
}
#About{
	position:absolute;
	width:100%;
	margin-top:19.5cm;
}
#About11 > h1{
	background:linear-gradient(90deg, #0700b8 25%, #00ff88 100%);
	-webkit-background-clip: text; /* For Safari/Chrome */
    background-clip: text; /* Standard property */
    color: transparent; /* Hide original text color */
}
#About > #About2{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	text-align:center;
}
#About > #About2 > section{
	display:flex;
	justify-content:space-between;
}
#Transition{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:31cm;
}
#Transition > section{
	position:absolute;
	width:64%;
	display:flex;
	justify-content:space-between;
}
#Transition > section > #Syn > div{
	position:absolute;
	width:60%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
#Transition > section > #Ex > div{
	position:absolute;
	width:60%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
#transition-Property{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:46cm;
}
#transition-Property > .Syn-Ex{
	position:absolute;
	width:64%;
	display:flex;
	justify-content:space-between;
}
#transition-Property > .Syn-Ex > .Syn > div{
	position:absolute;
	width:60%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
#transition-Property > .Syn-Ex > .Ex > div{
	position:absolute;
	width:60%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
#transition-delay{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:56cm;
}
#transition-delay > .Syn-Ex{
	position:absolute;
	width:64%;
	display:flex;
	justify-content:space-between;
}
#transition-delay > .Syn-Ex > .Syn > div{
	position:absolute;
	width:60%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
#transition-delay > .Syn-Ex > .Ex > div{
	position:absolute;
	width:60%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
#transition-duration{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:66cm;
}
#transition-duration > .Syn-Ex{
	position:absolute;
	width:64%;
	display:flex;
	justify-content:space-between;
}
#transition-duration > .Syn-Ex > .Syn > div{
	position:absolute;
	width:60%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
#transition-duration > .Syn-Ex > .Ex > div{
	position:absolute;
	width:60%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
#transition-timing-function{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:75.5cm;
}
#transition-timing-function > .Syn-Ex{
	position:absolute;
	width:64%;
	display:flex;
	justify-content:space-between;
}
#transition-timing-function > .Syn-Ex > .Syn > div{
	position:absolute;
	width:60%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
#transition-timing-function > .Syn-Ex > .Ex > div{
	position:absolute;
	width:60%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
#ease{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:85.5cm;
}
#ease .html-ex{
	position:absolute;
	width:64%;
	display:flex;
	gap:50px;
}
#ease .html-ex > div{
	position:absolute;
	width:45%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
#ease .html-ex > .css{
	margin-left:7.5cm;
}
#ease .html-ex > .output{
	margin-left:15cm;
	height:6cm;
}
#ease .html-ex > .output > div{
	width:100px;
	height:100px;
	background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%);
	text-align:center;
	line-height: 100px;
	margin-left:1.8cm;
	border-radius:10px;
	color:white;
	transition: height 2s ease 0s;
}
#ease .html-ex > .output > div:hover{
	height:125px;
}
#ease-in{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:99.5cm;
}
#ease-in .html-ex{
	position:absolute;
	width:64%;
	display:flex;
	gap:50px;
}
#ease-in .html-ex > div{
	position:absolute;
	width:45%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
#ease-in .html-ex > .css{
	margin-left:7.5cm;
}
#ease-in .html-ex > .output{
	margin-left:15cm;
	height:6cm;
}
#ease-in .html-ex > .output > div{
	width:100px;
	height:100px;
	background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%);
	text-align:center;
	line-height: 100px;
	margin-left:1.8cm;
	border-radius:10px;
	color:white;
	transition: width 2s ease-in 0s,  margin-left 2s ease-in 0s;
}
#ease-in .html-ex > .output > div:hover{
	width:125px;
	margin-left:1.45cm;
}
#ease-out{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:113.7cm;
}
#ease-out .html-ex{
	position:absolute;
	width:64%;
	display:flex;
	gap:50px;
}
#ease-out .html-ex > div{
	position:absolute;
	width:45%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
#ease-out .html-ex > .css{
	margin-left:7.5cm;
}
#ease-out .html-ex > .output{
	margin-left:15cm;
	height:6cm;
}
#ease-out .html-ex > .output > div{
	width:100px;
	height:100px;
	background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%);
	text-align:center;
	line-height: 100px;
	margin-left:1.8cm;
	border-radius:10px;
	color:white;
	transition: letter-spacing 2s ease-out 0s;
}
#ease-out .html-ex > .output > div:hover{
	letter-spacing:3px;
}
#ease-in-out{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:127.8cm;
}
#ease-in-out .html-ex{
	position:absolute;
	width:64%;
	display:flex;
	gap:50px;
}
#ease-in-out .html-ex > div{
	position:absolute;
	width:45%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
#ease-in-out .html-ex > .css{
	margin-left:7.5cm;
}
#ease-in-out .html-ex > .output{
	margin-left:15cm;
	height:6cm;
}
#ease-in-out .html-ex > .output > div{
	width:100px;
	height:100px;
	background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%);
	text-align:center;
	line-height: 100px;
	margin-left:1.8cm;
	border-radius:10px;
	color:white;
	transition: font-size 2s ease-in-out 0s;
}
#ease-in-out .html-ex > .output > div:hover{
	font-size:25px;
}
#linear{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:142cm;
}
#linear .html-ex{
	position:absolute;
	width:64%;
	display:flex;
	gap:50px;
}
#linear .html-ex > div{
	position:absolute;
	width:45%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
#linear .html-ex > .css{
	margin-left:7.5cm;
}
#linear .html-ex > .output{
	margin-left:15cm;
	height:6cm;
}
#linear .html-ex > .output > div{
	width:100px;
	height:100px;
	background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%);
	text-align:center;
	font-size:20px;
	line-height: 100px;
	margin-left:1.8cm;
	border-radius:10px;
	color:white;
	transition: color 2s linear 0s;
}
#linear .html-ex > .output > div:hover{
	color:black;
}
#Examples{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:156cm;
}
.all-ex{
	position:absolute;
	width:95%;
	height:5cm;
	left:0%;
	right:0%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
	display:flex;
	align-items:center;
}
.all-ex .tra{
	width:100px;
	height:100px;
	background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%);
	text-align:center;
	line-height: 100px;
	border-radius:10px;
	color:white;
	
}
#Examples > .all-ex .tra:hover{
	height:120px;
	width:120px;
	line-height:120px;
}
#tra-ease{
	transition:height 2s ease 0s, width 2s ease 0s;
	position:absolute;	
	z-index:3;	
	left:8%;
}
#tra-ease-in{
	transition:height 2s ease-in 0s, width 2s ease-in 0s, line-height 2s ease-in 0s;
	position:absolute;
	z-index:3;
	left:25.5%;
}
#tra-ease-out{
	transition:height 2s ease-out 0s, width 2s ease-out 0s, line-height 2s ease-out 0s;
	position:absolute;
	z-index:3;
	left:43%;
}
#tra-ease-in-out{
	transition:height 2s ease-in-out 0s, width 2s ease-in-out 0s, line-height 2s ease-in-out 0s;
	position:absolute;
	z-index:3;
	left:60.5%;
}
#tra-linear{
	transition:height 2s linear 0s, width 2s linear 0s, line-height 2s linear 0s;
	position:absolute;
	z-index:3;
	left:78%;
}
.ease{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:164cm;
}
.ease .html-ex{
	position:absolute;
	width:64%;
	display:flex;
	gap:50px;
}
.ease .html-ex > div{
	position:absolute;
	width:45%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
.ease .html-ex > .css{
	margin-left:7.5cm;
}
.ease .html-ex > .output{
	margin-left:15cm;
	height:6cm;
}
.ease .html-ex > .output > div{
	width:100px;
	height:100px;
	text-align:center;
	line-height: 100px;
	margin-left:1.8cm;
	border-radius:10px;
	color:white;
	animation:ease 2s ease 0s infinite alternate;
}
@keyframes ease{
	from{
		background-color:red;
	}
	to{
		background-color:black;
	}
}
.ease-in{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:181cm;
}
.ease-in .html-ex{
	position:absolute;
	width:64%;
	display:flex;
	gap:50px;
}
.ease-in .html-ex > div{
	position:absolute;
	width:45%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
.ease-in .html-ex > .css{
	margin-left:7.5cm;
}
.ease-in .html-ex > .output{
	margin-left:15cm;
	height:6cm;
}
.ease-in .html-ex > .output > div{
	width:100px;
	height:100px;
	background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%);
	text-align:center;
	line-height: 100px;
	margin-left:1.8cm;
	border-radius:10px;
	color:white;
	animation: ease-in 2s ease-in 0s infinite alternate-reverse;
}
										@keyframes ease-in{
	from{
			margin-left:0cm;
		}
	to{
		margin-left:3.5cm;
	}
}
.ease-out{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:200.5cm;
}
.ease-out .html-ex{
	position:absolute;
	width:64%;
	display:flex;
	gap:50px;
}
.ease-out .html-ex > div{
	position:absolute;
	width:45%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
.ease-out .html-ex > .css{
	margin-left:7.5cm;
}
.ease-out .html-ex > .output{
	margin-left:15cm;
	height:6cm;
}
.ease-out .html-ex > .output > div{
	width:100px;
	height:100px;
	background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%);
	text-align:center;
	line-height: 100px;
	margin-left:1.8cm;
	border-radius:10px;
	color:white;
	animation: ease-out 2s ease-out 0s infinite normal both;
}
@keyframes ease-out{
	from{
		font-family: 'Lobster Two', sans-serif;
		}
	to{
		font-family: 'Audiowide', sans-serif;
	}
}
.ease-in-out{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:217.5cm;
}
.ease-in-out .html-ex{
	position:absolute;
	width:64%;
	display:flex;
	gap:50px;
}
.ease-in-out .html-ex > div{
	position:absolute;
	width:45%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
.ease-in-out .html-ex > .css{
	margin-left:7.5cm;
}
.ease-in-out .html-ex > .output{
	margin-left:15cm;
	height:6cm;
}
.ease-in-out .html-ex > .output > div{
	width:100px;
	height:100px;
	background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%);
	line-height: 100px;
	margin-left:1.8cm;
	border-radius:10px;
	color:white;
	animation: ease-in-out 2s ease-in-out 0s infinite reverse backwards;
}
@keyframes ease-in-out{
	from{
		text-align:left;
		}
	to{
		text-align:center;
	}
}
.linear{
	position:absolute;
	width:90%;
	left:5%;
	right:5%;
	margin-top:235cm;
}
.linear .html-ex{
	position:absolute;
	width:64%;
	display:flex;
	gap:50px;
}
.linear .html-ex > div{
	position:absolute;
	width:45%;
	background:linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
	padding:0.1cm 0.5cm 0.1cm 0.5cm;
	border-radius:10px;
	border:2px dashed purple;
}
.linear .html-ex > .css{
	margin-left:7.5cm;
}
.linear .html-ex > .output{
	margin-left:15cm;
	height:6cm;
}
.linear .html-ex > .output > div{
	width:100px;
	height:100px;
	background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%);
	text-align:center;
	font-size:20px;
	line-height: 100px;
	margin-left:1.8cm;
	border-radius:10px;
	color:white;
	animation: linear 2s linear 0s infinite alternate forwards;
}
@keyframes linear{
	from{
		line-height:50px;
	}
	to{
		line-height:150px;
	}
}