*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

background:#c6d4d4;
font-family:Poppins,sans-serif;

min-height:90vh;

display:flex;
justify-content:center;
align-items:center;

padding:20px;

}

.container{

width:100%;
max-width:500px;

}

.form-box{

display:flex;
flex-direction:column;
gap:15px;

background:white;

padding:30px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.15);

animation:fade .8s;

}

h1{

font-family:'League Spartan';

color:#557172;

font-size:40px;

}

input{

padding:14px;

border:none;

border-radius:12px;

background:#edf3f4;

}

button{

padding:15px;

border:none;

border-radius:12px;

background:#5d787a;

color:white;

cursor:pointer;

font-weight:bold;

transition:.3s;

}

button:hover{

transform:scale(1.03);

}

/* CARD */

.card-page{

display:flex;
flex-direction:column;

align-items:center;

animation:cardShow .8s;

}

.card{

position:relative;

width:105vw;
max-width:550px;

aspect-ratio:14/9;

background:url("https://files.catbox.moe/sc6wq8.jpg");

background-size:cover;

background-position:center;

border-radius:19px;

overflow:hidden;

}

/* FOTO */

.photo{

position:absolute;

top:25%;
left:4.2%;

width:29%;
height:53%;

object-fit:cover;

}

/* TEXTO */

.name,
.species,
.gender,
.age{

font-family:"Segoe UI Black", "Arial Black", sans-serif;


color:#385357;}

.info{

position:absolute;
color:#385357;
font-weight:600;

}

/* Más a la derecha */

.name{

top:27%;
left:50%;
font-size:1.8vw;

}

.species{

top:41%;
left:53%;
font-size:1.6vw;

}

.gender{

top:53%;
left:46%;
font-size:1.5vw;

}

.age{

top:53%;
left:81%;
font-size:1.5vw;

}

.idtext{

top:60%;
left:49%;
font-size:0.9vw;

}

/* FIRMA IMAGEN */

.signature{

position:absolute;

/* mover más a la izquierda */
left:36%;

/* subir o bajar */
bottom:10%;

/* agrandarla */
width:150px;
height:90px;

object-fit:contain;

}

/* DESCARGA */

.download-btn{

margin-top:20px;
width:300px;

}

@keyframes cardShow{

from{

opacity:0;
transform:translateY(50px) scale(.8);

}

to{

opacity:1;
transform:none;

}

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}

@media(max-width:700px){

.name{
font-size:3vw;
}

.species,
.gender,
.age{

font-size:2.7vw;

}

.idtext{

font-size:2vw;

}

.signature{

width:90px;

}

}