:root {
  --background-color: #fefefe;
  --background: var(--background-color);

  --color-transparent: rgba(0, 0, 0, 0);
  --color: rgba(0, 0, 0, 1);
  --color-05: rgba(0, 0, 0, .05);
  --color-10: rgba(0, 0, 0, .10);
  --color-25: rgba(0, 0, 0, .25);
  --color-33: rgba(0, 0, 0, .33);
  --color-50: rgba(0, 0, 0, .5);
  --color-75: rgba(0, 0, 0, .75);
  --color-90: rgba(0, 0, 0, .9);
  --color-inv: rgba(255, 255, 255, 1);
  --color-inv-05: rgba(255, 255, 255, .05);
  --color-inv-10: rgba(255, 255, 255, .10);
  --color-inv-25: rgba(255, 255, 255, .25);
  --color-inv-33: rgba(255, 255, 255, .33);
  --color-inv-50: rgba(255, 255, 255, .5);
  --color-inv-75: rgba(255, 255, 255, .75);
  --color-inv-90: rgba(255, 255, 255, .9);
  --border-color: var(--color-75);
  --color-bg-primary: var(--border-color);
  --color-bg-secondary: var(--border-color);
  --color-shadow: var(--border-color);
  --box-shadow: 2px 2px 10px;

  --dialog-radius: 1rem;
  --dialog-background-color: var(--color-inv-25);

  --mu-img-background: none;
  --mu-img-background-hover: none;
  --mu-text-img-shadow: none;
  --mu-text-logo: none;

  --topbar-width: 100%;
  --topbar-height: 56px;
  --topbar-background-hovered: var(--color-25);
  --topbar-logo-background: var(--color-25);
  --topbar-logo-background-hovered: var(--color-50);
  --topbar-padding: 8px 0;
  --topbar-logo-height: 40px;

  --sidebar-height: calc(100% - var(--topbar-height));
  --sidebar-width: 4rem;
  --sidebar-border-radius: 0.25rem;
  --sidebar-pill-height: 56px;
  --sidebar-puller-height: 4rem;
  --sidebar-puller-width: 1.25rem;
  --sidebar-background-hovered: var(--color-10);
  --sidebar-background-selected: var(--color-33);

  --topbar-z-index: 10000;
  --sidebar-z-index: 10000;
  --main-page-z-index: 0;
  /* dummy sidebar must be placed below main page not to block scroll action */
  --dummy-sidebar-z-index: -10000;

  --scrollbar-width: 18px;
  /*
  I really want to use these values on media query,
  but CSS currently cannot do that.
  */
  --tablet-width: 820px;
  --mobile-width: 480px;

  --transition-duration: .3s;

  /* Resetting mvp.css */
  --hover-brightness: 1.2;
}

:root[color-theme='light'] {
  --mu-img-background: rgba(0, 0, 0, .15);
  --mu-img-background-hover: rgba(0, 0, 0, .5);
  --mu-text-img-shadow: drop-shadow(0 0 0.75rem var(--color-25));
  --mu-text-logo: invert(1);
  --border-color: var(--color-25);
  /* --color-bg-secondary: var(--color-transparent); */
  --dialog-background-color: var(--color-inv-25);

  --hover-brightness: unset !important;
}

