@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

body,
html {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}
body{
	background-color:#121212;
}

.M_hoop {
	border-radius: 100px 100px 0 0;
	width: 200px;
	height: 100px;
	background-color: black;
	display: inline-block;
	position: relative;
	left: 25px;
	transform: rotate(180deg);
	transform-origin: center bottom;
	animation: hoop1 2s infinite, color 10s infinite;
}

.M_hoop_2 {
	border-radius: 100px 100px 0 0;
	width: 200px;
	height: 100px;
	background-color: black;
	display: inline-block;
	position: relative;
	transform: rotate(180deg);
	transform-origin: center bottom;
	animation: hoop2 2s infinite, color 10s infinite;
}

.M_hoop_mask {
	border-radius: 100px 100px 0 0;
	width: 150px;
	height: 75px;
	background-color: #121212;
	display: inline-block;
	position: relative;
	left: 25px;
	bottom: -12.5px;
}

.M_hoop_mask_2 {
	border-radius: 100px 100px 0 0;
	width: 150px;
	height: 75px;
	bottom: -12.5px;
	background-color: #121212;
	display: inline-block;
	position: relative;
}

.mask_spacing {
	width: 50px;
	height: 150px;
}

.loader {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	position: absolute;
	z-index: -1;
	left: -12.5px;
}

.loader_mask {
	display: flex;
	position: absolute;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	z-index: 1;
	left: -12.5px;
}

.mask_container {
	display: flex;
	position: absolute;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.lower_mask {
	width: 100%;
	height: 104px;
	background-color: #121212;
	position: relative;
	z-index: 2;
	bottom: -102px;
	display: flex;
   justify-content: center;
}
.lower_mask > span:nth-child(1){
	font-family: 'Roboto', sans-serif;
	font-size:49.5px;
	color:white;
	clip-path: inset(0px 500px 0px 0px);
	animation: text 4.5s steps(1) 2s infinite;
	animation-direction:alternate;
	position:absolute;
}

.lower_mask > span:nth-child(2){
	font-family: 'Roboto', sans-serif;
	font-size:42px;
	color:white;
	position:relative;
	left: -162px;
	animation: cursor 4.5s steps(1) 2s infinite, blink 0.5s steps(1) infinite;
	animation-direction:alternate;
}
.lower_mask > span:nth-child(3){
	font-family: 'Roboto', sans-serif;
	font-size:49.5px;
	color:white;
	position:relative;
	left: -204px;
	opacity:1;
	animation: fadein 1s 1;
}

@keyframes hoop1 {
	0% {transform: rotate(-180deg);}
	20%{transform: rotate(0deg);}
	60% {transform: rotate(0deg);}
	80% {transform: rotate(180deg);}
	100% {transform: rotate(180deg);}
}
@keyframes hoop2 {
	0% {transform: rotate(-180deg);}
	20%{transform: rotate(-180deg);}
	40% {transform: rotate(0deg);}
	80% {transform: rotate(0deg);}
	100% {transform: rotate(180deg);}
}
@keyframes color {
	0% {background-color:#1B1B2F}
	19.9%{background-color:#1B1B2F}
	20%{background-color:#FEC260}
	39.9%{background-color:#FEC260}
	40%{background-color:#DA0037}
	59.9%{background-color:#DA0037}
	60%{background-color:#346751}
	79.9%{background-color:#346751}
	80%{background-color:#864879}
	99.9%{background-color:#864879}
	100%{background-color:#1B1B2F}
}

@keyframes text {
	0%{clip-path: inset(0px 500px 0px 0px);}
	10%{clip-path: inset(0px 500px 0px 0px);}
	15%{clip-path: inset(0px 350px 0px 0px);}
	20%{clip-path: inset(0px 323px 0px 0px);}
	25%{clip-path: inset(0px 300px 0px 0px);}
	30%{clip-path: inset(0px 265px 0px 0px);}
	35%{clip-path: inset(0px 265px 0px 0px);}
	40%{clip-path: inset(0px 213px 0px 0px);}
	45%{clip-path: inset(0px 185px 0px 0px);}
	50%{clip-path: inset(0px 169px 0px 0px);}
	55%{clip-path: inset(0px 145px 0px 0px);}
	60%{clip-path: inset(0px 145px 0px 0px);}
	65%{clip-path: inset(0px 105px 0px 0px);}
	70%{clip-path: inset(0px 80px 0px 0px);}
	75%{clip-path: inset(0px 53px 0px 0px);}
	80%{clip-path: inset(0px 28px 0px 0px);}
	85%{clip-path: inset(0px 0px 0px 0px);}
	100%{clip-path: inset(0px 0px 0px 0px);}
}
@keyframes cursor {
	0%{left: -162px;}
	10%{left: -162px;}
	15%{left: -132px;}
	20%{left: -105px;}
	25%{left: -78px;}
	30%{left: -52px;}
	35%{left: -34px;}
	40%{left: 4px;}
	45%{left: 31px;}
	50%{left: 50px;}
	55%{left: 76px;}
	60%{left: 82px;}
	65%{left: 115px;}
	70%{left: 141px;}
	75%{left: 165px;}
	80%{left: 192px;}
	85%{left: 218px;}
	100%{left: 218px;}
}

@keyframes blink{
	0%{opacity:0%}
	50%{opacity:100%}
	100%{opacity:0%}
}
@keyframes fadein{
	0%{opacity:0;}
	100%{opacity:1;}
}