@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');
body{ 
    background-color:black;
    background-image:url(../images/netbackground.png);
}
h1{
    color: white;
    text-align: center;
    margin:20%;
    font-size:100px;
    font-family:"Pixelify Sans";
}
.arrow{
    margin-left:10%;
    margin-top:5%;
    transform:rotate(-15deg)
}

h2{
    color:white;
    text-align: center;
    margin:20%;
    font-size:70px;
    font-family: "Pixelify Sans";
    
}
h2:hover{
    transform: scaleX(0.1);
    transition: rotate(270deg);
}
h3{
    color:white;
    margin-left:10%;
    margin-bottom: 0%;
    font-size:30px;
    font-family: "Pixelify Sans"; 
}

#star1{
    position:absolute;
    left:80%;
    top:5%;
    scale:60%
    
}
#star2{
    margin: 10%;
}


.purplesun { 
    position:absolute;
    width:200px;
    animation: floatAnimation 10s ease-in-out infinite;

}
@keyframes floatAnimation {
    0% {
        top: 10%;
        left: 10%;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    25% {
        top: 25%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(15deg);
    }
    50% {
        top: 50%;
        left: 75%;
        transform: translate(-50%, -50%) rotate(30deg);
    }
    75% {
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    100% {
        top: 10%;
        left: 10%;
        transform: translate(-50%, -50%) rotate(0deg);
    }
}
#google{
    position:relative;
    width:200px;
    animation: floatAnimation 10s ease-in-out infinite;
    transform:rotate(25deg);
}
@keyframes floatAnimation{
    0% {
        top: 10%;
        left: 10%;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    25% {
        top: 25%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(15deg);
    }
    50% {
        top: 50%;
        left: 75%;
        transform: translate(-50%, -50%) rotate(30deg);
    }
    75% {
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    100% {
        top: 10%;
        left: 10%;
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

#escape{
    display: flex;
    text-align: center;
    max-width: 50px;
    max-height: 40px;
    margin-left: 50%;
    margin-top:70%;
    font-size: 20px;
    color:white;
    font-family: Arial, Helvetica, sans-serif;
}
#star3{
    margin-left: 80%;  
    scale:65%;
  }
.blackhole{
    scale:70%;
    transform:rotate(25deg);
    margin-top: 15%;
}
#saturn{
    scale:200%
}
#googlegif{
    scale:200%;
    postion:absolute;
    top:50%;
}
.life{
    position:relative;
    width:auto;
    animation: floatAnimation 10s ease-in-out infinite;
    transform:rotate(25deg);
}
@keyframes floatAnimation{
    0% {
        top: 10%;
        left: 10%;
        transform: translate(20%, 80%) rotate(0deg);
    }
    25% {
        top: 25%;
        left: 50%;
        transform: translate(20%, 80%) rotate(25deg);
    }
    50% {
        top: 50%;
        left: 75%;
        transform: translate(20%, 80%) rotate(50deg);
    }
    75% {
        top: 75%;
        left: 50%;
        transform: translate(20%, 80%) rotate(45deg);
    }
    100% {
        top: 10%;
        left: 10%;
        transform: translate(20%, 80%) rotate(0deg);
    }
}

.sinjin_ps{
    position:relative;
    margin-top: 10px;
    scale:50%;
}
.firegirl{
    scale:40%;
    margin-left:35%;
    margin-bottom: 0%;
    transform:rotate(-25%);
}

.sun{
    scale:300%;
    position:relative;
    width:auto;
    animation: floatAnimation 10s ease-in-out infinite;
    transform:rotate(25deg);
}
    @keyframes floatAnimation {
        0% {
            top: 10%;
            left: 10%;
            transform: translate(-50%, -50%) rotate(0deg);
        }
        25% {
            top: 25%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(15deg);
        }
        50% {
            top: 50%;
            left: 75%;
            transform: translate(-50%, -50%) rotate(30deg);
        }
        75% {
            top: 75%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
        }
        100% {
            top: 10%;
            left: 10%;
            transform: translate(-50%, -50%) rotate(0deg);
        }
}

.harry{
    opacity: 10%;
}
.harry:hover{
    opacity: 50%;
    transform: rotate(-45deg);
}
.bananas{
    scale:800%;
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    margin-left: 40%; 
    animation: GFG 5s infinite linear; 
} 

@keyframes GFG { 
    0% { 
        transform: rotate(0deg)  
              translateY(100px) rotate(0deg); 
    } 

    100% { 
        transform: rotate(360deg)  
              translateY(100px) rotate(-360deg); 
    }
}
.pickles{
    scale:15%;

}
.glitch{
    margin-left: 80%;
    scale:200%;
}
.pickles{
    margin-left:80%;
    scale:300%;
}
.beer{
    transform: rotate(35deg);
    margin-left:50%;
    
}

.bse{
    position:relative;
    width:auto;
    animation: floatAnimation 10s ease-in-out infinite;
    transform:rotate(25deg);
}
    @keyframes floatAnimation {
        0% {
            top: 10%;
            left: 10%;
            transform: translate(-50%, -50%) rotate(0deg);
        }
        25% {
            top: 25%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(15deg);
        }
        50% {
            top: 50%;
            left: 75%;
            transform: translate(-50%, -50%) rotate(30deg);
        }
        75% {
            top: 75%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
        }
        100% {
            top: 10%;
            left: 10%;
            transform: translate(-50%, -50%) rotate(0deg);
 }
}

.ziggy{
    scale:1000%;
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    margin-left: 40%; 
    animation: GFG 5s infinite linear; 
}

@keyframes GFG { 
    0% { 
        transform: rotate(0deg)  
              translateY(100px) rotate(0deg); 
    } 

    100% { 
        transform: rotate(360deg)  
              translateY(100px) rotate(-360deg);   
}
}
.katyperry{
    position:relative;
    width:auto;
    animation: floatAnimation 10s ease-in-out infinite;
    transform:rotate(25deg);
}
    @keyframes floatAnimation {
        0% {
            top: 10%;
            left: 10%;
            transform: translate(-50%, -50%) rotate(0deg);
        }
        25% {
            top: 25%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(15deg);
        }
        50% {
            top: 50%;
            left: 75%;
            transform: translate(-50%, -50%) rotate(30deg);
        }
        75% {
            top: 75%;
            left: 50%;
            transform: translate(50%, 50%) rotate(45deg);
        }
        100% {
            top: 10%;
            left: 10%;
            transform: translate(50%, 50%) rotate(0deg);
 }
} 
.saturn:hover{
    transform:rotate(45deg)
}
.moon{
    scale:150%;
    transform:rotate(10deg);
}

.glow{
    margin-right:100%;
}
.eye{
    margin-left:10%;
    opacity:60%;
}
.flower{
   margin-top: 45%;
   opacity: 60%;
   animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
.flower2{
    scale:200%;
    opacity: 80%;
    margin:20%;
    margin-left:10%;
    
}

.die{
margin-left:5%;
transform: rotate(-15deg);
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
.sue{
    scale:130%;
    margin-left:70%;
    transform: rotate(-15deg);
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(-360deg);}
}
.creeper{
    transform: rotate(-25deg);
}