<div id="borda">
    <div id="tela">

    </div>

    <div id="liga-desliga" onclick="LigaDesligaTv()">
    </div>

    <div id="muda1">
    </div>

    <div id="muda2">
    </div>

</div>

<div id="controle">
    <div id="led">
    </div>

    <div id="botoes">
        <button id="power" onclick="actionTV()">Power</button>
        <button id="Bum">1</button>
        <button id="Bdois">2</button>
        <button id="Btres">3</button>
        <button id="Bquatro">4</button>
        <button id="Bcinco">5</button>
    </div>
</div>

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

html,
body {
    height: 100%;
    width: 100%;
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
}

#borda {
    height: 100%;
    width: 100%;

    background-size: cover;
    background-repeat: no-repeat;
}

#tela {
    height: 100%;
    width: 100%;
    background-color: #000;

    /* background-size: cover; */
    /* background-repeat: no-repeat; */
}

#controle {
    position: relative;
    width: 100%;
}

#controle #botoes {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    bottom: 20px;
}

#controle #botoes button {
    background: #fff;
    border: 0;
    padding: 10px;
    margin: 0 5px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 9);
    cursor: pointer;
    outline: 0;
    transition-duration: 300ms;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
}

#controle #botoes button:hover {
    background: #ddd;
    transform: scale(1.2);
    transition-duration: 300ms;
    /* box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px; */
}

let cont = 0;

function desligarTV() {
    document.getElementById("tela").style.backgroundImage =
        "url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/1ed4f172-4c6d-4c99-870a-0399a63888bb/d6hutyd-34dee97b-2054-4d8e-940c-a4bde9c37c87.jpg/v1/fill/w_1024,h_663,q_75,strp/twitch_tv_offline_wallpaper_by_charteddesigns_d6hutyd-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMWVkNGYxNzItNGM2ZC00Yzk5LTg3MGEtMDM5OWE2Mzg4OGJiXC9kNmh1dHlkLTM0ZGVlOTdiLTIwNTQtNGQ4ZS05NDBjLWE0YmRlOWMzN2M4Ny5qcGciLCJoZWlnaHQiOiI8PTY2MyIsIndpZHRoIjoiPD0xMDI0In1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLndhdGVybWFyayJdLCJ3bWsiOnsicGF0aCI6Ilwvd21cLzFlZDRmMTcyLTRjNmQtNGM5OS04NzBhLTAzOTlhNjM4ODhiYlwvY2hhcnRlZGRlc2lnbnMtNC5wbmciLCJvcGFjaXR5Ijo5NSwicHJvcG9ydGlvbnMiOjAuNDUsImdyYXZpdHkiOiJjZW50ZXIifX0.hYaefPs-WMjgZIPJTnAkf23KFJ37_fsTi3ffWPAPrC0')";
}

function actionTV() {
    if (cont == 0) {
        document.getElementById("tela").style.backgroundImage =
            "url('https://2.bp.blogspot.com/-8CkUZfi0feE/WBOk0gETgfI/AAAAAAAANLw/xB4rNpYSKDMcbOZR5pQtp6d_v--VXSSPACLcB/s1600/TVD_5.gif')";
        cont++;
    } else {
        document.getElementById("tela").style.backgroundImage =
            "url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTMMLayBiQzsvQ-FbbEBb0Zd6QanmVgrkHtQ&usqp=CAU')";
        setTimeout(desligarTV, 9000);
        cont = 0;
    }
}