@font-face {
  font-family: 'BestTen-DOT';
  src: url('https://drumanekotoonlab.monster/font/BestTen-DOT.woff') format('woff');
}

@font-face {
  font-family: 'madoufmg';
  src: url('https://drumanekotoonlab.monster/font/madoufmg.woff') format('woff');
}

/* crtエフェクト */
.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(99deg, rgba(99, 0, 0, 0.00), rgba(0, 255, 0, 0.00), rgba(0, 0, 255, 0.0));
  z-index: 1001;
  background-size: 100% 2px, 2px 100%;
  pointer-events: none;
}

@keyframes flicker {
  0% {
  opacity: 0.27861;
  }
  5% {
  opacity: 0.34769;
  }
  10% {
  opacity: 0.23604;
  }
  15% {
  opacity: 0.10626;
  }
  20% {
  opacity: 0.18128;
  }
  25% {
  opacity: 0.10626;
  }
  30% {
  opacity: 0.18128;
  }
  35% {
  opacity: 0.23604;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.15);
  opacity: 0;
  z-index: 1001;
  pointer-events: none;
  animation: flicker 0.1s infinite;
}

body {
    font-family: 'BestTen-DOT', sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 8px;
    background-color: #000;
    cursor: url(https://drumanekotoonlab.monster/img/cursorimg.png), auto;
}

/* カーソル（ポインター） */
a, button, button:hover, label, label:hover, nav,li img, nav,li img:hover {
  cursor: url(https://drumanekotoonlab.monster/img/cursorimg2.png), pointer;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: color(display-p3 0 1 0) #000;
}

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
}

  *::-webkit-scrollbar-track {
    background: #000;
}

  *::-webkit-scrollbar-thumb {
    background-color: color(display-p3 0 1 0);
    border-radius: 10px;
    border: 3px solid #000;
}

.wrapper {
    width: 900px;
    height: 730px;
    background-color: #000;
    margin: auto;
    padding-top: 40px;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 30px;
}

.left {
    display: inline-block;
    vertical-align: top;
    width: 80px;
}

.menu {
    border: 2px solid color(display-p3 0 1 0);
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    background-color: #000;
}

.button {
    font-size: 15px;
    color: color(display-p3 0 1 0);
    text-align: center;
    border: 4px outset #54FF56;
    padding: 3px;
    margin-bottom: 10px;
    background-color: color(display-p3 0 1 0);
}

.button:hover {
    border: 4px inset #54FF56;
}

.button a {
     color: #000;
     text-decoration: none;
}

.button a:visited {
    color: #000;
    text-decoration: none;
}

.main {
    border: 3px solid color(display-p3 0 1 0);
    border-top: 25px solid color(display-p3 0 1 0);
    display: inline-block;
    vertical-align: top;
    width: 810px;
    height: 700px;
    background: #000;
    position: relative;
}

.close {
    position: absolute;
    top: -22px;
    right: 6px;
}

.close img {
    width: 12px;
    height: 11px;
    border: 2px solid #009400;
    padding: 2px;
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
}

.close img:hover {
    border: 2px inset #009408;
}

.maximize {
    position: absolute;
    top: -22px;
    right: 29px;
}

.maximize img {
    width: 12px;
    height: 11px;
    border: 2px solid #009400;
    padding: 2px;
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
}

.maximize img:hover {
    border: 2px inset #009408;
}

.minimize {
    position: absolute;
    top: -22px;
    right: 52px;
}

.minimize img {
    width: 12px;
    height: 11px;
    border: 2px solid #009400;
    padding: 2px;
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
}

.minimize img:hover {
    border: 2px inset #009408;
}

.main iframe {
    height: 100%;
    width: 100%;
}

iframe {
    border: none;
}

.right {
    width: 250px;
    display: inline-block;
    vertical-align: top;
}

.kitty {
    position: absolute;
    bottom: -120px;
    right: -20px;
}

.kitty img {
    width: 150px;
}

.footer {
    font-size: 12px;
    color: color(display-p3 0 1 0);
    text-align: center;
    letter-spacing: 0.5px;
    padding: 40px;
}