html, body {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

main.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  background-color: ghostwhite;
  -webkit-background-size: 100% 100%;
     -moz-background-size: 100%;
          background-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

.container .qozPlayer {
  margin: 0.5em;
  z-index: 2;
  position: absolute;
}
.container .qozPlayer .qoz-main {
  -webkit-box-shadow: 1em 1em 6em -1em rgba(0, 0, 0, 0.4);
     -moz-box-shadow: 1em 1em 6em -1em rgba(0, 0, 0, 0.4);
          box-shadow: 1em 1em 6em -1em rgba(0, 0, 0, 0.4);
}
.container .qozPlayer.qoz-fullscreen {
  margin: 0;
}
.container .qozIcon {
  width: 4em;
  height: 4em;
  position: absolute;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='20' y='20' width='60' height='60' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M35 0C15.67 0 0 15.67 0 35V65C0 84.33 15.67 100 35 100H100V35C100 15.67 84.33 0 65 0H35ZM35 20H45V45H20V35C20 26.7157 26.7157 20 35 20ZM20 65V55H45V80H35C26.7157 80 20 73.2843 20 65ZM55 80H65C73.2843 80 80 73.2843 80 65V55H55V80ZM55 45H80V35C80 26.7157 73.2843 20 65 20H55V45Z' fill='%2300AA55'/%3E%3C/svg%3E");
}