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

.header{
width: 100%;
text-align: center;
padding: 10px 0 10px 0;
}

.header h1{
font-size: 70px;
font-weight: bold;
color: white;
text-shadow: 1px -3px 0 #FF8585, 2px 3px 0 #09376F, -3px 3px 0 #0F2949;
}

.header h2{
font-size: 30px;
font-weight: bold;
color: white;
}

p{
text-align: center;
font-size: 20px;
font-weight: bold;
color: white;
}

.p1{
text-align: center;
font-size: 26px;
color: white;
margin: 0 0 35px 0;
}

.red{
text-align: center;
font-size: 25px;
font-weight: bold;
color: yellow;
text-shadow: 0px 0px 15px #FC3636,0px 1px 10px #FC3636;
}

.redbox{
box-shadow: 0px 0px 20px #FC4646, 0 0 15px red;
transition: .2s ease;
}

.redbox:hover{
box-shadow: 0px 0px 25px red, 0 0 28px red;
}

.video iframe{
width: 560px;
height: 350px;
}

@media screen and (max-width: 900px){
.video iframe{
width: 450px;
height: 340px;
}
}

.footer{
margin-top: 60px;
height: 100px;
font-size: 26px;
color: white;
text-align: center;
}

.back a{
text-decoration: none;
text-align: center;
color: black;
font-size: 20px;
padding: 20px;
display: block;
background-color: white;
width: 10%;
position: fixed;
right: 2%;
bottom: 2%;
transition: .2s ease;
}

.back:hover a{
background-color: #8836B7;
font-size: 22px;
padding: 19px;
border-radius: 5px;
}

.rick a{
text-decoration: none;
text-align: center;
font-size: 25px;
font-weight: bold;
color: white;
transition: .2s ease;
}

.rick a:hover{
color: yellow;
font-size: 26px;
}

.content{
display: none;
}

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

.loader{
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
}
.loader .loader-inner{
width: 12px;
height: 12px;
border: 2px solid #f4c842;
margin: 0 auto;
position: absolute;
top: 40px;
left: 0;
right: 0;
animation-iteration-count: infinite;
animation-duration: 1000ms;
}
.loader .loader-inner:nth-child(1){
animation-name: loading-1;
animation-delay: 500ms;
}
.loader .loader-inner:nth-child(2){
animation-name: loading-2;
animation-delay: 0ms;
}
.loader .loader-inner:nth-child(3){
animation-name: loading-3;
animation-delay: 500ms;
}
.loader .loader-inner:nth-child(4){
animation-name: loading-4;
animation-delay: 0ms;
}
@keyframes loading-1{
   50%{ transform: translate(150%,150%) scale(2,2); }
}
@keyframes loading-2{
   50%{ transform: translate(-150%,150%) scale(2,2); }
}
@keyframes loading-3{
   50%{ transform: translate(-150%,-150%) scale(2,2); }
}
@keyframes loading-4{
   50%{ transform: translate(150%,-150%) scale(2,2); }
}

.loader-text{
position: absolute;
top: 60%;
color: #f4c842;
font-size: 23px;
font-weight: bold;
animation: loader-text 1s infinite ease;
}

@keyframes loader-text{
0%{ text-shadow: 0 0 0 #f4c842}
50%{ text-shadow: 0 0 15px #f4c842}
100%{ text-shadow: 0 0 0 #f4c842}
}