* {
	box-sizing: border-box;
	font-family: "Microsoft Sans Serif";
}

html {
	background-color: black;
}

body {
	margin: 0;
	/* background image source: https://www.spacejam.com/1996 */
	background-image: url(images/bg_stars.gif);
	display: flex;
	justify-content: center;
	animation: animate-background 5s linear infinite;
}

@keyframes animate-background {
  from {
    background-position-x: 0px;
  }

  to {
    background-position-x: -111px;
  }
}

canvas {
	pointer-events: none;
	z-index: 2;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
}

svg {
  width: 1px;
  height: 1px;
  position: fixed;
  opacity: 0;
}

ul {
	padding-left: 32px;
}

img {
	width: 100%;
}

figcaption {
	font-size: 12px;
}

.page {
	z-index: 1;
	position: relative;
	width: 100vw;
	max-width: 1200px;
	min-height: 100vh;
	padding: 8px;
	gap: 8px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "side main";
}

.page--index {
	padding-bottom: 100px;
  margin-bottom: 100px;
  margin-top: 64px;
  transform: skew(0deg, 2deg);
  animation: animate-skew 20s ease-in-out infinite;
}

@keyframes animate-skew {
  0% {
    transform: skew(0deg, 2deg);
  }

  50% {
    transform: skew(0deg, -2deg);
  }

  100% {
    transform: skew(0deg, 2deg);
  }
}

.page-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: auto;
}

.page-side, .page-main {
	display: flex;
	flex-direction: column;
	height: fit-content;
}

.page-side {
	grid-area: side;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "left right";
	gap: 8px;
}

