.background{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
}

.text{
width: 100%;
height: 100%;
position: relative;
}

.text h1{
color: #fff;
font-size: 570%;
font-weight: 300;
font-family: FangSong;
text-align: center;
letter-spacing: 5px;
padding-top: 50px;
text-transform: uppercase;
animation: flicker 1s infinite alternate;
}

h1::-moz-selection{
color: var(--neon-text-color);
}

h1::selection{
color: #FF364D(--neon-text-color);
}

h1:focus{
outline: none;
}

@keyframes flicker{
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {

text-shadow:
-0.2rem -0.2rem 1rem #FF6A7A,
0.2rem 0.2rem 1rem #C32F3F,
0 0 22px var(--neon-text-color),
0 0 24px var(--neon-text-color),
0 0 26px var(--neon-text-color),
0 0 28px var(--neon-text-color),
0 0 28px var(--neon-text-color);
}

10%, 20%, 24%, 55%{        
text-shadow: none;
font-size: 580%;

}    
}

:root{
--neon-text-color: #FF6767;
}

.cat1{
position: absolute;
left: 0;
top: 0;
opacity: 0.05;
}

.cat1:hover{
opacity: 1;
transition: .2s ease;
}

.cat2{
position: absolute;
right: 0;
top: 0;
}

@media screen and (max-width:950px){
.cat2{
display: none;
}
}

@media screen and (max-width:900px){
.cat1{
width: 30%;
}
}

.start{
overflow: visible;
display: block;
width: 289px;
height: 128px;
position: fixed;
left: 38%;
bottom:10%;
background-image: url("30.gif");
border-radius: 5px;
}

.start:hover{
width: 360px;
height: 310px;
transition: .2s ease;
background-image: url("33.gif");
border-radius: 30px;
}

.start .tooltiptext{
visibility: hidden;
position: absolute;
top: 10%;
right: 100%;
opacity: 0;
-ms-transform: rotate(20deg);
transform: rotate(-20deg);
z-index: -1;
}

.start:hover .tooltiptext{
visibility: visible;
opacity: 1;
}

@media screen and (max-width:900px){
.start{
position: fixed;
left: 25%;
bottom: 20%;
z-index: 2;
}
}

.text1{
display: inline-block;
background-color: #FF4141;
width: 120px;
height: 46px;
overflow: hidden;
position: fixed;
bottom: 4%;
left: 4%;
padding: 3px 3px 0 4px;
border-radius: 15px;
border: 3px solid #D01313;
text-align: center;
font-size: 30px;
color: white;
}

.text1:hover{
width: 90%;
height: 46px;
font-size: 26px;
padding-top: 6px;
font-weight: bold;
transition: .2s ease;
}

@media screen and (max-width:900px){
.text1:hover{
font-size: 20px;
height: 10%;
}
}

.text2{
overflow: hidden;
}

.text2 a{
display: block;
background-color: #251E2B;
text-decoration: none;
color: white;
font-size: 20px;
padding: 15px;
position: fixed;
right: 4%;
bottom: 4%;
transition: .2s ease;
}

.text2:hover a{
background-color: white;
color: black;
font-size: 21px;
border: 1px solid #693C41;
}

.content{
display: none;
}

.loader-wrapper{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #1D295B;
display: flex;
justify-content: center;
align-items: center;
}

.loader{
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid white;
animation: loader 2s infinite ease;
}

.loader-inner{
vertical-align: top;
display: inline-block;
width: 100%;
background-color: white;
animation: loader-inner 2s infinite ease-in;
}

@keyframes loader{
0% { transform: rotate(0deg);}
25% { transform: rotate(180deg);}
50% { transform: rotate(180deg);}
75% { transform: rotate(360deg);}
100% { transform: rotate(360deg);}
}

@keyframes loader-inner{
0% { height: 0%;}
25% { height: 0%;}
50% { height: 100%;}
75% { height: 100%;}
100% { height: 0%;}
}

.load-text{
position: absolute;
top: 60%;
font-size: 20px;
color: white;
font-weight: bold;
animation: load-text 6s infinite ease;
letter-spacing: 3px;
}

@keyframes load-text{
0% { font-size: 20px;}
25% { font-size: 19.5px;}
50% { font-size: 20px;}
75% { font-size: 19px;}
100% { font-size: 20px;}
}