/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background: linear-gradient(to top, transparent, black), url("https://stinkydoggie.neocities.org/distortedcopy.png");
  background-color: black;
  /*background-image: url("https://stinkydoggie.neocities.org/distortedcopy.png");*/
  background-size: 1400px 1000px;
  color: #d1d5ca;
  font-family: "Syne Mono", monospace;
}

h1 {
  font-size: 25px;
}

#stinky {
  display: block;
  margin: auto;
  width: 50%;
  }

a {
  color: #29520f;
}

a:hover {
  color: #aad922;
}

#center {
  width: 750px;
}

#left {
  width: 200px;
}

#right {
  width: 200px;
}

.main {
  display: grid;
  align-content: start;
  grid-template-columns: 300px auto 300px;
}

.box {
  overflow-y: scroll;
  width: 500px;
  height: 300px;
  padding: 20px;
  background: linear-gradient(180deg,rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 15%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 1) 100%), url("https://stinkydoggie.neocities.org/copylines.png");
  background-size: cover;
}

::-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;
    }