:root[color-theme='dark'] {  /* also known as dusk */
  --background-color: #036564;
  --background: #036564;
  --background: -webkit-linear-gradient(#036564, #033649);
  --background: linear-gradient(#036564, #033649);

  --color: rgba(255, 255, 255, 1);
  --color-05: rgba(255, 255, 255, .05);
  --color-10: rgba(255, 255, 255, .10);
  --color-25: rgba(255, 255, 255, .25);
  --color-33: rgba(255, 255, 255, .33);
  --color-50: rgba(255, 255, 255, .5);
  --color-75: rgba(255, 255, 255, .75);
  --color-90: rgba(255, 255, 255, .9);
  --color-inv: rgba(0, 0, 0, 1);
  --color-inv-05: rgba(0, 0, 0, .05);
  --color-inv-10: rgba(0, 0, 0, .10);
  --color-inv-25: rgba(0, 0, 0, .25);
  --color-inv-33: rgba(0, 0, 0, .33);
  --color-inv-50: rgba(0, 0, 0, .5);
  --color-inv-75: rgba(0, 0, 0, .75);
  --color-inv-90: rgba(0, 0, 0, .9);

  --topbar-background-hovered: var(--color-inv-25);
  --topbar-logo-background: unset;
  --topbar-logo-background-hovered: unset;
  --sidebar-background-hovered: var(--color-inv-25);
  --sidebar-background-selected: var(--color-inv-50);
}

:root[color-theme='deep-dark'] {
  --background-color: #0a0a0a;

  --color: rgba(255, 255, 255, 1);
  --color-05: rgba(255, 255, 255, .05);
  --color-10: rgba(255, 255, 255, .10);
  --color-25: rgba(255, 255, 255, .25);
  --color-33: rgba(255, 255, 255, .33);
  --color-50: rgba(255, 255, 255, .5);
  --color-75: rgba(255, 255, 255, .75);
  --color-90: rgba(255, 255, 255, .9);
  --color-inv: rgba(0, 0, 0, 1);
  --color-inv-05: rgba(0, 0, 0, .05);
  --color-inv-10: rgba(0, 0, 0, .10);
  --color-inv-25: rgba(0, 0, 0, .25);
  --color-inv-33: rgba(0, 0, 0, .33);
  --color-inv-50: rgba(0, 0, 0, .5);
  --color-inv-75: rgba(0, 0, 0, .75);
  --color-inv-90: rgba(0, 0, 0, .9);

  --topbar-logo-background: unset;
  --topbar-logo-background-hovered: unset;
}

::backdrop {
  backdrop-filter: blur(0.25rem);
  opacity: 0.9;
}

::-moz-selection {
  /* Code for Firefox */
  color: white;
  background: purple;
}

::selection {
  color: white;
  background-color: purple;
}

@font-face {
  font-family: 'neodgm';
  font-style: normal;
  font-weight: normal;
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/NeoDunggeunmoPro-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'leferi-point-black';
  font-style: normal;
  font-weight: 900;
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-BlackA.woff') format('woff');
}

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

  -webkit-user-drag: none;
  /* Safari */
  -khtml-user-drag: none;
  /* Konqueror HTML */
  -moz-user-drag: none;
  /* Old versions of Firefox */
  -o-user-drag: none;
  /* Old versions of Opera */
  user-drag: none;
  /* Non-prefixed version */
}

body, html, main {
  overscroll-behavior: none;

  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
     supported by Chrome, Edge, Opera and Firefox */

  font-family:
  Pretendard, Open Sans, arial, Apple SD Gothic Neo, Noto Sans CJK KR,
  본고딕, KoPubDotum, 나눔바른고딕, 나눔고딕, NanumGothic,
  맑은고딕, Malgun Gothic, sans-serif !important;
  word-break: keep-all;
  overflow-wrap: break-all;

  background-color: var(--background-color) !important;
  background: var(--background) !important;
}

body {
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: 0 0;
  -webkit-overflow-scrolling: touch;

  width: 100%;
  height: 100%;

  background-color: var(--background-color) !important;
  background: var(--background) !important;
  color: var(--color) !important;
}

footer,
header,
main {
  /* Resetting mvp.css */
  padding: unset;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: 'leferi-point-black', sans-serif;

  /* Resetting react-bootstrap */
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

section aside, form {
  margin: 1rem;
  padding: 1.25rem;
  box-shadow: var(--box-shadow) var(--color-shadow);
}

section aside:hover {
  /* Resetting mvp.css */
  box-shadow: var(--box-shadow) var(--color-shadow);
}

details, summary {
  /* Resetting mvp.css */
  margin: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

ol li,
ul li {
  /* Resetting mvp.css */
  padding: unset;
}

nav {
  /* Resetting mvp.css */
  margin-bottom: 0 !important;
}

picture {
  display: flex;
  justify-content: center;
  align-items: center;
}

input[type="text"] {
  /* Resetting mvp.css */
  width: 100% !important;
}

code {
  /* Resetting mvp.css */
  background-color: var(--color-50) !important;
  color: var(--color-inv) !important;
  margin: 0.25rem !important;
  padding: 0.25rem 0.75rem !important;
}

table {
  table-layout: fixed;

  /* Resetting mvp.css */
  display: table;
  white-space: unset;
}

table thead th:first-child, table tr td:first-child {
  text-align: unset;
}