@keyframes gradientAnim {
  0% {
    background-position: -5% 0;
  }
  100% {
    background-position: 105% 0;
  }
}
* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f23064;
  /* Old browsers */
  background-image: -moz-linear-gradient(left, #f23064 0%, #ad2ee8 12.5%, #6728d3 25%, #2acbe0 37.5%, #67f230 50%, #67f230 62.5%, #e2e22b 75%, #ce8027 87.5%, #f23064 100%);
  /* FF3.6-15 */
  background-image: -webkit-linear-gradient(left, #f23064 0%, #ad2ee8 12.5%, #6728d3 25%, #2acbe0 37.5%, #67f230 50%, #67f230 62.5%, #e2e22b 85.5%, #ce8027 87.5%, #f23064 100%);
  /* Chrome10-25,Safari5.1-6 */
  background-image: linear-gradient(to right, #f23064 0%, #ad2ee8 12.5%, #6728d3 25%, #2acbe0 37.5%, #67f230 50%, #67f230 62.5%, #e2e22b 75%, #ce8027 87.5%, #f23064 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-repeat: no-repeat;
  background-size: 2000% 400%;
  background-position: 0 0;
  animation-name: gradientAnim;
  animation-iteration-count: infinite;
  animation-delay: 0;
  animation-duration: 60s;
  animation-timing-function: linear;
}

h1 {
  color: #fff;
  font-family: "Segoe UI", "San Franscisco", Calibri, Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: calc(100% + 5vmax);
}
section {
  position: absolute;
  margin-top: 40%;
}
/* credits: https://codepen.io/quentin-feret*/
/*Glassmorphism section*/
#glassmorphism::before {
	content: '';
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	backdrop-filter: blur(5px);
	border-top: 1px solid rgba(255,255,255,0.5);
  border-radius: 8px;
}
#glassmorphism {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
/* 	background: linear-gradient(to bottom, #ff4f8b, #dff1f1); */
	overflow: hidden;
}
#glassmorphism h2 {
	position: absolute;
	font-size: 30px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	color: #fff;
	padding: 20px;
	background: rgba(255,255,255,0.1);
	border-right: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-radius: 10px;
	top: 10%;
}
#glassmorphism .color {
	position: absolute;
	filter: blur(150px);
}
#glassmorphism .color:nth-child(1) {
/* 	background: #ff359b; */
	width: 600px;
	height: 800px;
	top: -350px;
}
#glassmorphism .color:nth-child(2) {
/* 	background: #00d2ff; */
	width: 500px;
	height: 500px;
	bottom: -150px;
	left: 100px;
}
#glassmorphism .color:nth-child(3) {
/* 	background: #fffd07; */
	width: 300px;
	height: 300px;
	bottom: 50px;
	right: 0px;
}
#glassmorphism ul {
	position: relative;
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
#glassmorphism ul li {
	position: relative;
	list-style: none;
	margin: 10px;
}
#glassmorphism ul li a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 80px;
	border-radius: 10px;
	text-decoration: none; 
	color: #fff;
	font-size: 2em;
	border: 1px solid rgba(255,255,255,0.4);
	border-right: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid rgba(255,255,255,0.2);
	box-shadow:  0 5px 40px rgba(0,0,0, 0.1);
	backdrop-filter: blur(2px);
	overflow: hidden;
	transition: 0.5s ease-in-out;
}
#glassmorphism ul li a:hover {
	transform: translateY(-20px);
}
#glassmorphism ul li a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 100%;
	background: rgba(255,255,255,0.5);
	transform: skew(45deg) translateX(150px);
	transition: 0.5s;
}
#glassmorphism ul li a:hover::before {
	transform: skew(45deg) translateX(-150px);
} 
/*Glassmorphism elements */
#glassmorphism .square {
	position: absolute;
	background: rgba(255,255,255,0.1);
	border-radius: 5px;
	backdrop-filter: blur(5px);
	border: 1px solid rgba(255,255,255,0.4);	
	border-right: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid rgba(255,255,255,0.2);
	box-shadow:  0 25px 45px rgba(0,0,0, 0.1);
	z-index: 1;
	animation: animate 10s linear infinite;
	animation-delay: calc(-1s * var(--i));
}
#glassmorphism .square:nth-child(6) {
	width: 30px;
	height: 30px;
	top: 50%;
	left: 25%;
}
#glassmorphism .square:nth-child(7) {
	width: 50px;
	height: 50px;
	top: 65%;
	left: 55%;
}
#glassmorphism .square:nth-child(8) {
	width: 50px;
	height: 50px;
	top: 55%;
	left: 35%;
}
#glassmorphism .square:nth-child(9) {
	width: 25px;
	height: 25px;
	top: 40%;
	left: 85%;
}
#glassmorphism .square:nth-child(10) {
	width: 45px;
	height: 45px;
	top: 47%;
	left: 75%;
}
 @keyframes animate {
 	0%, 100% {
 		transform: translateY(-40px);
 	}
 	50% {
 		transform: translateY(40px);
 	}
 }