.main{
    padding: 0px;
    margin:0px;
    display : flex;
    flex-direction:column ;
    align-items:center ;
    gap:2rem ;
    
}
h1{
   font-size: clamp(1.8rem, 6vw, 3.5rem);
   padding: 0.5rem 1rem ;
   text-align: center ;
    font-family: monospace ;
    color: hsl(0, 1%, 31%) ;
letter-spacing: 0.2rem ;
    margin-top: 2rem ;

}
#search{
    display:flex ;
    flex-direction:row ;
    align-items:center ;
    margin-top: 0.2rem ; 
    margin-left: 2rem ;
    flex-wrap: wrap ; 
    gap: 0.5rem ;  

}
#search #inpo{
    width:70vw ;
    max-width: 20rem ;
    margin-right: 0.5rem ;
    padding: 0.5rem ;
    font-size: 1.5rem ;
    border: 2px solid hsl(0, 1%, 31%) ;
    border-radius: 0.5rem ;
    background-color: white ;
    color: hsl(0, 1%, 31%) ;
    font-family: monospace ;
    text-align: center ;

}
#search #inpo:focus{
    outline:none ;
    border-color: hsl(0, 1%, 10%) ;
    background-color: hsl(0, 1%, 90%) ;
    box-shadow: 0 0 5px hsl(0, 1%, 31%) ;
}
#search #btn{
    padding: 0.6rem 1.2rem ;
    font-size: 1.2rem ;
    border: none ;
    border-radius: 0.5rem ;
    background-color: hsl(0, 1%, 31%) ;
    color: white ;
    cursor:pointer ;
    font-family:monospace ;
    margin-left: 1rem ;


}
#search #btn:hover{
    background-color: hsl(0, 1%, 10%) ;
    box-shadow: 0 0 5px hsl(0,1%, 31%) ;
}
#search #cl{
    background-color: hsl(0, 1%, 31%) ;
    color: white ;
    border:none ;
    border-radius: 50%;
    width: 30px ;
    height: 30px ;
    margin-left: 0.5rem ;
    padding:10px;
    font-size: 1.2rem ;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer ;
}
#search #cl:hover{
    background-color: hsl(0, 1%, 10%) ;
    box-shadow: 0 0 5px hsl(0,1%, 31%) ;
}
#display{
   border:2px solid hsl(0, 1%,31%) ;
   padding: 2rem ;
   font-size: 1.5rem ;
   border-radius:1rem ;
   max-width:25rem ;
   width: 80vw ;
   
    display:none ;
    text-align: center ;
    /* gap: 0.4em; */
    background-color: hsl(0, 0%, 77%);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    
}
#display h2{
    font-family: monospace;
  font-size: 2.4rem;
  text-transform: capitalize;  
  color: hsl(0, 1%, 20%);
}

#display img{
    width:280px ;
    height:280px ;
    object-fit:contain ;
    
}
.statrow{
    display:flex ;
    align-items:center ;
    gap: 0.5rem ;
    width:100% ;
}
.statname{
    font-size: 1.2rem ;
    font-family: monospace ;
    width: 120px ;
    color: hsl(0, 1%, 31%) ;
    text-transform: capitalize ;
    margin-bottom: 0.6rem ;
}
.statbarbg{
    flex:1 ;
    background-color: hsl(0, 0%, 80%) ;
    border-radius: 1rem ;
    height: 10px ;
}
.statbarfil{
    height: 10px ;
    border-radius: 1rem ;
    background-color: hsl(120, 50%, 50%) ;
}
.statnum {
  font-size: 1.2rem;
  width: 30px;
}

#gridcards{
    display: grid ;
    grid-template-columns: repeat(3,1fr) ;
    gap:4rem;
    margin-top: 3rem ;

}
#gridcards .pokecard{
    border: 2px solid hsl(0, 1%, 31%) ;
    border-radius: 1rem ;
    padding: 1rem ;
    text-align: center ;
    background-color: hsl(0, 0%, 77%) ;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
#gridcards .exp{
    font-size:1.2rem ;
    font-family:monospace ;
}

.load{
    padding: 0.8rem 1.5rem ;
    border: none ;
    border-radius:0.5rem ;
    background-color: hsl(0, 1%, 31%) ;
    color:white ;
    font-size:1.2rem ;
    cursor: pointer ;
    font-family:monospace ;
    margin-top:1rem ;
}
.load:hover{
    background-color: hsl(0, 1%, 10%) ;
    box-shadow: 0 0 5px hsl(0,1%, 31%) ;
}

@media (max-width: 690px){
    #search{
        flex-direction: column ;
        align-items: stretch ;
        margin-left: 0 ;
    }
    #search #inpo{
        width:100% ;
        margin-right: 0 ;
        margin-bottom: 0.5rem ;
    }
    #search #btn{
        width:100% ;
        margin-left: 0 ;
    }
    #search #cl{
        position:absolute ;
        top:10px ;
        right:10px ;
    }
    #gridcards{
   grid-template-columns: repeat(2,1fr) ;
    gap:2rem;
    margin-top: 3rem ;}

}
@media (max-width: 530px){
    #gridcards{
        grid-template-columns:1fr ;
    }
}