/* ==========================================================
   Global Styles
   ========================================================== */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #000;
    cursor: none;
    font-family: Arial, sans-serif;
}

/* ==========================================================
   Viewer Container
   ========================================================== */

#viewer {
    width: 100vw;
    height: 100vh;
    position: relative;
    background: #000;
}

/* ==========================================================
   Media Elements
   ========================================================== */

.media {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;
    background: #000;

    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

/* Hidden State */

.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================
   Empty Message
   ========================================================== */

.message {
    position: absolute;
    inset: 0;

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

    color: white;
    font-size: 2rem;
    text-align: center;
}