.character-container{
    background-color: rgb(235, 224, 199);
    margin: 20px;
    height: 600px;
    border: 3px solid rgb(163, 136, 77);
    position: relative;
}

.character-container .header{
    background-color: rgb(23,46,37);
    position: absolute;
    width: 100%;
    height: 50px;
    display: flex;
    color: white;
    align-items: center;
    justify-content: center;
}

.character-container .header h1{
    font-size: 25px;
}

.character-container .header button{
   color: white;
   background-color: rgb(26, 56, 45);
   border: 1px solid rgb(163, 136, 77);
   border-radius: 3px;
   padding: 5px 10px;
   position: absolute;
   right: 20px;
   cursor: pointer;
}

.character-container .header button:hover{
    background-color: rgb(31, 68, 55);
}

.filter-container{
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.search-bar{
   margin-left: 26px;
   margin-top: 5px; 
   border: 2px solid rgb(163, 136, 77);
    background: black url("../personal_icons/search.svg") no-repeat 1px center;
    background-size: 25px;
    background-color:  rgb(235, 224, 199);
    padding-left: 35px;
    height: 25px
}

.search-bar:focus {
  background: none;
  padding-left: 10px;
}

.filter-container img{
    width: 30px;
    margin-right: 8px;
}

.filter-container span{
    position: relative;
    margin-right: 40px;
}

.character-box{
    margin-top: 30px;
    margin-left: 15px;
    margin-right: 15px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px; 
    justify-items: center; 
}

.character-card{
    border: 2px solid rgb(163, 136, 77);
    width: 200px;
    height: 350px;
    
}

.character-card .character-image{
    background-color: black;
    width: 100%;
    height: 50%;
}

.character-card .character-body{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.character-body h1{
    font-size: 20px;
    margin-top: 5px;
}

.character-body p{
    font-size: 16px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.character-info{
    display: flex;
    flex-direction: row !important;
    align-items: center;
}

.character-info p{
    font-size: 17px;
    margin: 3px
}

.character-body button{
    color: white;
   background-color: rgb(26, 56, 45);
   border: 2px solid rgb(163, 136, 77);
   border-radius: 10px;
   padding: 10px 10px;
   cursor: pointer;
   font-size: 14px;
}

.character-body button:hover{
    background-color: rgb(31, 68, 55);
}

.character-card:hover{
    box-shadow:0 0 10px 8px darkolivegreen;
}