/*
 * ============================================================
 * PAGE
 * ============================================================
 */

html,
body {

    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #000;

}


/*
 * ============================================================
 * CENTRE LA VIDÉO
 * ============================================================
 */

body {

    display: flex;

    justify-content: center;
    align-items: center;

}


/*
 * ============================================================
 * VIDÉO
 * ============================================================
 */

#mainVideo {

    display: block;

    width: 100vw;
    height: 100vh;

    object-fit: contain;

    background: #000;

}


/*
 * ============================================================
 * BOUTON SON
 * ============================================================
 *
 * Petit point vert discret.
 *
 * ============================================================
 */

#soundButton {

    position: fixed;

    top: 25px;
    right: 25px;


    width: 14px;
    height: 14px;


    padding: 0;

    border: none;

    border-radius: 50%;


    background:
        rgba(0, 176, 80, .45);


    box-shadow:
        0 0 12px
        rgba(0, 176, 80, .35);


    cursor: pointer;

    z-index: 100;


    transition:
        transform .2s ease,
        opacity .5s ease,
        background .3s ease,
        box-shadow .3s ease;

}


/*
 * ============================================================
 * SURVOL
 * ============================================================
 */

#soundButton:hover {

    transform:
        scale(1.35);


    background:
        rgba(0, 176, 80, .75);


    box-shadow:
        0 0 16px
        rgba(0, 176, 80, .55);

}


/*
 * ============================================================
 * SON ACTIVÉ
 * ============================================================
 */

#soundButton.active {

    background:
        rgba(0, 220, 100, .9);


    box-shadow:
        0 0 18px
        rgba(0, 220, 100, .7);

}


/*
 * ============================================================
 * DISPARITION
 * ============================================================
 */

#soundButton.hide {

    opacity: 0;

    transform:
        scale(.4);

    pointer-events: none;

}


/*
 * ============================================================
 * MOBILE
 * ============================================================
 */

@media (max-width: 600px) {

    #soundButton {

        top: 18px;
        right: 18px;

        width: 12px;
        height: 12px;

    }

}