body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #252525;
  background-color: #3c3c3c;
}

#three-canvas {
  max-width: calc(100% - 48px);
  max-height: calc(100% - 48px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 2.9px 8px rgba(0, 0, 0, 0.037),
    0px 6.8px 14.2px rgba(0, 0, 0, 0.053),
    0px 12.3px 19.7px rgba(0, 0, 0, 0.065),
    0px 21.1px 27.7px rgba(0, 0, 0, 0.077),
    0px 37.6px 45.6px rgba(0, 0, 0, 0.093), 0px 84px 80px rgba(0, 0, 0, 0.13);
}

@media (min-width: 1024px) {
  #three-canvas {
    max-width: calc(1024px - 48px);
    max-height: calc(100% - 48px);
  }
}

@media (aspect-ratio: 1/1) {
  #three-canvas {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: none;
  }
}