@import url('https://fonts.maateen.me/adorsho-lipi/font.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@100..900&display=swap');


.m-bn-font-noto-100 {
  font-family: "Noto Sans Bengali", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500; /*100-900*/
  font-style: normal;
  font-variation-settings: "wdth" 80; /*62.5-100 */
}


.m{
    margin:0;
    padding:0;
    box-sizing:border-box;
    /*font-family:Arial, Helvetica, sans-serif;*/
}

.m-container{
    /*font-family: 'Adorsho Lipi', sans-serif;*/
    max-width:100%;
    margin:auto;
}

.m-h1{
    text-align:center;
    margin-bottom:25px;
    color:red;
}

.m-row{
    display:flex;
    gap:2px;
    padding:6px;
    border-radius:6px;
    margin-bottom:5px;
    align-items:center;
    transition:.3s;
}

.m-row div{
    flex:1;
    padding:2px;
    word-break:break-word;
    
}

/* Header */

.m-header{
    background:#1e88e5;
    color:white;
    font-weight:bold;
    padding:20px;
    font-size: 16px;
    /*border: 2px solid red;*/
}

/* Alternate row colors */

.m-data-row:nth-child(odd){
    background:#ffffff;
    color:green;
}

.m-data-row:nth-child(even){
    background:green;
    color: white;
}

/* Hover */

.m-data-row:hover{
    background:#ffe082;
    transform:scale(1.01);
    cursor:pointer;
}

.m-photocard {
        width: 300px;
        margin: auto;
        height: 350px;
        padding: 8px;
        border-radius: 22px;
        background: linear-gradient(135deg, #fff, #777, #fff);
        box-shadow: 0 20px 50px rgba(0,0,0,0.6);
        transition: transform 0.3s ease;
    }

    .m-photocard:hover {
        transform: rotateY(8deg) rotateX(5deg) scale(1.03);
    }

    .m-card-inner {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 17px;
        position: relative;
        background: #222;
    }

    .m-card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .m-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            transparent 45%,
            rgba(0,0,0,0.85) 100%
        );
    }

    .m-info {
        position: absolute;
        bottom: 20px;
        left: 20px;
        color: white;
    }

    .m-name {
        font-size: 20px;
        font-weight: bold;
    }

    .m-subtitle {
        margin-top: 5px;
        font-size: 14px;
        opacity: 0.8;
    }

    .m-rarity {
        position: absolute;
        top: 15px;
        right: 15px;
        padding: 7px 12px;
        border-radius: 20px;
        background: rgba(255,255,255,0.2);
        backdrop-filter: blur(10px);
        color: white;
        font-size: 12px;
        font-weight: bold;
    }

/* Mobile */

@media (max-width:700px){

.m-header{
    display:none;
}

.m-data-row{
    display:block;
    border-left:6px solid #1e88e5;
    padding:15px;
}

.m-data-row div{
    display:flex;
    justify-content:space-between;
    padding:8px 0;
    border-bottom:1px solid #ddd;
}

.m-data-row div:last-child{
    border-bottom:none;
}

.m-data-row div::before{
    content:attr(data-label);
    font-weight:bold;
    color:#1565c0;
}

}