html {
font-size: 50px;
font-family: Arial, Helvetica, sans-serif;

text-transform: uppercase;

}

body{background-image: url(“https://maxlster.game.blog/wp-content/uploads/2024/10/background-star.png”);
background-repeat: repeat;
background-attachment: fixed;
background-size: cover;
color:rgb(255, 255, 255);
animation-name: example;
animation-duration: 25s;
animation-iteration-count: infinite;
}

@keyframes example {
0% {background-position: 0% 0% ;}
90% {background-position: 1000% 0%;}
100% {background-position: 0% 0%;}
}

p{
color:rgb(255, 255, 255) ;
margin-left: 25%;
margin-right: 25%;
font-weight: 800;
border-radius: 18px;
background-attachment: fixed;
padding-top: 20px;
padding-bottom: 20px;
text-shadow: 1px 1px 10px #000000;
background-image: radial-gradient(rgb(7, 0, 27),rgb(59, 1, 55))
}
p:hover{
transition-delay: 50ms;
background-image: radial-gradient(rgb(20, 1, 66),rgb(104, 2, 99));
transform: scale(110%);

}

.mof:{
position: absolute;
margin-right: 5%;
margin-left: 50%;
}
.mask1{ mask-image: url(whatsapp\ logo.png);
mask-repeat: no-repeat;
mask-size: 275px;
mask-position:center;
}

.rocket{ animation-name: exampee;
animation-duration:4s;
animation-delay:4s;
animation-iteration-count: 1;
width: 56px;
height: 114px;
background-image: url(resources/Rocket.png);
background-size: cover;
transform:translateX(-1000%);
}

@keyframes exampee {
0% {transform:translateX(-100%) rotate(59deg) scale(10%) translatey(-100%);}
100% {transform:translateX(2900%) rotate(100deg) scale(700%) translatey(-100%);}
}
.hov:hover{
color: rgb(0, 0, 0);
border-radius: 50px;
box-shadow: 0px 10px 50px 10px;
margin-left: 5px;
margin-right: 5px;
animation-name: option;
animation-duration: 5s;
animation-iteration-count: infinite;
filter: contrast(140%);
}

@keyframes option{
0% {transform: translatey(0%) scale(120%) rotate(-2deg);}
25%{transform: rotate(2deg) scale(120%);}
50% {transform: translatey(0%) scale(100%) rotate(-2deg);}
75%{transform: rotate(2deg) scale(120%);}
100% {transform: translatey(0%) scale(120%) rotate(-2deg);}
}
.earth:hover{
color: rgb(255, 255, 255);
margin-left: 5px;
margin-right: 5px;
animation-name: earth;
animation-duration: 10s;
animation-iteration-count: infinite;
}

@keyframes earth{
0% {transform: translatey(0%) scale(100%) ; filter: drop-shadow(5px 5px 100px #9ccaff);}
25%{transform: translatey(10%) scale(100%); filter: drop-shadow(5px 5px 100px #0077ff);}
50% {transform: translatey(-10%) scale(100%) ; filter: drop-shadow(5px 5px 100px #56abfc);}
75%{transform: translatey(10%) scale(100%); filter: drop-shadow(5px 5px 100px #0077ff);}
100% {transform: translatey(0%) scale(100%) ; filter: drop-shadow(5px 5px 100px #9ccaff);}
}

.imgo:hover{
border-radius: 10px;
transform: scale(120%);
margin-left: 50px;
margin-right: 50px;
color: black;
box-shadow: 0px 0px 20px 10px;

}

.glow:hover{
animation-name: glow;
animation-duration: 6s;
animation-iteration-count: infinite;

}
@keyframes glow {
0% {color: rgb(255, 0, 0);}
25% {color: rgb(94, 255, 0);}
50% {color: rgb(0, 255, 255);}
75% {color: rgb(98, 0, 255);}
100% {color: rgb(255, 0, 0);}

}
.glow{
font-family: cursive;
margin-left: 35%;
margin-right: 35%;
}
.pop:hover{
transition-duration: 80ms;
transform: scale(120%);
padding-left:40px;

}
img{
border-radius: px;
}