html {
	position: relative;
}
body {
	margin: 0;
	font-family: inter; color: var(--blueTwo); 
}
a {

}
div {
	border: px solid red; box-sizing: border-box;
}
td {
	border: px solid green;
}
input:focus {
	outline: none;
}
textarea:focus {
	outline: none;
}

.centerText {
	position: absolute; top: 50%; transform: translate(0,-50%); 
	width: 100%; text-align: center;
}
.center {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.centerX {
	position: relative; left: 50%; transform: translate(-50%,0);
}
.centerY {
	position: relative; top: 50%; transform: translate(0,-50%);
}
.line {
	position: relative;
}
	.rightSide {
		height: 100%;
		position: absolute; top: 0; right: 0;
	}

	
	
@font-face {
	font-family: inter;
	src: url(../fonts/inter.ttf);
}

:root {
	--blueOne: rgb(75,102,171);
	--blueTwo: rgb(92,124,205);
	--orangeOne: rgb(226,144,71);
	--orangeTwo: rgb(255,128,0);
	--orangeHover: rgb(249,231,215);
}


@keyframes loading {
	0% {transform: translate(-50%,-50%) rotate(0);}
	100% {transform: translate(-50%,-50%) rotate(360deg);}
}
.loadingAnimation {
	width: 43px; height: 43px;
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	background: url(../images/loadingAnimation.png) no-repeat; background-size: contain; background-position: center;
	animation: loading linear 2s infinite;
	display: none;
}

body::after {
   position: absolute; width: 0; height: 0; overflow: hidden;
   content: url(../images/wheel/1White.png) url(../images/wheel/2White.png) url(../images/wheel/3White.png) url(../images/wheel/4White.png) url(../images/wheel/5White.png) url(../images/loadingAnimation.png); 
}