body {
  background: url("https://oldwww.neocities.org/site-img/bg.jpg");
  font-family: "Georgia", "Times New Roman", serif;
}

:root {
  --hyperlink: #0000ee;
  --text-lime: #00ff00;
  --text-cyan: #00ffff;
  --text-fuchsia: #ff00ff;
  --sidebar-h2-bg: #000080;
  --sidebar-bg: #c0c0c0;
  --link-hover: #00ff00;
}

/* TOP */

.site-container {
  padding: 25px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

/* SIDEBARS + MAIN */

.flex-layout {
  display: grid;
  grid-template-columns: 225px 1fr 225px;
  gap: 30px;
  justify-content: center;
}

/* SIDEBARS */

.sidebar {
  box-sizing: border-box;
  background-color: var(--sidebar-bg);
  /*background: url('https://files.catbox.moe/p9zfxh.gif');*/
  padding: 8px;
  border: 2px solid #fff;
  border-right-color: #000;
  border-bottom-color: #000;
  box-shadow: 3px 3px 0 lime;
  line-height: 1.5;
  top: 20px;
}

.sidebar h2 {
  background: var(--sidebar-h2-bg);
  color: white;
  font-family: Arial, sans-serif;
  font-weight: bold;
  padding: 2px 5px;
  margin-bottom: 8px;
  font-size: 1.2em;
}

.sidebar ul {
  list-style-image: url('https://blob.gifcities.org/gifcities/KBYEYMYAYJHXZZ53X46N62O2HQAVWC3D.gif');
  text-transform: uppercase;
  padding-left: 25px;
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 25px;
}

ul.sidebar-lvl-2 {
  font-size: 14px;
  list-style-type: "↳ ";
  list-style-image: none;
  font-weight: normal;
  letter-spacing: 0;
  margin: 0 0 5px;
}

.sidebar p {
  text-align: center;
}

.sidebar a:hover {
  color: #71ff7e;
  text-shadow: 1px 1px #0000ff;
}

.sidebar textarea{
  width: 80px;
  font-size: 10px;
}

/* SELECT MENU */

.main {
  box-sizing: border-box;
  text-align: center;
  background: url("https://oldwww.neocities.org/site-img/MOVINGSTARS.gif");
  padding: 8px;
  border: 2px solid #fff;
  border-right-color: #000;
  border-bottom-color: #000;
  box-shadow: 3px 3px 0 lime;
  color: white;
  min-height: 700px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.main p {
  margin: 0;
  color: #fff;
  padding: 5px;
  text-shadow: -1px 1px #000, 1px -1px #000;
}

.main .flex-container {
  flex-shrink: 0;
}

.main img {
    max-width: 100%;
  }

/* LOINKS */

a:link,
a:visited {
  color: var(--hyperlink);
  text-decoration: underline;
}

a:hover {
  color: var(--link-hover);
  text-shadow: 1px 1px 0 #000;
}

/* MAIN FLEX WRAPPER */

.flex-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* MAIN FLEX WRAPPER LISTS */

.flex-container ul {
  list-style-image: url("https://files.catbox.moe/cssa00.gif");
  text-align: left;
  text-transform: lowercase;
  column-count: 2;
  word-break: break-all;
}

.flex-container ul a {
  color: #fff;
  padding: 5px;
  text-shadow: none;
}

.flex-container ul a:hover {
  color: lime;
}

.flex-container li {
  margin: 6px 0;
}

/* MAIN FLEX BOX */

.flex-section {
  min-width: 0;
  flex: 1 1 0;
}

/* SELECT MENU */

.list-header {
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
  text-transform: uppercase;
  border: 3px ridge grey;
  background: linear-gradient(
    to right,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #8b00ff
  );
  filter: saturate(1.5);

  font: inherit;
  font-weight: bold;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

  display: block;
  width: 100%;
  cursor: url("https://cdn.cursors-4u.net/previews/world-of-warcraft-wow-hand-armor-0d67e864-32.webp")
      32 32,
    pointer !important;
}

.list-header:hover {
  filter: brightness(0.9);
  background: linear-gradient(
    to left,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #8b00ff
  );
}

.list-header:active {
  border-style: inset;
  transform: translate(2px, 2px);
}

.accordion-content {
  display: none;
}

.accordion-content.open {
  display: block;
}

/* GRAPHICS IFRAME */

.viewer {
  width: 100%;
  flex: 1 1 auto;
  min-height: 700px;
  background: rgba(100, 100, 100, 0.25);
}

.viewer iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 2px solid #00ff00;
  border-right-color: #000fff;
  border-bottom-color: #000fff;
}

.viewer-controls {
  display: block;
  background: #ff00ff;
  border: 2px solid #00ff00;
  border-right-color: #000fff;
  border-bottom-color: #000fff;
  margin-bottom: -10px;
  width: 100%;
}

.clear-button {
  padding: 2px 5px;
  background: #c0c0c0;
  color: #000;
  border: 2px solid #fff;
  border-right-color: #000;
  border-bottom-color: #000;
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
  float: right;
  margin: 6px 10px;
}

.clear-button:active {
  border-style: inset;
}

/* ENTER PAGE */

.enter {
  text-align: center;
  color: lime;
  margin-top: 2rem;
}

.enter h1 {
  text-shadow: 2px 2px 0 black;
}
.enter h2 {
  text-shadow: 2px 2px 0 black;
}

.text-box {
  background: #000;
  border: 2px ridge red;
  display: inline-block;
  padding: 15px;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  margin: 10px 0;
}

/* TABLET */

@media (max-width: 800px) {
  .site-container {
    padding: 15px;
  }

  .flex-layout {
    grid-template-columns: 120px 1fr 120px;
    gap: 20px;
  }
  
  img {
    max-width: 100%;
  }
}

/* MOBILE */

@media (max-width: 600px) {
  .site-container {
    padding: 10px;
  }

  .flex-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sidebar,
  .main {
    width: 100%;
    min-width: 0;
  }

  .main {
    min-height: 600px;
  }

  
  .sidebar {
    max-height: 180px;
    overflow: scroll;
  }

  .sidebar ul {
    columns: 2;
    font-size: 14px;
  }
  
  ul.sidebar-lvl-2 {
    columns: 1;
  }

  .main,
  .sidebar {
    overflow-wrap: break-word;
  }
  
  img {
    max-width: 100%;
  }
}

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
  image-rendering: pixelated;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

::-webkit-scrollbar-track:active {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

::-webkit-scrollbar-thumb {
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
  width: 16px;
  height: 16px;
  background-color: #cccccc;
  z-index: 1;
}

::-webkit-scrollbar-corner {
  background-color: #cccccc;
}

::-webkit-resizer {
  width: 16px;
  height: 16px;
  background-color: #cccccc;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
  background-position: bottom right;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

::-webkit-scrollbar-button,
.scroll::-webkit-scrollbar-button {
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
  display: block;
  width: 16px;
  height: 16px;
  background-color: #cccccc;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-position: center center;
}

::-webkit-scrollbar-button:active,
.scroll::-webkit-scrollbar-button:active {
  background-position: 2px 2px;
}

::-webkit-scrollbar-button:horizontal:decrement,
.scroll::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
}

::-webkit-scrollbar-button:horizontal:increment,
.scroll::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:vertical:decrement,
.scroll::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:vertical:increment,
.scroll::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:horizontal:increment:start,
.scroll::-webkit-scrollbar-button:horizontal:increment:start {
  display: none;
}

::-webkit-scrollbar-button:horizontal:decrement:end,
.scroll::-webkit-scrollbar-button:horizontal:decrement:end {
  display: none;
}

::-webkit-scrollbar-button:vertical:increment:start,
.scroll::-webkit-scrollbar-button:vertical:increment:start {
  display: none;
}

::-webkit-scrollbar-button:vertical:decrement:end,
.scroll::-webkit-scrollbar-button:vertical:decrement:end {
  display: none;
}

::-webkit-scrollbar-button:active,
.scroll::-webkit-scrollbar-button:active {
  border-top: 1px solid #868a8e;
  border-left: 1px solid #868a8e;
  border-bottom: 1px solid #868a8e;
  border-right: 1px solid #868a8e;
  box-shadow: none;
}