:root {
  --main-color-dark: #1e1068;
  --main-color-light: #ff8b00;
  --bg-main-color-dark: #2c2986;
  --bg-main-color-light: #efefef;
  --bg-footer-color: #010532;
  --btn-color: #ff4b00;
  --btn-color-dark: #cc3c00;
  --bar-color: #ffa300;
  --bar-color-left: #ffa300;
  --bar-color-right: #1e1068;

  /* --font-xxxlg: 3rem;
  --font-xxlg: 2rem;
  --font-xlg: 1.6rem;
  --font-lg: 1.3rem;
  --font-md: 1.2rem;
  --font-normal: 1rem;
  --font-sm: 0.8rem; */

  --font-xxxlg: 3.6rem;
  --font-xxlg: 3rem;
  --font-xlg: 2.4rem;
  --font-lg: 1.6rem;
  --font-md: 1.4rem;
  --font-normal: 1.2rem;
  --font-sm: 1rem;
}

/* body {
  font-family: "Poppins", sans-serif;
  font-size: var(--font-normal);
  color: var(--main-color-dark);
  padding-top: 96px;
}

h2 {
  font-size: var(--font-xlg);
} */

.font-xxxlg {
  font-size: var(--font-xxxlg);
}

.font-xxlg {
  font-size: var(--font-xxlg);
}

.font-xlg {
  font-size: var(--font-xlg);
}

.font-lg {
  font-size: var(--font-lg);
}

.font-md {
  font-size: var(--font-md);
}

.font-normal {
  font-size: var(--font-normal);
}

.font-sm {
  font-size: var(--font-sm);
}

.font-bold {
  font-weight: 600;
}

.text-underline {
  text-decoration: underline !important;
}

.main-color {
  color: var(--main-color-dark);
}

.main-color-light {
  color: var(--main-color-light);
}

.main-color-dark {
  color: var(--btn-color);
}

.bg-main-color-light {
  color: var(--bg-main-color-light);
}

.btn-color {
  background-color: var(--btn-color);
}

.btn-color:not(:disabled):hover {
  background-color: var(--btn-color-dark);
}

.btn-color:disabled:hover {
  cursor: not-allowed;
}

.color-bar,
.color-sub-bar {
  width: 120px;
  height: 5px;
  margin: 0 auto;
  background: var(--main-color-light);
}

.color-sub-bar {
  width: 60px;
}

.color-separator,
.color-separator-thick {
  width: 100%;
  height: 1px;
  margin: 0 auto;
  background: var(--bg-main-color-dark);
}

.color-separator-thick {
  height: 2px;
}

.main-button {
  border: 0;
  white-space: nowrap;
  padding: 0.25rem 1rem;
  text-align: center;
  transition: 0.5s;
  color: #fff;
  /* border-radius: 100px; */
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  background: var(--btn-color);
}

.main-button:hover {
  color: #fff;
  text-decoration: none;
  background: var(--btn-color-dark);
}

/* Modification */
#mainBannerModal,
#channelListModal,
#joinModal,
#loginModal,
#resetModal,
#noticeModal,
#contactModal {
  color: var(--main-color-dark);
  font-size: var(--font-normal);
}

#mainBannerModal li ul {
  display: block;
  list-style: square;
  padding-left: 3rem;
}