body{
    background: url(star2.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.star_header{
    display: flex;
    justify-content: center;
    font-family: 'Times New Roman', Times, red serif;
    padding: 10px 0;
    background: linear-gradient(rgb(158,171,163));
}

h1::before{
    margin-right: 10px;
    content: "⚔";
    box-shadow: 2px 2px 7px 1px #c23d3d;
}
h1::after{
    margin-left: 10px;
    content: "⚔";
    box-shadow: 2px 2px 7px 1px #c23d3d;
}

.star_header h1{
    backdrop-filter: blur(10px); 
}

.btn{
    color: white;
    font-weight: bolder!important;
    background: rgb(27,137,218);
    margin: auto;
    width: fit-content;
    text-align: center!;
    border-radius: 8px;
    box-shadow: 2px 2px 7px 1px #25130d;
    animation: ease;
}

.btn:hover {
    transform: scale(1);
    transition: 0.9s;
}

.btn_hide{
    background: linear-gradient(90deg, rgba(124,199,203,1) 1%, rgba(204,37,37,1) 9%, rgba(89,12,12,1) 93%, rgba(95,242,249,1) 100%);
}


#homeworlds-filter-container{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    justify-content: space-between;
    color: white!important;
    font-weight: bolder;
    border-radius: 10px;
    background: url("https://static.vecteezy.com/system/resources/previews/007/209/951/non_2x/abstract-background-modern-technology-banner-digital-backdrop-cover-graphic-template-wallpaper-free-photo.jpg")
}

#homeworlds-filter-container label:hover {
    transform: scale(1.1);
    transition: 0.9s;
}

label:hover{
    transform: scale(1.1);
    transition: 0.9s;
} 

/*cards*/
#characters-row .card_characters {
    margin-top: 2rem;
    display: flex;
    color: white;
    margin-left: 20px;
    height: 370px; 
    margin-top: 15px;
    transition: all 0.4s;
    background: rgb(45, 45, 45);
    box-shadow: 0px 0px 10px 5px  rgba(0, 0, 0, 0.705);
}

.img-fluidd{
    display: flex;
    justify-content: center;
    align-self: center;
    height: 250px;
    width: 100px;
    border-radius: 10px;
}

#characters-row .card_characters:hover{
  border-radius: 15px;
  cursor: pointer;
  transform: scale(1);
  box-shadow: 0px 0px 1px 1px  rgba(0, 0, 0, 0.705);
  
}

@media (max-width: 598px) {
    h1{
        font-size: 20px!important;
    }
    .btn{
        box-shadow: 2px 2px 7px 1px #140d06;
    }
    .card_characters {
        width: 100%;
        margin-top: 15px!important;
        margin: 10px auto!important;
    }
}