body{
    margin: 0;
    background: url(images/ovni.png) no-repeat center;
    background-size: cover;
    min-height: 100vh;
    animation: movimiento 20s infinite linear alternate;

}

@keyframes movimiento{
    from{
        background-position: top right;
    } to{
        background-position: bottom top;
    }
}

header{
    background: #312D2A;
    padding: 20px;
    text-align: center;
    margin-bottom: 0px;
}

h2 {
    text-align: center;
    margin-right: 10rem;
    color: white;
    font-size: 25px;
    font-weight: 400;
}



.logo img {
    margin: -20px;
    margin-left: 2px;
    float: left;
    padding: 0;
    max-width: 150px;
    max-height: 150px;
    fill: whitesmoke;
    transition: all 0.25s;

   
}

.logo img:hover{
    transform: translateY(0px); /* Fazendo o botão flutuar*/
    animation: float-logo 10s  ease-in-out infinite;
    fill: whitesmoke;
    filter: drop-shadow(0 0 0.8rem #aab2d5)

   
}

.audio {
    margin-left: 80%;
    margin-top: -3%;
     max-width: 5px;
    
  }

  main{
    width: 50%;
    height: 80%;
    margin: auto;
    padding: 20px;
   
    text-align: center;
    text-decoration: none;
}


.boton-jugar{
   
    text-align: center;
    text-decoration: none;
    padding: 15px;
    font-weight: 400;
    font-size: 25px;
    color: #ffffff;
    background-color: #161513;
    border-radius: 6px;
    border: 3px solid #01030f;
    margin-bottom: 15px;
    margin-top: 50%;
    transform: translateY(0px); /* Fazendo o botão flutuar*/
    animation: float 30s ease-in-out infinite;

}



.boton-jugar:hover {
    color: #161513;
    background-color: #ffffff;
    display: inline-block;
    transform: scale(1.1);
    fill: whitesmoke;
    filter: drop-shadow(0 0 3rem #aab2d5);
}



/*Para o botão fçutuar*/
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0px);
    }
}


@keyframes float-logo {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}




footer{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0%;
    background: #312D2A;
    padding: 0.5%;
    bottom: 0;
    width: 99%;
    position: absolute;

}

.rodape {
    align-items: center;
}

.redes {
    align-items: center;
    margin-right: 43%;
    flex-direction: row;
}

.linkedin{
    max-height: 1rem;
    max-width: 1rem;
    margin-left: 50%;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 25%;
}

.linkedin:hover{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5)
}


.github{
    max-height: 1rem;
    max-width: 1rem;
    margin-top: 0%;
    margin-left: 50%;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 25%;
        
}

.github:hover{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5)
}


.copyright{
    margin: 0;
    text-align: center; 
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
}

.copyright:hover {
  color: gray;
  display: inline-block;
  fill: whitesmoke;
  filter: drop-shadow(0 0 5rem #aab2d5);
}


  @media screen and (min-width: 0px) and (max-width:480px){

    body{
        margin: 0;
        width: 100vw;
        background-size: cover;
        
        min-height: 100vh;
        animation: movimiento 40s infinite linear alternate;
    }

    @keyframes movimiento{
        from{
            background-position: top left;
        } to{
            background-position: bottom top;
        }
    }

    header {
        background: #312D2A;
        margin: 0px;
        padding: 50px;
        width: 100vh;
        text-align: center;
        margin-bottom: 50px;
        display: inline-block;
        flex-wrap: nowrap;
    }

    main {
        height: 320px;
        width: 100vw;
    }

    .boton-jugar{
        
        text-align: center;
        text-decoration: none;
        padding: 15px;
        font-weight: 400;
        font-size: 25px;
        color: #ffffff;
        background-color: #161513;
        border-radius: 6px;
        border: 3px solid #01030f;
        margin-bottom: 15px;
        margin-top: 10%;
        margin-left: 50%;
    }
    .boton-jugar:hover{
        color: #161513;
        background-color: #ffffff;
    }

    .audio {
        margin-left: 0%;
        height: 0px;
        margin-top: -40%;
         
       
      }
    .logo{
        margin: 0;
        margin-left: -25px;
        max-height: 10%;
      }

    footer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    align-self: end;
    margin: 0%;
    background: #312D2A;
    padding: 0.5%;
    bottom: 0;
    width: 99%;

}

.rodape {
    align-items: center;
}

.redes {
    align-items: center;
    margin-right: 43%;
    flex-direction: row;
}

.linkedin{
    max-height: 1rem;
    max-width: 1rem;
    margin-left: 50%;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 25%;
}

.linkedin:hover{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5)
}


.github{
    max-height: 1rem;
    max-width: 1rem;
    margin-top: 0%;
    margin-left: 50%;
    flex-direction: row;
    flex-wrap: Swrap;
    border-radius: 25%;
        
}

.github:hover{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5)
}


.copyright{
    margin: 0;
    text-align: center; 
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
}

.audio {
    margin-left: 80%;
    margin-top: -2%;
     max-width: 5px;
    
  }

@media screen and (min-width: 0px) and (max-width:300px) {
    .logo img {
        display: none;
    }
}

  header {
        background: #312D2A;
        margin: 0px;
        padding: 50px;
        width: 100vh;
        text-align: center;
        margin-bottom: 50px;
        display: inline-block;
        flex-wrap: nowrap;
    }

    h2 {
        flex-wrap: wrap;
    }

footer{
        display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin: 0%;
    background: #312D2A;
    padding: 0.5%;
    bottom: 0;
    width: 99%;
    position: relative;

}

.rodape {
    align-items: center;
}

.redes {
    align-items: center;
    margin-right: 43%;
    flex-direction: row;
}

.linkedin{
    max-height: 1rem;
    max-width: 1rem;
    margin-left: 50%;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 25%;
}

.linkedin:hover{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5)
}


.github{
    max-height: 1rem;
    max-width: 1rem;
    margin-top: 0%;
    margin-left: 50%;
    flex-direction: row;
    flex-wrap: Swrap;
    border-radius: 25%;
        
}

.github:hover{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5)
}


.copyright{
    margin: 0;
    text-align: center; 
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
}

.audio {
    margin-left: 80%;
    margin-top: -2%;
     max-width: 5px;
    
  }