.media-pre-div { position:relative; margin:0 auto; overflow:hidden; }
.media-pre-div video { z-index:1; display:block; width:100%; position:relative; }
.media-pre-div video::-webkit-media-controls-fullscreen-button { display:none; }
.media-pre-div video::-webkit-media-controls-panel { background-image:none; }
.toggle-details { position:absolute;top:0px;left:0px;width:100%; height:100%; }
.toggle-details summary .open, .toggle-details[open] summary .close  { display:block;}
.toggle-details summary .close, .toggle-details[open] summary .open  { display:none; }
.toggle-details summary { z-index:3; position:absolute; top:20px;right:20px; border-radius:20px; padding:10px 20px; background-color:#00000080; cursor:pointer; list-style-type:none; }
.toggle-details summary::-webkit-details-marker { display:none; }
.toggle-details-div { z-index:2; position:absolute; top:30px; left:30px; width:calc(100% - 60px); height:calc(100% - 60px); padding:15px 30px; background-color:#00000080; overflow-x:hidden; overflow-y:auto; box-sizing:border-box; }
.toggle-details-div::-webkit-scrollbar { width:10px; height:10px; }
.toggle-details-div::-webkit-scrollbar-thumb { background-color:#00000060; border-radius:10px; }
.toggle-details pre { background-color:transparent; padding:0px; border:none; white-space:pre-wrap; }
@media screen and (hover:none) and (pointer:coarse)  {
    @media (orientation: portrait) {
        .toggle-details summary { top:10px; right:10px; }
        .toggle-details-div { position:absolute; top:20px; left:20px; width:calc(100% - 40px); height:calc(100% - 40px); }
    }
    @media (orientation: landscape) {
        .toggle-details summary { top:20px; right:20px; }
        .toggle-details-div { position:absolute; top:30px; left:30px; width:calc(100% - 60px); height:calc(100% - 60px); }
    }
}