:root {
  --background-color: #000000;
  --text-color: #a01616;
  --link-color: #264fd1;
  --link-color-hover: #7ee526;
  --font-size: 13px;
  --margin: 10px;
  --padding: 18px;
  --border: 1px solid #264fd1;
  --double-border: 3px double #a01616;
  --website-width: 1280px;
  --scroll-color: #a01616;
}

::-webkit-scrollbar {
  margin:0;
  padding:0;
  width: 16px;
 --scrollthumb-height: 40%;
 appearance: slider-vertical;
 -webkit-appearance: slider-vertical;
}

::-webkit-scrollbar-track {
background: url("image bank/2x2dith.png"), var(--scroll-color);
background-blend-mode: overlay, normal;
width: 16px;
box-sizing: border-box;
}

::-webkit-scrollbar-thumb {
-webkit-appearance: none;
box-shadow: 
  inset -1px -1px 0px 0px black,
  inset -2px -2px 0px 0px #0008,
  inset 1px 1px 0px 0px var(--scroll-color),
  inset 2px 2px 0px 0px #FFFA,
  inset 90px 90px 0px 0px var(--scroll-color);
  height: 90px;
  width: 16px;
  border-radius: 0;
  border: none;
  background: var(--scroll-color);
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

body {
  display: block;
  align-items: center;
  justify-content: center;
  font-family: Ms Gothic;
  font-size: var(--font-size);
  line-height: 1.2;
  color: var(--text-color);
  background-image: url("https://apocalypse2000.neocities.org/media/stars%2010.gif");
  margin-left: auto;
  margin-right: auto;
}

a:link {
  text-decoration: underline;
  color: var(--link-color);
  font-weight: bold;
}

a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: none;
}

/* grid container */
.grid-container {
  width: var(--website-width);
  display: grid;
  grid-template:
    "header header header"
    "left main main"
    "left mid right"
    "bottom bottom bottom"
    / 0.8fr 1.4fr 2fr;
  grid-gap: var(--margin);
  padding: var(--padding);
  margin-left: auto;
  margin-right: auto;
}

/* header */
header {
  grid-area: header;
  background-color: var(--background-color);
  border: var(--border);
  color: var(text-color);
  overflow: hidden;
}

.flex-header {
  display: flex;
  flex-direction: row;
}

.header-image img {
  width: 100%;
  height: 200px;
}

.left,
main,
.right-main,
.mid,
.right,
.bottom {
  padding: var(--padding);
  background: var(--background-color);
  border: var(--border);
  overflow: hidden;
}

nav ul {
  line-height: 25px;
  list-style: none;
  user-select: none;
  margin-left: -30px;
}

/* left column */
.left {
  grid-area: left;
}

.status {
  border: var(--double-border);
  width: 190px;
  height: 100px;
  margin: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}

/* main column */
main {
  grid-area: main;
  display: flex;
  flex-direction: row;
}

.left-main {
  display: block;
  width: 600px;
  height: auto;
}

.right-main {
  display: block;
  margin-left: 10px;
  border: none;
  padding: 10px;
  width: auto;
}

.main-top {
  border: var(--double-border);
  width: 330px;
  height: 100px;
  margin: 10px;
  margin-top: -10px;
  padding: var(--padding);
}

.main-bottom {
  border: none;
  width: 350px;
  margin: 10px;
}

/* mid */
.mid {
  grid-area: mid;
  display: flex;
  flex-direction: row;
}

.left-mid {
  display: block;
  width: 170px;
  height: auto;
}

.linkbox {
  display: block;
  border: double 3px #a01616;
  background-image: url("https://apocalypse2000.neocities.org/media/screen%20red.jpg");
}

.right-mid {
  display: block;
  margin-top: 30px;
  margin-left: 10px;
  border: none;
  padding: 10px;
  width: auto;
}

/* right column */
.right {
  grid-area: right;
}

/* bottom */
.bottom {
  grid-area: bottom;
}

/* images */
.image {
  display: block;
  margin: auto;
  width: 100%;
}

.checkers {
  display: block;
  width: 600px;
  margin-bottom: 20px;
}

.bottom-buttons {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: 640px;
}

.bottom-buttons img {
  width: 100px;
  margin: 2px;
  margin-left: auto;
  margin-right: auto;
}

.blinkies {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blinkies img {
  width: 160px;
  margin: 3px;
}

/* button */
.site-button {
  display: flex;
  flex-direction: column;
  align-items: left;
}

.site-button textarea {
  border: solid 1px #a01616;
  background-color: #000000;
  font-family: monospace;
  font-size: 10px;
  width: 120px;
  color: #a01616;
  overflow: auto;
}

/*-------music player by glenthemes-------*/
#glenplayer02 {
  position: relative;
  top: 0px;
  left: 5px;
  display: flex;
  z-index: 99;
}

#glenplayer02 a {
  text-decoration: none;
}

#glenplayer02>div {
  align-self: center;
  -webkit-align-self: center;
}

.music-controls {
  user-select: none;
  -webkit-user-select: none;
  width: 13px;
  font-size: 28px;
  cursor: pointer;
}

.playy,
.pausee {
  color: #a01616;
  text-shadow:
    -1px 0 #000,
    0 1px #000,
    1px 0 #000,
    0 -1px #000,
    0 0;
}

/* color of play & pause buttons */

.pausee {
  display: none;
}

.sonata {
  margin-left: 10px;
  font-family: Ms Gothic;
  font-size: 14px;
  color: #a01616;
  text-shadow:
    -1px 0 #000,
    0 1px #000,
    1px 0 #000,
    0 -1px #000,
    0 0;
  /* color of music note symbol */
}

.playerbox {
  width: auto;
  height: 35px;
  margin: auto;
  border: 3px double #a01616;
  padding: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* end music player */

.stamps {
  margin-top: 20px;
}


/* responsive layout */
@media (max-width: 1099px) {
  .grid-container {
    grid-template-areas:
      "header header header"
      "left left left"
      "main main main"
      "right right right"
      "bottom bottom bottom";
  }
}