/* Background and overall layout */

html {
  background: repeat linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("/images/bg12.png");
  image-rendering: optimizespeed;
  image-rendering: pixelated;
  font-family: monospace;
  font-size: 9pt;
}

body {
  color: #ffffff;
  margin: 0px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}

/* for links */
a {
  color: #d0c5f6;
}

/* To make links turn a different color when hovered upon */
a:hover {
  color: #9e89e7;
  cursor: pointer;
}

li {
  text-align: left;
}

.diary {
  width: -webkit-fill-available;
  display: inline-block;
  line-height: 130%;
}

.diary > div {
  background-color: #000000;
  text-align: center;
  padding: 10px;d
  border: 1px solid white;
  margin: 20px;
}

.sprite {
  width: 110px;
  height: fit-content;
  margin-right: 15px;
  display: flex;
}

.column {
  image-rendering: initial;
}

.columnsWrapper {
  display: flex;
  width: fit-content;
}

/* box+scrollbar base styling */

.boxContent {
  overflow: scroll;
  scrollbar-width: none;
  padding: 1em;
  flex-direction: row;
  background-color: #000000;
  line-height: 130%;
  font-size: 14px;
  text-align: left;
  display: flex;
}

.scrollBox {
  scrollbar-width: none;
}

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

/* win95 specific stying */

.win95.window {
  --win95Color: #bbb;
  --win95Gradient: linear-gradient(90deg, #40248c, #b71225);
  padding: 4px;
  background: var(--win95Color);
  width: fit-content;
  width: auto;
  display: flex;
  box-shadow: inset -1px -1px 0px 0px black, inset -2px -2px 0px 0px #0008,
    inset 1px 1px 0px 0px var(--win95Color), inset 2px 2px 0px 0px #fffa,
    8px 8px 0 0 #0004;
}

.win95.scrollBox {
  border: white 1px solid;
  border-color: black #fffa #fffa black;
  width: auto;
  height: auto;
  display: flex;
}

.win95.titleBar {
  height: 16px;
  background: var(--win95Gradient);
  color: white;
  text-shadow: 1px 1px black;
  text-align: left;
  padding: 0px 3px 0px 3px;
  margin-bottom: 4px;
}

.win95 textarea {
  align-self: stretch;
  color: grey;
}

/* The following rules will only work for their respective browser */
/* If you edit the styling, make sure to copy it to the other browser's rules or it will look very odd for those users */

/* Firefox */

input[type="range"].scrollBar::-moz-range-thumb {
  box-shadow: inset -1px -1px 0px 0px black, inset -2px -2px 0px 0px #0008,
    inset 1px 1px 0px 0px var(--win95Color), inset 2px 2px 0px 0px #fffa;
  height: var(--scrollthumb-height);
  width: 16px;
  border-radius: 0;
  border: none;
  background: var(--win95Color);
  box-sizing: border-box;
}

input[type="range"].scrollBar::-moz-range-track {
  background: url("/img/2x2dith.png"), var(--win95Color);
  background-blend-mode: overlay, normal;
  width: 16px;
  box-sizing: border-box;
}

/* Chromium */
/* Chrome sucks ass so if your css doesnt look good on it, */
/* just put a button on ur page that says "download firefox" */
/* Then it's magically not your problem anymore */

input[type="range"].scrollBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-shadow: inset -1px -1px 0px 0px black, inset -2px -2px 0px 0px #0008,
    inset 1px 1px 0px 0px var(--win95Color), inset 2px 2px 0px 0px #fffa,
    inset 90px 90px 0px 0px var(--win95Color);
  height: 90px;
  width: 16px;
  border-radius: 0;
  border: none;
  background: var(--win95Color);
  box-sizing: border-box;
}

input[type="range"].scrollBar::-webkit-slider-runnable-track {
  background: url("/img/2x2dith.png"), var(--win95Color);
  background-blend-mode: overlay, normal;
  width: 16px;
  box-sizing: border-box;
}

/* stuff to hide the default scrollbar for chrome don't edit */
.boxContent::-webkit-scrollbar {
  display: none;
  width: 0;
  background: transparent;
}

/* For mirroring images */
#flip {
  transform: scaleX(-1);
}

/* Zoom on hover */
#zoom {
  transition: transform 0.2s; /* Animation */
  width: 100px;
  height: 100px;
  margin-top: 2%;
  margin-left: 2%;
}

#zoom:hover {
  transform: scale(
    1.1
  ); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}