@font-face {
    font-family: 'Redaction35';
    src: url('../fonts/Redaction_35-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Redaction50Bold';
    src: url('../fonts/Redaction_50-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

:root {
    --bg: #0d0a14;     
    --fg: #efe9ff;     
    --accent: #e858de; 

    --u: 3px; /*Taille bordures*/
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("/images/grain.jpg");
    background-size: 1000px 1000px;   /* repeat tile */
    image-rendering: pixelated;     
    opacity: 0.15;
    mix-blend-mode: soft-light;         
    pointer-events: none;       
    z-index: 999;
}

/* Base stuff */
/* Base stuff */
/* Base stuff */

html {
    background-color: var(--bg);
    color: var(--fg);

    font-family: Redaction35;
    font-size: 150%;

    width: 100%;
    height: 100%;
    justify-content: center;
}

h1, h2 {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 10px;
    font-family: Redaction50Bold;
}

h2 {
    padding-top: 2px;
    line-height: 1em;
}

a, p {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 10px;
}
 
/* Header */
/* Header */
/* Header */

header {
    margin: 0;
    padding-top: 0.5em;
    display: flex;
    background: var(--fg);
    color: var(--bg);   /* texte sombre sur fond clair */
}

header a { 
    color: var(--bg); 
}

nav {
    margin: 0;
    display: flex;
}

nav ul {
    margin: 0;
    display: flex;
    list-style-type: none;
    justify-content: center;
}

nav a {
    text-align: center;
    text-decoration: none;
    font-size: 1.3em;
    border: 5px solid rgba(255,255,255,0);
}

nav a:hover {
    color: var(--fg);
    border: 5px solid rgba(0,0,0);
    background-color: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

@media (min-width: 651px) {
    main {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.centering_header {
    margin-left: 10px;
    text-align: left;
    align-self: flex-start;
    flex: 1;
    text-decoration: none;
}

/* Gradient */

.fade {
    --n: 2;                          /* taille d'un carré en px (1, 2, 3...) */
    --size: calc(var(--n) * 64px);   /* la tuile = 64 carrés */
    --k: calc(var(--n) / 4);         /* même rapport qu'avant, sans diviser des px */

    height: calc(120px * var(--k));
    background-color: var(--fg);

    -webkit-mask-image: url("/images/fade.svg");
    mask-image: url("/images/fade.svg");
    -webkit-mask-size: var(--size) var(--size);
    mask-size: var(--size) var(--size);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-position: 0 calc(-64px * var(--k));
    mask-position: 0 calc(-64px * var(--k));
}

/* Main page */
/* Main page */
/* Main page */

main {
    height: 100%;
    margin: 0;
}

.container {
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;

    display: flex;
}

/* desktop : colonnes côte à côte */
.col + .col {
    margin-left: calc(var(--u) * -1);   /* la colonne 2 recouvre la bordure de la colonne 1 */
}

.item + .item {
    margin-top: calc(var(--u) * -1);    /* l'item du dessous recouvre la bordure de celui du dessus */
}

/* mobile : colonnes en long */
nav ul { padding: 0; }   /* à mettre HORS de la media query */

@media (max-width: 650px) {
    html { font-size: 100%; }

    /* header */
    header { justify-content: center; }
    .centering_header { display: none; }   /* les "ressorts" de centrage ne servent plus */
    nav a { font-size: 1.1em; border-width: 3px; }

    /* home */
    main { padding: 0 .5rem; }
    .container { flex-direction: column; width: 100%; max-width: 100%; align-items: center; }
    .col { width: 100%; }
    .col + .col { margin-left: 0; margin-top: calc(var(--u) * -1); }
    .item { width: auto; }
    #info {
        padding-bottom:0.5em;
    }
}
.col {
    display: flex;
    flex-direction: column;
    width: fit-content;
}

.item {
    border: solid var(--fg) var(--u);
    height: 100%;
    width: 19rem;
    overflow-wrap: anywhere;
    position: relative;
}

/* Profile part */

#profile {
    display: flex;
    height: fit-content;
}

#profile img {
    flex: none;               /* l'image ne rétrécit jamais */
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-right: solid var(--fg) var(--u);
}

#name {
    min-width: 0;             /* autorise le texte à passer à la ligne */
    margin-top: auto;
    margin-bottom: auto;
}

#info p {
    margin-top: 10px;
}

/* Now playing part */

.cover {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-bottom: 10px;
}

.fm {
    margin-bottom: 10px;
}

.fmc img { 
   border-bottom: solid var(--fg) var(--u);
}

.fmc.nocover {
    background-color: var(--fg);
    -webkit-mask-image: url("/images/nocover.svg");
    mask-image: url("/images/nocover.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.fmc.nocover .cover {
    visibility: hidden;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--u);
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

@media (min-width: 651px) {
    .badges {
        position: absolute;
        bottom: 0px;
    }
}

.badges a {
    margin: 0; 
    line-height: 0;

    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.badges a:hover {
    -webkit-transform: scale(1.1) rotate(4deg);
    transform: scale(1.1) rotate(4deg);  
}

.badges img {
    display: block;
    image-rendering: pixelated; /* en mode nearest neighbour ou quoi */
}

/* ILS ONT HYPER RETOURNÉ LE SITE PUTAIN DE MERDE */

.badges a.hyper img {
    transition: transform 1s ease;
}

.badges a.hyper:hover img {
    animation: hyperretournement 1.2s ease-in-out infinite;
}

@keyframes hyperretournement {
    0%   { transform: rotateY(0deg) scale(1); }
    50%  { transform: rotateY(180deg) rotateZ(10deg) scale(1.2); }
    100% { transform: rotateY(360deg) scale(1); }
}

/* PEPSI PART */

#pespi {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#pespi video {
    width: min(80vw, 1400px);
    height: auto;
}

@media (max-width: 650px) {
    main {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 .5rem;
    }

    #pespi video {
        width: min(80vw, 1800px);
    }
}