body {background-color: rgb(248, 248, 210);margin: 0; padding: 0;}
header {background-color: rgb(26, 24, 24); height: 100px;}
header img {max-width: 220px; margin: 10px;}

.chars {max-width: 1000px; height: 50%; display: grid; margin: 20px; }
.chars .card {padding: 3px; margin-top: 30px; display: flex; height: 180px; transition: background 0.40s linear; 
     box-shadow: 5px 5px 10px black; border-radius: 10px;}
.chars .card div {max-width: 50%;}
.chars img {width: 40%;}
.chars input {display: none;}
input:checked + label .card {background: rgb(218, 218, 181); width: 350px;}

#btn {width: 110px; height: 30px; margin-left: 30px; font-size: large; background-color:  rgb(85, 85, 75) ; 
     border: none; border-radius: 5px; color:  rgb(248, 248, 210);}

@media (min-width: 400px) {
     .chars { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 700px) {
     .chars { grid-template-columns: repeat(2, 1fr); }
     .chars .card {margin: 10px;}
}

@media (min-width: 1100px) {
     .chars { grid-template-columns: repeat(3, 1fr);}
     .chars .card {margin: 10px;}
}