@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300&display=swap');
*
{
	margin:0;
	padding: 0;
	box-sizing: border-box;
	font-family: Roboto;
}
body{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #fff;
}
.square{
	position: relative;
	width: 450px;
	height: 450px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.square span:nth-child(1){
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 3px solid #33bdef;
	border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
	background-color: #29539b;
	background-image: linear-gradient(315deg, #0abcf9 0%, #2c69d1 74%);
	transition: 0.5s;
	animation: animate 6s linear infinite;
}
.square:hover span:nth-child(1){
	border: 3px solid #33bdef;
	background-color: #0abcf9;		
background-image: linear-gradient(315deg, #29539b 0%, #1e3b70 74%);
}
.square span:nth-child(2){
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 3px solid #019ad2;
	border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
	background-color: #29539b;
	background-image: linear-gradient(315deg, #0abcf9 0%, #2c69d1 74%);
	transition: 0.5s;
	animation: animate 4s linear infinite;
}
.square:hover span:nth-child(2){
	border: 3px solid #019ad2;
	background-color: #0abcf9;
background-image: linear-gradient(315deg, #29539b 0%, #1e3b70 74%);
}
.square span:nth-child(3){
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 3px solid #87CEFA;
	border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
	background-color: #29539b;
	background-image: linear-gradient(315deg, #0abcf9 0%, #2c69d1 74%);
	transition: 0.5s;
	animation: animate2 10s linear infinite;
}
.square:hover span:nth-child(3){
	border: 3px solid #87CEFA;
	background-color: #0abcf9;
background-image: linear-gradient(315deg, #29539b 0%, #1e3b70 74%);
}
@keyframes animate
{
	0%
	{
		transform: rotate(0deg);
	}
	100%
	{
		transform: rotate(360deg);
	}

}
@keyframes animate2
{
	0%
	{
		transform: rotate(360deg);
	}
	100%
	{
		transform: rotate(0deg);
	}
}
.content
{
	position: relative;
	padding: 60px 80px;
	color: #fff;
	text-align: center;
	transition: 0.5s;
	z-index: 1000;
}
.content:hover{
	color: #fff;
}
h2{
	font-size: 2em;
}
p{
	font-size: 1.4em;
}
.content a 
{
	position: relative;
	display: inline-block;
	margin-top: 20px;
	border:1px solid #0000CD;
	padding: 16px 18px;
	text-decoration: none;
	color: #fff;
	background: linear-gradient(to bottom, #b7deed 0%, #71ceef 50%, #019ad2 51%, #33bdef 100%);
	border:2px solid #057fd0;
	font-size: 1.4em;
	font-weight: 600;
	border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%;
}
.content a:hover 
{
	background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
	background-color:#019ad2;
	color: #fff;
	border: 2px solid #fff;
}