:root {
  color-scheme: dark;
  background: #020913;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 44%, #123b61 0%, #061426 44%, #01050b 100%);
}

body {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

canvas {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(100vw, 1600px, calc(100vh * 16 / 9));
  height: min(100vh, 900px, calc(100vw * 9 / 16));
  display: block;
  transform: translate(-50%, -50%);
  outline: 0;
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
  html {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  body {
    height: auto;
    min-height: 100%;
    overflow: visible;
    touch-action: pan-y;
  }

  canvas {
    position: relative;
    inset: auto;
    width: 100vw !important;
    height: auto !important;
    max-width: none;
    max-height: none;
    transform: none;
    touch-action: pan-y !important;
  }
}
@font-face {
  font-family: "Pretendard";
  src: url("/hoophop-powerball/assets/fonts/Pretendard-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Pretendard";
  src: url("/hoophop-powerball/assets/fonts/Pretendard-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: "Pretendard";
  src: url("/hoophop-powerball/assets/fonts/Pretendard-ExtraBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: block;
}
@font-face {
  font-family: "Pretendard";
  src: url("/hoophop-powerball/assets/fonts/Pretendard-ExtraBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: block;
}