:root {

--accentBlack:#ca1414;

}



body {

margin:0;

background:#000;

color:white;

font-family:
Segoe UI,
Arial,
sans-serif;

}



.container {

padding:40px;

}



h1 {

text-align:center;

font-size:3.2em;

font-weight:900;

letter-spacing:3px;

text-shadow:
0 0 20px #ca141466;

}



h1 span {

color:var(--accentBlack);

}



/* Message */

.messageBox {

background:#000000d9;

border:
2px solid var(--accentBlack);

border-radius:15px;

padding:25px;

max-width:900px;

margin:
30px auto 50px;

}



.messageBox h2 {

color:var(--accentBlack);

}





.services {

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(230px,1fr));

gap:40px;

}






/* ------------------------------ */
/* TILT JELLYFIN STYLE            */
/* ------------------------------ */


.jf-tilt-card {


perspective:900px !important;


transform-style:
preserve-3d !important;


/* Modification importante */

overflow:visible !important;


}





.jf-tilt-inner {


height:170px;


background:#000000d9;


border:
2px solid red;


border-radius:25em;


display:flex;


flex-direction:column;


align-items:center;


justify-content:center;



transition:
transform .15s ease-out !important;


will-change:
transform !important;


transform-origin:center center !important;


position:relative;


overflow:hidden !important;


}





.jf-tilt-inner::before {


content:"";


position:absolute;


inset:0;


background:

radial-gradient(

circle at var(--mx) var(--my),

rgba(202,20,20,.55),

transparent 40%

);


opacity:0;


transition:.2s;


border-radius:25em;


pointer-events:none;


}



.jf-tilt-card:hover .jf-tilt-inner::before {

opacity:1;

}





.jf-tilt-card:hover .jf-tilt-inner {


box-shadow:

0 0 15px white;

}






/* Logos */

.jf-tilt-inner img {


width:70px;

height:70px;


object-fit:contain;


margin-bottom:15px;


transition:.2s;


}




.jf-tilt-card:hover img {


transform:

scale(1.15);


filter:

drop-shadow(0 0 10px #ca1414);


}




.title {

font-size:1.4em;

font-weight:900;

}




/* MediaBar protection */


#mediaBar {

position:relative !important;

z-index:9999 !important;

}



#mediaBar .mb-item,
#mediaBar .mb-button {

pointer-events:auto !important;

}



.pageTabContent.is-active::before,
.backgroundContainer.withBackdrop,
.itemsContainer.padded-left::before {

pointer-events:none !important;

}