.page-sideLeft, .page-sideRight {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.page-sideSpan {
	grid-column-start: left;
	grid-column-end: right;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "left right";
	gap: 8px;
}

.page-main {
	grid-area: main;
	gap: 8px;
}

.page-span {
	grid-column-start: side;
	grid-column-end: main;
}

.window	{
	display: flex;
	align-items: flex-start;

	height: fit-content;
	width: 100%;

	background-color: #c0c4c8;
	padding: 1px;

	border-right: 1px solid black;
	border-bottom: 1px solid black;
}

.window-inner {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 32px 1fr;

	gap: 4px;

	width: 100%;
	height: 100%;

	background-color: #c0c4c8;

	border-top: 1px solid white;
	border-left: 1px solid white;

	padding: 3px;
}

.window-header {
	user-select: none;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #0000a8;
	padding: 0 4px;
}

.window-header h2 {
	color: white;
	font-size: 16px;
	margin: 0;
}



.window-body {
	background-color: #c0c4c8;
}

.window-body-inner {
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.window-body-inner img {
	font-size: 0;
	max-width: 100%;
}

.window-body-inner--misc {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.window-body-inner--misc img {
	height: 42px;
}

.window-body-inner--retroachievements {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 4px;
}

.window-body-inner--retroachievements .image {
	border: 2px solid gold;
}

.window-body--white-background {
	border-top: 1px solid #727679;
	border-left: 1px solid #727679;
	border-right: 1px solid white;
	border-bottom: 1px solid white;
}

.window-body--white-background .window-body-inner {
	background-color: white;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid #d9dcdd;
	border-bottom: 1px solid #d9dcdd;
	padding: 4px;
}

.window-body--black-background .window-body-inner {
	background-color: #161616;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid #d9dcdd;
	border-bottom: 1px solid #d9dcdd;
	padding: 4px;
}

.book-shelf-preview {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 4px;
}

.window--vehicles {
	grid-column-start: left;
	grid-column-end: right;
}

.window--watch {
	grid-area: left;
	height: auto;
}

.window--retroachievements {
	grid-area: right;
}

.window--palette {
	grid-area: right;
	flex: auto;
}

@media (max-width: 1250px) {
	.page {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 960px) {
	.page {
		grid-template-columns: 1fr 2fr;
	}
	.window--logo {
		grid-column-start: left;
		grid-column-end: right;
	}

	.window--info {
		grid-column-start: left;
		grid-column-end: right;
	}
	.page-side {
		grid-template-columns: 1fr;
		grid-template-areas: "left";
	}
	.page-sideLeft, .page-sideRight {
		grid-column-start: left;
		grid-column-end: right;
	}
	.window--watch {
		grid-column-start: left;
		grid-column-end: right;
	}

	.page-group {
		grid-column-start: left;
		grid-column-end: right;
	}
}

@media (max-width: 775px) {


}

@media (max-width: 450px) {

}

.book-shelf-preview figure {
	margin: 0;
}

.book-shelf-preview img {
	width: 100%;
}

.footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 42px;
	background-color: #c0c4c8;
	padding-top: 1px;
}

.footer-inner {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	border-top: 1px solid white;
	padding: 0 4px;
}

.ghus {
	z-index: 2;
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	width: 240px;
}

button {
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	background-color: #c0c4c8;
	padding: 0;
}

.button-carousel {
	height: 24px;
	width: 24px;
}
.button-carousel--link {
	width: auto;
}

.button-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	border-top: 1px solid #d9dcdd;
	border-left: 1px solid #d9dcdd;
	border-right: 1px solid #727679;
	border-bottom: 1px solid #727679;
	padding: 4px 8px;
}

.button-inner.carouse-right .button-inner.carousel-left {
	padding: 0;
}

.button-inner span {
	height: 19px;
}

.button-inner--controls {
	padding: 0px;
}

.window--logo {
	margin: 0 0 0 0;
}

.window--info {
	margin: 0 0 0 0;
	height: auto;
}
.window--reaction {
	margin: 0 0 0 0;
}
.window--things {
	margin: 0 0 0 0;
}
.window--slideshow {
	margin: 0 0 0 0;
}

.image {
	font-size: 0;
}

.image--mask {
	position: relative;
	z-index: 2;
}

.image--masked {
	position: absolute;
  top: 0;
  left: 0;
  z-index: 1;

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 0% 9% 12% 9%;

  filter: blur(1px);
}

.no-ai { border-radius: 50%; }
.neocities {}

.scan-lines {
	pointer-events: none;
	z-index: 2;
	position: fixed;
	top: 0;
	left: 0;
	height: calc(100vh + 6px);
	width: 100vw;
	background-image: url('./images/scan-line.png');
	animation: animate-scanlines 1s linear infinite;
	filter: blur(1px);
}

.carousel {
	position: relative;
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.carousel-item {
  list-style-type: none;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.toriyama-overlay {
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 100px;
	height: auto;
	opacity: 0.6;
}

.palette {
	display: flex;
	height: 100%;
}

.palette-color {
  color: white;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.watch {
	display: inline-block;
	position: relative;
	text-decoration: none;
	color: white;
}

.watch-title {
	font-family: ;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 3;
	text-shadow: 0 0 16px #000;
	filter: blur(1px);
}

.conversation {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.response {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 160px;
	width: 100%;
	padding: 4px;
	overflow-y: scroll;
	background-color: beige;
}

.response-message:has(.response-user) {
	opacity: 0.4;
}

.response-admin {
	font-weight: bold;
	margin-right: 4px;
}

.response-user {
	/*font-weight: bold;*/
	margin-right: 4px;
}

.dialogue {
	display: flex;
	gap: 16px;
}

.dialogue-prompt {
	position: relative;
	color: blue;
	text-decoration: underline;
	cursor: pointer;
	animation: prompt-pulse 0.75s linear infinite;
	padding-left: 18px;
}

.dialogue-prompt:before {
	content: '▶︎';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

@keyframes prompt-pulse {
  0% {
    opacity: 1;
  }

  50% {
  	opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

@keyframes animate-scanlines {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-6px);
  }
}


/*reference: https://patorjk.com/software/taag/#p=display&f=Big+Money-ne&t=vehicle+gallery&x=none&v=4&h=4&w=80&we=false */
/*
                     /$$       /$$           /$$                                     /$$ /$$                              
                    | $$      |__/          | $$                                    | $$| $$                              
 /$$    /$$ /$$$$$$ | $$$$$$$  /$$  /$$$$$$$| $$  /$$$$$$         /$$$$$$   /$$$$$$ | $$| $$  /$$$$$$   /$$$$$$  /$$   /$$
|  $$  /$$//$$__  $$| $$__  $$| $$ /$$_____/| $$ /$$__  $$       /$$__  $$ |____  $$| $$| $$ /$$__  $$ /$$__  $$| $$  | $$
 \  $$/$$/| $$$$$$$$| $$  \ $$| $$| $$      | $$| $$$$$$$$      | $$  \ $$  /$$$$$$$| $$| $$| $$$$$$$$| $$  \__/| $$  | $$
  \  $$$/ | $$_____/| $$  | $$| $$| $$      | $$| $$_____/      | $$  | $$ /$$__  $$| $$| $$| $$_____/| $$      | $$  | $$
   \  $/  |  $$$$$$$| $$  | $$| $$|  $$$$$$$| $$|  $$$$$$$      |  $$$$$$$|  $$$$$$$| $$| $$|  $$$$$$$| $$      |  $$$$$$$
    \_/    \_______/|__/  |__/|__/ \_______/|__/ \_______/       \____  $$ \_______/|__/|__/ \_______/|__/       \____  $$
                                                                 /$$  \ $$                                       /$$  | $$
                                                                |  $$$$$$/                                      |  $$$$$$/
                                                                 \______/                                        \______/ 
*/

.vehicle-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 4px;
}

@media (max-width: 960px) {
	.vehicle-gallery {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.vehicle-gallery {
		grid-template-columns: 1fr;
	}
}

/*
                           /$$               /$$      
                          | $$              | $$      
 /$$  /$$  /$$  /$$$$$$  /$$$$$$    /$$$$$$$| $$$$$$$ 
| $$ | $$ | $$ |____  $$|_  $$_/   /$$_____/| $$__  $$
| $$ | $$ | $$  /$$$$$$$  | $$    | $$      | $$  \ $$
| $$ | $$ | $$ /$$__  $$  | $$ /$$| $$      | $$  | $$
|  $$$$$/$$$$/|  $$$$$$$  |  $$$$/|  $$$$$$$| $$  | $$
 \_____/\___/  \_______/   \___/   \_______/|__/  |__/
                                                                                           
*/

.watch-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 4px;
}

.watch-this	{

}

/*
 /$$                           /$$                 /$$                 /$$  /$$$$$$ 
| $$                          | $$                | $$                | $$ /$$__  $$
| $$$$$$$   /$$$$$$   /$$$$$$ | $$   /$$  /$$$$$$$| $$$$$$$   /$$$$$$ | $$| $$  \__/
| $$__  $$ /$$__  $$ /$$__  $$| $$  /$$/ /$$_____/| $$__  $$ /$$__  $$| $$| $$$$    
| $$  \ $$| $$  \ $$| $$  \ $$| $$$$$$/ |  $$$$$$ | $$  \ $$| $$$$$$$$| $$| $$_/    
| $$  | $$| $$  | $$| $$  | $$| $$_  $$  \____  $$| $$  | $$| $$_____/| $$| $$      
| $$$$$$$/|  $$$$$$/|  $$$$$$/| $$ \  $$ /$$$$$$$/| $$  | $$|  $$$$$$$| $$| $$      
|_______/  \______/  \______/ |__/  \__/|_______/ |__/  |__/ \_______/|__/|__/                                                                           
*/

.book-shelf {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: 8px;
}

.book-shelf figure {
	margin: 0;
}

@media (max-width: 1250px) {
	.book-shelf {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

@media (max-width: 1060px) {
	.book-shelf {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.book-shelf {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
}

@media (max-width: 700px) {
	.book-shelf {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

@media (max-width: 500px) {
	.book-shelf {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 400px) {
	.book-shelf {
		grid-template-columns: 1fr 1fr;
	}
}