@keyframes bg-color {
  000%  { background-color: oklch(0.75 0.15 000); }
  005%  { background-color: oklch(0.75 0.15 018); }
  010%  { background-color: oklch(0.75 0.15 036); }
  015%  { background-color: oklch(0.75 0.15 054); }
  020%  { background-color: oklch(0.75 0.15 072); }
  025%  { background-color: oklch(0.75 0.15 090); }
  030%  { background-color: oklch(0.75 0.15 108); }
  035%  { background-color: oklch(0.75 0.15 126); }
  040%  { background-color: oklch(0.75 0.15 144); }
  045%  { background-color: oklch(0.75 0.15 162); }
  050%  { background-color: oklch(0.75 0.15 180); }
  055%  { background-color: oklch(0.75 0.15 198); }
  060%  { background-color: oklch(0.75 0.15 216); }
  065%  { background-color: oklch(0.75 0.15 234); }
  070%  { background-color: oklch(0.75 0.15 252); }
  075%  { background-color: oklch(0.75 0.15 270); }
  080%  { background-color: oklch(0.75 0.15 288); }
  085%  { background-color: oklch(0.75 0.15 306); }
  090%  { background-color: oklch(0.75 0.15 324); }
  095%  { background-color: oklch(0.75 0.15 342); }
  100%  { background-color: oklch(0.75 0.15 360); }
}

html {
    cursor: url("../img/通常.gif"), auto;
}

body {
    margin: 0;
    animation-name: bg-color;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    min-width: 45em;
}

#main {
    background-color: #101010;
    float: left;
    color: White;
    min-width: 25em;
    max-width: 35em;
    padding: 1em;
    bottom: 0;
    border-right: 6px double #00ffff;
    border-top: 6px dotted #ffff00;
    border-left: 6px dashed #ff00ff;
    border-bottom: 6px solid #ffff00;
    min-height: 100vh;
    font-family: 'Comic Sans MS', 'Comic Sans', 
        'Chalkboard SE', 'Comic Neue', sans-serif;
}

#left-margin-outer {
    width: 7em;
    float: left;
}

#left-margin {
    position: fixed;
    width: 7em;
    height: 100vh;
}

#right-side {
    float: left;
    padding: 2em;
}

#tesseract {
    position: fixed;
    border: 1px solid #000000;
}