/* #region ===== Font & Body ===== */

@font-face {
  font-family: "Cal Sans";
  src: url("../calsans-regular.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

body {
  margin: 0 10px 20px 10px;
  font-family: "Cal Sans";
  background: var(--bg);
  user-select: none;
  color: white;
  overflow-x: hidden;
}

body.modal-open {
  overflow: hidden;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

#page {
  opacity: 0;
  transition: opacity 0.2s ease;
}

#page.visible {
  opacity: 1;
}

/* #endregion */

/* #region ===== Variables ===== */

:root {
  --orange: #ff8000;
  --bg: #090709;
  --dark-blue: #1e2c59;
  --table-bg: #1a1a1a;
  --light-gray: #696868;
  --white: #ffffff;
  --green: #37e760;
  --light-blue: #19a8cc;
  --red: #ff5c5c;
}

:root {
  --text: clamp(10px, 10px + 0.4vw, 16px);
  --svg: clamp(20px, 18.29px + 0.536vw, 26px);
}

/* #endregion */

/* #region ===== Title ===== */

.main-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(10px, 6px + 1.25vw, 24px);
}

.main-title-text {
  color: var(--white);
  font-size: clamp(46px, 35.14px + 3.393vw, 84px);
}

/* #endregion */