body{
        background-color: rgb(255, 184, 254);

}

@font-face {
  font-family: pixel; /*Internal name of the font you'll use for this stylesheet.*/
  src: url("PixelifySans-VariableFont_wght.ttf"); /*Put the url of the font on your site here. DO NOT HOTLINK.*/
}


#ufo{
    width: 50%;
    margin: 24%;
    margin-top: 0;
    margin-bottom: 0;
    @media(orientation: portrait){
  width: 100%;
      margin: 0;
    margin-top: 0;
    margin-bottom: 0;
}
}

#banner{
    width: 100%;
    margin-bottom: -5%;
       margin-top: -2%;
       animation-name: floating; 
animation-duration: 3s; 
animation-iteration-count: infinite; 
animation-timing-function: ease-in-out;
}



@keyframes floating { 
0% { 
transform: translate(0,  0px); 
} 

50%  { 
transform: translate(0, 15px); 
} 

100%   {
transform: translate(0, -0px); 
} 
}     
    
.news{
    width: 100%;
    display: flex;
    background-color: #000000;
}

h5{
    color: rgb(104, 250, 255);
    font-family: pixel;
    font-size: x-large;
    margin: 0.5%;
    text-align: center;
}


.Container{

    margin: auto;
}

.gamerbutton{
     background-color: #000000;
     width: 20%;
   margin: auto;
border-radius: 10px;
  transition: transform 0.3s ease-in-out;
padding: 20px;
  
      @media(orientation: portrait){
  width: 50%;
}
}

.gamerbutton:hover{
    transform: scale(1.1);
}


.menu{
    width: 100%;
    margin: 0;
     display: inline-flex;
    justify-content: center;
   
}

.gamerbutton2{
padding: 0;
margin-left: 50px;
margin-right: 50px;
     background-color: #000000;
     width:100px;
    
     padding: 20px;
    border-radius: 10px;

}


nav{
    background-color: #000000;
      display: flex;
    width: 100%;
    justify-content: space-around;
    
   
}

a{
    font-family: pixel;
    font-size: 4vmin;
    color: rgb(104, 250, 255);
   transition: transform 0.3s ease-in-out;
}

a:hover{
    transform: scale(1.1);
}



.popup{
   width: 30%;
   margin: auto;
border-radius: 2%;
   background-color: #000000;
      @media(orientation: portrait){
  width: 70%;
}
}

h1{
text-align: center;
font-size: 5vmin ;
font-family: pixel;
 color: rgb(221, 173, 243);
}

h2{
text-align: center;
font-size: 3vmin ;
font-family: pixel;
color: rgb(221, 173, 243);
}

#lilguy{
    width: 60%;
    margin: 19%;
    margin-top: 2%;
    margin-bottom: 4%;
    border-radius: 2%;
    transition: transform 0.3s ease-in-out;
  }

#lilguy:hover{
    transform: scale(1.1);
}



  h3{
    font-size: xx-large;
    font-family: pixel;
    margin: auto;
    text-align: center;
            padding:4px;
 animation: shake 1s infinite;
  }


 
 @keyframes shake {
 0% {
 transform: translate(1px, 1px) rotate(0deg);
 }
 10% {
 transform: translate(-1px, -2px) rotate(-1deg);
 }
 20% {
 transform: translate(-3px, 0px) rotate(1deg);
 }
 30% {
 transform: translate(3px, 2px) rotate(0deg);
 }
 40% {
 transform: translate(1px, -1px) rotate(1deg);
 }
 50% {
 transform: translate(-1px, 2px) rotate(-1deg);
 }
 60% {
 transform: translate(-3px, 1px) rotate(0deg);
 }
 70% {
 transform: translate(3px, 1px) rotate(-1deg);
 }
 80% {
 transform: translate(-1px, -1px) rotate(1deg);
 }
 90% {
 transform: translate(1px, 2px) rotate(0deg);
 }
 100% {
 transform: translate(1px, -2px) rotate(0deg);
 }
 }


h4{
    font-size: x-large;
    font-family: pixel;
    margin: auto;
    text-align: center;
  }

  p{
     font-family: pixel;
     font-size: x-large;
     text-align: center;
  }


  .main{
    margin: auto;
    width: 80%;
  }


  .vorschau{
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: space-around;
    @media(orientation: portrait){
   display:grid;
}
  }



  .trailer{
    width: 80%;

    margin: auto;
    border-radius: 4%;
      @media(orientation: portrait){
   margin: 9%;
}
}