/**
 * Fichier  : /ott/library/assets/css/style.css
 * Fonction : style de la vidéothèque
 */


/* ==================================================
   LIBRARY WRAPPER
================================================== */

#library {
    position: relative;
    overflow: hidden;
}

#library,
#library *,
#library *::before,
#library *::after {
    box-sizing: border-box;
}

#library {
    min-height: 100vh;
}

#library {
    background:
        radial-gradient(
            circle at top left,
            rgba(255,120,0,0.12),
            transparent 34%
        ),
        radial-gradient(
            circle at top right,
            rgba(233,64,27,0.10),
            transparent 36%
        ),
        #050505;
}

#library {
    color: #fff;
}


/* ==================================================
   MAIN
================================================== */

#library > main {
    position: relative;
    z-index: 1;
}

#library > main {
    display: flex;
    flex-direction: column;
    gap: 2em;
}


/* ==================================================
   LINK RESET
================================================== */

#library a {
    color: inherit;
    text-decoration: none;
}


/* ==================================================
   IMAGE RESET
================================================== */

#library img {
    display: block;
    max-width: 100%;
}


/* ==================================================
   ACCESSIBILITY
================================================== */

#library button {
    font: inherit;
}

#library button:focus-visible,
#library a:focus-visible {
    outline: none;
}

#library button:focus-visible,
#library a:focus-visible {
    box-shadow:
        0 0 0 3px rgba(255,123,0,0.25);
}


/* ==================================================
   RESPONSIVE
================================================== */

@media screen and (max-width: 768px) {

    #library {
        padding: 22px 0 36px 0;
    }

    #library > main {
        gap: 34px;
    }

}