:root {
    --border-color: #eee;
    --size: 20px;
    --time: 3s;
}
body{
    background-color: rgb(10, 10, 9);
}

#text{
    font-family: cursive;
    font-size: large;
    text-align: center;
    color: #a82222;
    display: block;
    visibility: visible;
}

.paper {
	
	overflow: hidden;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0; left: 0;
    display: flex;
    align-items: center;
    align-content: center; 
    justify-content: center;  
	z-index: 100000;
}

.paper__element {
	
	border-radius: 80%;
    animation: preloader var(--time) linear infinite;
    position: relative;
}

.paper__element:before {
	content: '';
	display: block;
	border-radius: 100%;
	background-color: var(--main-color);
	height: calc(var(--size)/2);
	width: calc(var(--size)/2);
	border: 1px solid var(--main-color);
}

.paper__inner {
	position: absolute;
	top: 7px;
	right: -10px;
	height: 0;
	width: calc(var(--size)/2);
	background-color: var(--border-color);
    animation: getHeight var(--time) linear infinite;
}

@keyframes preloader {
    0% { 	border: calc(var(--size)/2) solid var(--border-color); }
    50% { 	border: calc(var(--size)/2) solid var(--border-color); }
	100% { 	border: calc(var(--size)/2) solid var(--border-color); }
}

@keyframes getHeight {
    0%{ height: 0px;}
	50% { height: 100px; }
	100% { height: 0px; }
}