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

#wrapper {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background-color: aqua;
}

.framework {
  position: absolute;
  z-index: 1;
}
.framework.framework--custom {
  width: 300px;
  height: 300px;
}
.framework.framework--16-9-99percent {
  width: 99vw; /* 99% of viewport width */
  height: 55.69vw; /* ratio = 9/16 * 99 = 55.69 */
  max-height: 99vh;
  max-width: 176vh; /* 16/9 * 99 = 176 */
  background-color: aliceblue;
}
.framework.framework--16-9-90percent {
  width: 90vw; /* 90% of viewport width */
  height: 50.625vw; /* ratio = 9/16 * 90 = 50.625 */
  max-height: 90vh;
  max-width: 160vh; /* 16/9 * 90 = 160 */
  background-color: aliceblue;
}
.framework.framework--centered {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.framework .content {
  position: relative;
  width: 100%;
  height: 100%;
}/*# sourceMappingURL=style.css.map */