*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
}

body{
    display:flex;
    justify-content:center;
    align-items:center;
}

#player{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    background:#000;
}

.media{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:var(--modo-imagem, contain);

    opacity:0;

    transition: opacity 2s ease-in-out;

    z-index:1;

    will-change: opacity;
}

.media.ativo{
    opacity:1;
    z-index:2;
}

img.media{
    background:#000;
}

video.media{
    background:#000;
}

#status{
    position:fixed;

    right:10px;
    bottom:10px;

    padding:6px 10px;

    background:rgba(0,0,0,.6);

    color:#fff;

    font-size:12px;

    border-radius:6px;

    z-index:9999;

    font-family:Arial, sans-serif;

    user-select:none;
}

#status:empty{
    display:none;
}