body{
    font-family:"Voces", 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    height: 100vh;
    background-color: var(--lime-6) ;
    color: white
}



h1{
    font-family: "Rubik Spray Paint", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    font-size: 6rem;
    font-size: clamp(6rem, 1.4285714285714288rem + 7.142857142857142vw, 10rem);
    height:20%;
    text-align: center;
    text-shadow: var(--shadow-2);
}

h2{
    font-weight: 500;
    padding-bottom: 1rem
}

h3{
    font-weight: 900;
    padding-bottom: 1rem
}

@media (max-width:860px ){
    h1 {
        font-size: 4rem;
        font-size: clamp(4rem, 3.393939393939394rem + 4.848484848484849vw, 6rem);
    }
    h2{
        font-size: 2rem;
font-size: clamp(2rem, 1.696969696969697rem + 2.4242424242424243vw, 3rem);
    }
    h3{
        font-size: 1rem;
        font-size: clamp(1rem, 0.8484848484848485rem + 1.2121212121212122vw, 1.5rem);  
    } 
}



.container{
    background-color:var(--blue-11);
    display:flex;
    flex-direction: column;
    width:100%;
    height:100%;
    justify-content:center;
    align-items: center;
    text-align: center;
}

.card{
    position:relative;
    display:flex;
    flex-direction: column;
    align-items: center;
    background: var(--gray-8);
    border: solid var(--gray-2);
    border-radius: 25px;
    padding: 2.5rem;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    width:75%;
    height: min-content;
    box-shadow: var(--shadow-2)

}

.img{
   width:100%;
   height:35%;
   display: flex;
   justify-content: center;
   margin-bottom: 2.5rem;  
}
img:hover{
    transition: ease-in-out;
    content:url(/img/character2.JPG);
 
}

img{

   object-fit: cover;
   aspect-ratio: 1/1;
   border-radius: 50%;
   border: 2.5px solid;
   max-width:50% ;
   max-height:100%;
   box-shadow: var(--shadow-2);
   animation-name:image;
   animation-duration: 3s; 
}
@keyframes image {
    from {
        display: none;
    }
    to {
        display:block
    }
}


.btn{
    text-decoration: none;
    color: white; 
    text-transform:uppercase;
    background:var(--brand-instagram-red);
    border-radius: 10px;
    padding:0.25rem;
    margin-left: 1rem;
    box-shadow: var(--shadow-2)
}

.btn:hover{
    background: var(--brand-instagram-blue);
    box-shadow: -2px -2px 10px white;
    box-shadow: 2px 0px 10px white;
}