:root {
  --doj-chrome-page: #f5f7fa;
  --doj-chrome-text: #1a1d2e;
  --doj-chrome-muted: #7a7f94;
  --doj-chrome-weak: #9aa0b5;
  --doj-chrome-border: #e7ebf2;
}

.doj-avatar {
  --doj-avatar-size: 20px;
  position: relative;
  display: inline-grid;
  width: var(--doj-avatar-size);
  height: var(--doj-avatar-size);
  flex: 0 0 var(--doj-avatar-size);
  vertical-align: middle;
  isolation: isolate;
}

.doj-avatar__image,
.doj-avatar__frame {
  position: absolute;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.doj-avatar__image {
  inset: 0;
  object-fit: cover;
  border-radius: 50% !important;
}

.doj-avatar--framed .doj-avatar__image {
  inset: 12%;
  width: 76% !important;
  height: 76% !important;
}

.doj-avatar__frame {
  z-index: 1;
  inset: 0;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

@media (min-width: 601px) {
  .nav {
    height: 64px;
    min-height: 64px;
    background: var(--doj-chrome-page);
    box-shadow: none;
  }

  .nav + .nav--shadow { display: none; }

  .nav > .row {
    max-width: 1440px;
    padding: 0 80px;
  }

  .nav .nav__list--main,
  .nav .nav__list--secondary { height: 64px; }

  .nav .nav__list--secondary {
    display: flex;
    align-items: center;
  }

  .nav .nav__list--main > .nav__list-item,
  .nav .nav__list--main > .nav__list-item > .nav__item {
    height: 64px;
    line-height: 64px;
  }

  .nav .nav__list--main > :first-child a {
    height: 64px !important;
    padding: 18px 28px 18px 0 !important;
    color: var(--doj-chrome-text) !important;
    font-size: 24px !important;
    line-height: 28px !important;
  }

  .nav .nav__list--main > .nav__list-item:not(:first-child) > .nav__item {
    padding: 0 12px;
    color: var(--doj-chrome-muted);
    font-size: 15px;
    font-weight: 400;
  }

  .nav .nav__list--main > .nav__list-item:not(:first-child) > .nav__item:hover,
  .nav .nav__list--main > .nav__list-item:not(:first-child) > .nav__item.nav--active {
    color: var(--doj-chrome-text);
    font-weight: 600;
  }

  .nojs .nav { margin-bottom: -64px; }

  #scratchpad,
  .fullscreen-content,
  .hint,
  #nprogress .bar { top: 64px; }

  #nprogress .spinner { top: 23px; right: 23px; }

  html.layout--basic:not(.page--homepage) #panel > .main { padding-top: 74px; }
  html.layout--immersive .nav--placeholder { height: 64px; }
}

@media (min-width: 1000px) {
  html.layout--basic:not(.page--homepage) #panel > .main { padding-top: 83px; }
}

.doj-site-footer {
  background: var(--doj-chrome-page);
  color: var(--doj-chrome-weak);
}

.page--homepage .doj-site-footer { margin-top: 36px; }

.doj-site-footer > .row {
  max-width: 1440px;
  padding: 0 80px;
}

.doj-site-footer > .row > .columns { padding: 0; }

.doj-site-footer__summary {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.doj-site-footer__brand { display: flex; flex-direction: column; gap: 2px; }
.doj-site-footer__brand strong { color: var(--doj-chrome-weak); font-family: Satisfy, cursive; font-size: 18px; font-weight: 400; }
.doj-site-footer__brand small { font-size: 11px; }
.doj-site-footer__summary p { margin: 0; font-size: 12px; }
.doj-site-footer__summary a,
.doj-site-footer .footer__extra-link-item > a { color: var(--doj-chrome-weak); text-decoration: none; }
.doj-site-footer__summary a:hover,
.doj-site-footer__summary a:focus-visible,
.doj-site-footer .footer__extra-link-item > a:hover,
.doj-site-footer .footer__extra-link-item > a:focus-visible { color: #4c6fff; text-decoration: none; }
.doj-site-footer .footer__extra-link { padding: 10px 0 14px; border-top: 1px solid var(--doj-chrome-border); font-size: 11px; }

html.layout--immersive .doj-site-footer { background: transparent; color: #fff; }
html.layout--immersive .doj-site-footer .footer__extra-link { border-top-color: rgba(255, 255, 255, .24); }
html.layout--immersive .doj-site-footer__brand strong,
html.layout--immersive .doj-site-footer__summary a,
html.layout--immersive .doj-site-footer .footer__extra-link-item > a { color: #fff; }

.theme--dark {
  --doj-chrome-page: #15181d;
  --doj-chrome-text: #eef1f5;
  --doj-chrome-muted: #a5adba;
  --doj-chrome-weak: #858e9c;
  --doj-chrome-border: #303640;
}

.theme--dark .nav,
.theme--dark .doj-site-footer { background: var(--doj-chrome-page); }

html .nothing-icon {
  background-image: url('/doj-site-art/nothing-icon-anime-v1.webp?v=9a28ff37');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

html.theme--dark .nothing-icon { filter: none; }

html.page--error .error__twd2 {
  background-image: url('/doj-site-art/nothing-icon-anime-v1.webp?v=9a28ff37');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

html.theme--dark.page--error .error__twd2 { filter: none; }

@media (max-width: 1100px) {
  .doj-site-footer > .row { padding-right: 32px; padding-left: 32px; }
}

@media (min-width: 601px) and (max-width: 1100px) {
  .nav > .row { padding-right: 32px; padding-left: 32px; }
  .nav .nav__list--main > .nav__list-item:not(:first-child) > .nav__item { padding: 0 7px; font-size: 13px; }
}

@media (max-width: 900px) {
  .doj-site-footer > .row { padding-right: 20px; padding-left: 20px; }
}

@media (max-width: 600px) {
  .doj-site-footer__summary {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding: 16px 0;
  }

  .doj-site-footer__summary p { line-height: 18px; }
  .doj-site-footer .footer__extra-link { padding-top: 12px; }
}

@media (max-width: 480px) {
  .doj-site-footer > .row { padding-right: 12px; padding-left: 12px; }
}