html{height:100%;display:flex;justify-content:center;align-items:center}body{margin:0;height:90%;background-color:#111;font-family:sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center}iframe{border:none;display:block;max-width:100%}#shaderFrame{height:80%;z-index:1;position:relative;overflow:hidden;border:none;display:block;aspect-ratio:1/1}#uiFrame{background-color:#222;height:20%;z-index:1;position:relative;overflow:hidden;border:none;display:block;aspect-ratio:4/1}#prevArrow,#nextArrow{position:absolute;top:50%;transform:translateY(-50%);font-size:7.5vh;background:#00000080;color:#fff;border:none;padding:3vh 3.5vh;cursor:pointer;z-index:10}#prevArrow{left:calc(50% - 55vh)}#nextArrow{right:calc(50% - 55vh)}