/* @font-face {
  font-family: "ZpixReviewOnline";
  src: url(https://zpix.now.sh/zpix.woff2?v2022-12-11) format("woff2");
  src: url(https://static.bmmmd.com/zpix.woff2?v2022-12-11) format('woff2');
} */
/*
html,
body,
pre,
code,
kbd,
samp {
   font-family: "ZpixReviewOnline", "Press Start 2P", "sans-serif"; 
  font-family: "sans-serif";
}*/
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.showcase.bottom a {
  text-decoration: none !important;
}
.item > * {
  margin-bottom: 1.5rem !important;
}
.main.container {
  min-width: 1200px;
  width: 60vw;
  margin: 0 auto;
  margin-top: 8rem;
}
.showcase {
  margin: 1.5rem 1.5rem 0 1.5rem;
}
/* Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11;
  border-bottom: 4px solid #d3d3d3;
  background-color: white;
}
header p {
  margin-bottom: 5px;
}
header i {
  margin-right: 1rem;
}
header > .container {
  /* display: flex;
  align-items: baseline;
  width: 57vw;
  margin: 0 auto;
  padding-top: 1rem; */
  margin: 0 auto;
  width: 60vw;
  min-width: 1200px;
  transition: all 0.2s ease;
}
.nav-brand {
  margin-left: 1rem;
}
.nav-brand .brand-logo {
  margin-right: 1rem;
}
.nav-brand a {
  text-decoration: none;
  color: inherit;
}
.nav-brand > a {
  color: #212529;
  text-decoration: none;
}
/* Header-sticky */
header.sticky > .container {
  font-size: 0.8rem;
  padding: 0;
  align-items: center;
}
header.sticky .nav-brand h1 {
  margin: 0;
}
header.sticky .nav-brand p {
  display: none;
  margin-bottom: 0;
  font-size: 0.6rem;
}
#log {
  overflow-x: auto;
  height: 40vh;
  font-size: small;
}
#log:focus {
  outline: none;
}
.logImg {
  max-width: 80rem;
  max-height: 35rem;
}
.nes-btn,
.nes-container,
.nes-input,
select {
  border-image-repeat: unset !important;
}
.with-title .title {
  margin-top: -2.2rem !important;
}
.hide {
  display: none !important;
}
#media {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#media .file {
  margin-right: 0.5rem;
  margin-bottom: 0.3rem;
  /* display: inline; */
}
#media .cancel {
  margin-left: -0.3rem;
}
.common {
  width: 15rem;
}
#cmd {
  display: flex;
}
#cmd .cancel {
  margin-left: -0.3rem;
}
#cmd .close {
  margin: auto;
  transform: scale(1.2);
  margin-right: 5px;
}
#run {
  display: flex;
  margin-top: 1rem;
  justify-content: flex-start;
}
#run > *:not(:first-child),
#neighbors > *:not(:first-child) {
  margin-left: 0.5rem;
}
.language {
  width: 10rem;
}
#media .nes-icon {
  margin: auto;
  transform: scale(1.2);
  /* margin-right: 5px; */
  margin-left: -0.3rem;
}
#mask {
  width: 100%;
  height: 100%;
  z-index: 12;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.65);
  position: absolute;
}
#preview {
  aspect-ratio: 16/9;
}
.to-github {
  transform: scale(2.5);
  /* margin-bottom: 2rem; */
}
.bottom .icon {
  margin-bottom: 8px;
}
.hide {
  display: none;
}
.sortable-ghost {
  opacity: 0.4;
}

/* 右键菜单 */
#contextMenu {
  display: none;
  position: absolute;
  background-color: #fff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 50%);
  z-index: 1000;
}
#contextMenu .nes-container {
  padding: 0.5rem;
}
#contextMenu .nes-list {
  padding-left: 1.5rem;
}
#contextMenu .nes-list li {
  padding: 0.2rem 0 0.2rem 0;
}
#contextMenu ul li:hover::before {
  position: absolute;
  top: calc(50% - 8px);
  left: -22px;
  content: "";
  width: 2px;
  height: 2px;
  color: #212529;
  box-shadow: 8px 2px, 10px 2px, 6px 4px, 8px 4px, 10px 4px, 12px 4px, 4px 6px,
    6px 6px, 8px 6px, 10px 6px, 12px 6px, 14px 6px, 4px 8px, 6px 8px, 8px 8px,
    10px 8px, 12px 8px, 14px 8px, 6px 10px, 8px 10px, 10px 10px, 12px 10px,
    8px 12px, 10px 12px;
}
#contextMenu ul li:hover {
  background-color: #d1d1d1;
}

.otherButton {
  position: absolute;
  font-size: 12px;
  bottom: -4px;
  right: -8px;
}

.nes-checkbox + span::before,
.nes-checkbox:checked + span::before {
  top: 0;
}

/* 横屏 */
@media (max-width: 1200px), screen and (orientation: portrait) {
  .main.container,
  header > .container {
    width: 100%;
    min-width: 100%;
  }
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  body,
  header,
  .nav-brand > a {
    background: #212529;
    color: white;
  }
  .nes-btn {
    border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(255,255,255)" /></svg>');
  }
  #contextMenu ul li:hover::before,
  .nes-list.is-circle li::before {
    color: white;
  }
  .otherButton {
    bottom: 4px;
    right: 0px;
  }
}