body, html {margin:0;padding:0;background:green;}
/*
.text {font-size:30px;font-family: helvetica,arial;
    position:absolute;color:red;font-weight:bold;padding:20px;} */


    a img {filter: brightness(100%);}
    a img:hover {filter: brightness(105%);}
    .container {padding:0px;
    display: flex; align-items: center; justify-content: center;}

    @media (orientation: landscape) {
        .container {height:100vh;}
        .portrait {display:none;}
        .landscape {display:block;}
        img {width:auto;height:100vh;}

}

    @media (orientation: portrait) {
        .portrait {display:block;}
        .landscape {display:none;}
        img {width:100%;height:auto;}


    }

#video-viewport {
    position: absolute;top: 0;overflow: hidden;
    z-index: -1; /* for accessing the video by click */
}

#top, #bottom {width: 220px;font-size:30px;font-family: helvetica,arial;
    position:absolute;color:red;font-weight:bold;padding:40px 40px;background: url('../images/audio-on4.png')
     no-repeat center right;background-size:contain;filter: saturate(0.9);}
#top.off {background: url('../images/audio-off.png')
     no-repeat center right;background-size:contain;}
#bottom {bottom:30px;right:0px;text-align:right;background: none;color:white;}


 @media(max-width:1024px) {
#top, #bottom {width:340px;font-size:50px;}} 

#top:hover {filter: saturate(1);}    
#bottom:hover {color:#eee;}    
#top a,#bottom a {text-decoration:none;color:red;}