@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Jost:ital,wght@0,100..900;1,100..900&display=swap');



/* .normalfondo{} */
*{
    padding: 0;
    margin: 0;
    font-family: "Jost", sans-serif;
   
    color: rgb(216, 240, 240);
}
*,
*::before,
*::after {
  box-sizing: content-box;
}

body{
    background-color: rgb(25, 26, 43) ;
}
h1{
   font-family: "Audiowide", sans-serif; 
}

h2{
    font-family: "Audiowide", sans-serif; 
}

header{
    background-color: rgb(26, 21, 31);  

}

.intro{
    margin-left: 5rem;
    margin-right: 5rem;
}

select{
    color: black;
}
option{
    color:black
}


label{
    padding-right: 1rem;
    padding-top: 1rem;
}
input{

    border: 2px solid rgb(195, 228, 228);
    padding-left: 15px;
    margin-right: 15px;
    color:black
}

select {
    margin-right: 15px;
}

button{
    margin-top: 10px;
    padding: 0.5rem;
    border-style: groove ;
    border-radius: 10%;
    background-color: rgb(195, 228, 228);
    color:rgb(25, 26, 43) ;
    margin-right: 1rem;
}
form{
    padding: 5rem;
}
.form2{
    background-image: url(../img/pagina/cielo.webp);
      
}

.form2 img{
    margin-left: 4rem;
    margin-top: 5rem;

    height: 350px;
    width: 350px;
}

.final{
    margin-right: 40%;
    padding: 6%;
    position: absolute;
}
.finalPelea{
    margin-right: 40%;
    padding: 6%;
    position: absolute;
}
footer{
    padding-top: 3rem;
    padding-bottom: 2rem;
    background-color: rgb(26, 21, 31); 
}

a{
    color: rgb(216, 240, 240);
}


.pjalien{
    position:relative;
    margin-left: 35rem;
    padding-bottom: 8rem;
    padding-top: 5rem; 
    background-image: url(../img/presentacion.webp);
    background-repeat: no-repeat;
}

.pjMnormal{
    position:relative;
    margin-left: 35rem;
    padding-bottom: 8rem;
    padding-top: 2rem;   

    padding-right:5rem;
    background-image: url(../img/presentacion2.webp);
    background-repeat: no-repeat;
    padding-left: 1.5rem;
}
@media (min-width: 768px) and (max-width: 992px){

   form{
    padding: 2rem;
   }

   .finalPelea{
    margin-right: 45%;
   }

   .pjalien{
    margin-left: 25rem
   }
    .pjMnormal{
        margin-left: 25rem;
        background-size: 400px 450px;
        padding-right: 0rem;
        
    }
}

@media (min-width: 320px) and (max-width: 767px){
  
.intro{
    margin-left: 2rem;
    margin-right: 2rem;
}
img{
    height: 110px;
    width: 320px;
}
form{
    padding: 1rem;
    flex-direction: column;
}

.form2{
    flex-direction: column;
}
.form2 img{
    margin-left: 2rem;
    margin-top: 2rem;

    height: 250px;
    width: 250px;
}

.final{
    position: relative;
    margin-right: 0;
    padding: 5%;
}
.finalPelea{
    position: relative;
    margin-right: 0;
    padding: 5%;
}

.footer-datos{
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
}


.pjalien{
    height: 250px;
    width: 250px;
    padding-bottom: 1rem;
    padding-top: 2rem;   
    background-size: 300px 300px;
    margin-left: 0.5rem;
    padding-left: 0;
    padding-left: 1rem;
    padding-right: 2rem;
}

.pjMnormal{
    height: 250px;
    width: 250px;
    padding-bottom: 1rem;
    padding-top: 2rem;   
    background-size: 300px 300px;
    margin-left: 0;
    padding-left: 0;
    padding-right:4rem;
}

}