@font-face {
    font-family: 'NarutoFont';
    src: url('../njnaruto.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

a {
    text-decoration: none;
    font-family: 'NarutoFont', sans-serif;
}

.affiliationCard {
    padding: 15px; 
    background-color: #5d7680;
}

.akatsukiImage {
    height: 290px;
    object-fit: cover;
    padding:10px; 
    color: #2f2f2f;
}

.akatsukiLogo {
    font-size: 44px; 
    font-family: 'NarutoFont', sans-serif;
}

body[data-bs-theme="dark"] .nameCard {
    color: #2F2F2F;
}

.cardDetails {
    background-color: lightgrey;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: filter 0.3s ease;
    font-family: Verdana, sans-serif;
}

.cardDetails:hover {
    filter: none;
}

.cardDetails:not(:hover) {
    filter: grayscale(80%);
}

.debutCard {
    padding: 15px; 
    background-color: #c5d2ce;
}

.infoMemberDetails {
    padding: 15px; 
    border-radius: 5px;
}

.infoMemberDetails h5 {
    color: black;
}

.jutsuCard {
    padding: 15px; 
    background-color: #b3c6b4;
}

.nameCard {
    font-size: 28px;
    font-family: Verdana, sans-serif;
    font-weight: bolder;
}

.natureTypeCard {
    padding: 15px; 
    background-color: #8eb29a;
}

.occupationCard {
    padding: 15px; 
    background-color: #6a9395;
}

.statusCard {
    padding: 15px; 
    background-color: #7bad9f;
}

.title {
    font-family: 'NarutoFont', sans-serif; 
    font-size: 40px;
}

@media (max-width: 768px) {
    .nameCard {
        font-size: 4vw;
    }
    .infoMemberDetails h5 {
        font-size: 4vw;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .nameCard {
        font-size: 3vw;
    }
    .infoMemberDetails h5 {
        font-size: 3vw;
    }
}

@media (min-width: 1201px) {
    .nameCard {
        font-size: 2vw;
    }
    .infoMemberDetails h5 {
        font-size: 1vw;
    }
}