@import url('https://fonts.googleapis.com/css2?family=Londrina+Outline&display=swap');
*{
	margin: 0;
	padding: 0;
}
body{
	background: #000;
}
.ana{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
.kutu{
	display: flex;
	flex-direction: row;
}
.ortala{
}
span div{
	display: inline-block;
}
span{
	color: #fff;
	font-family: 'Londrina Outline', cursive;
	font-size: 150px;
	filter: blur(1px);
	cursor: default;
}
span:nth-child(1){
	animation-name: sefck-1;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	animation-timing-function: linear;
}
#ilk:hover ~ body{
	background-color: red;
}
span:nth-child(2){
	animation-name: sefck-2;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	animation-timing-function: linear;
}
span:nth-child(3){
	animation-name: sefck-3;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	animation-timing-function: linear;
}
span:nth-child(4){
	animation-name: sefck-4;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	animation-timing-function: linear;
}
span:nth-child(5){
	animation-name: sefck-5;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	animation-timing-function: linear;
}
.me{
	width: 100%;
	height: 100%;
	margin-top: 35px;
	max-width: 200px;
	border: 1px solid #fff;
	border-radius: 50%;
	animation-name: sefck;
	animation-iteration-count: infinite;
	animation-duration: 3s;
	margin-right: 50px;
	animation-timing-function: linear;
}
.social{
	display: flex;
	justify-content:space-between;
}
.social button{
	border: none;
	background: transparent;
	cursor: pointer;
}
.social button svg{
	filter: blur(1px);
	max-width: 160px;
	width: 100%;
}
.social button:nth-child(2){
	padding-left: 4px;
}
.social button:nth-child(1) svg g{
	animation-name: sefck-1;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	animation-timing-function: linear;
	opacity: 0;
}
.social button:nth-child(2) svg g{
	animation-name: sefck-2;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	animation-timing-function: linear;
	opacity: 0;
}
.social button:nth-child(3) svg g{
	animation-name: sefck-3;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	animation-timing-function: linear;
	opacity: 0;
}
.social button:nth-child(4) svg g{
	animation-name: sefck-4;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	animation-timing-function: linear;
	opacity: 0;
}
.social button:nth-child(5) svg g{
	animation-name: sefck-5;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	animation-timing-function: linear;
	opacity: 0;
}
@keyframes sefck{
	0%{
		border: 5px solid #2CA84F;
	}
	20%{
		border: 5px solid #AD71F5;
	}
	40%{
		border: 5px solid #58F584;
	}
	60%{
		border: 5px solid #F5A940;
	}
	80%{
		border: 5px solid #A8824C;
	}
	100%{
		border: 5px solid #2CA84F;
	}
}
@keyframes sefck-1{
	0%{
		fill:#2CA84F;
		color: #2CA84F;
		text-shadow: 0 0 16px #2CA84F;
	}
	20%{
		fill:#AD71F5;
		color: #AD71F5;
		text-shadow: 0 0 16px #AD71F5;
	}
	40%{
		fill:#58F584;
		color: #58F584;
		text-shadow: 0 0 16px #58F584;
		opacity: 1;
	}
	60%{
		fill:#F5A940;
		color: #F5A940;
		text-shadow: 0 0 16px #F5A940;
		opacity: 0;
	}
	80%{
		fill:#A8824C;
		color: #A8824C;
		text-shadow: 0 0 16px #A8824C;
		opacity: 1;
	}
	100%{
		fill:#2CA84F;
		color: #2CA84F;
		text-shadow: 0 0 16px #2CA84F;
	}
}
@keyframes sefck-2{
	0%{
		fill:#AD71F5;
		color: #AD71F5;
		text-shadow: 0 0 16px #AD71F5;
		opacity: 1;
	}
	20%{
		fill:#58F584;
		color: #58F584;
		text-shadow: 0 0 16px #58F584;
	}
	40%{
		fill:#F5A940;
		color: #F5A940;
		text-shadow: 0 0 16px #F5A940;
		opacity: 0;
	}
	60%{
		fill:#A8824C;
		color: #A8824C;
		text-shadow: 0 0 16px #A8824C;
		opacity: 1;
	}
	80%{
		fill:#2CA84F;
		color: #2CA84F;
		text-shadow: 0 0 16px #2CA84F;
		opacity: 0;
	}
	100%{
		fill:#AD71F5;
		color: #AD71F5;
		text-shadow: 0 0 16px #AD71F5;
		opacity: 1;
	}
}
@keyframes sefck-3{
	0%{
		fill:#58F584;
		color: #58F584;
		text-shadow: 0 0 16px #58F584;
	}
	20%{
		fill:#F5A940;
		color: #F5A940;
		text-shadow: 0 0 16px #F5A940;
	}
	40%{
		fill:#A8824C;
		color: #A8824C;
		text-shadow: 0 0 16px #A8824C;
		opacity: 1;
	}
	60%{
		fill:#2CA84F;
		color: #2CA84F;
		text-shadow: 0 0 16px #2CA84F;
		opacity: 0;
	}
	80%{
		fill:#AD71F5;
		color: #AD71F5;
		text-shadow: 0 0 16px #AD71F5;
	}
	100%{
		fill:#58F584;
		color: #58F584;
		text-shadow: 0 0 16px #58F584;
		opacity: 1;
	}
}
@keyframes sefck-4{
	0%{
		fill:#F5A940;
		color: #F5A940;
		text-shadow: 0 0 16px #F5A940;
		opacity: 0;
	}
	20%{
		fill:#A8824C;
		color: #A8824C;
		text-shadow: 0 0 16px #A8824C;
		opacity: 1;
	}
	40%{
		fill:#2CA84F;
		color: #2CA84F;
		text-shadow: 0 0 16px #2CA84F;
		opacity: 0;
	}
	60%{
		fill:#AD71F5;
		color: #AD71F5;
		text-shadow: 0 0 16px #AD71F5;
		opacity: 1;
	}
	80%{
		fill:#58F584;
		color: #58F584;
		text-shadow: 0 0 16px #58F584;
	}
	100%{
		fill:#F5A940;
		color: #F5A940;
		text-shadow: 0 0 16px #F5A940;
		opacity: 0;
	}
}
@keyframes sefck-5{
	0%{
		fill:#A8824C;
		color: #A8824C;
		text-shadow: 0 0 16px #A8824C;
	}
	20%{
		fill:#2CA84F;
		color: #2CA84F;
		text-shadow: 0 0 16px #2CA84F;
	}
	40%{
		fill:#AD71F5;
		color: #AD71F5;
		text-shadow: 0 0 16px #AD71F5;
		opacity: 1;
	}
	60%{
		fill:#58F584;
		color: #58F584;
		text-shadow: 0 0 16px #58F584;
	}
	80%{
		fill:#F5A940;
		color: #F5A940;
		text-shadow: 0 0 16px #F5A940;
		opacity: 0;
	}
	100%{
		fill:#A8824C;
		color: #A8824C;
		text-shadow: 0 0 16px #A8824C;
	}
}
@media screen and (max-width:767px){
	.kutu{
		flex-direction: column;
	}
	.me{
		margin: 0;
		align-self: center;
	}
}