:root {
	--mode: "L";
	--background-color: #000;
	--foreground-color: #aaa;
	/* --selection-color: #f504; */
	--bg-selection-color: #fff3;
	/* --fg-selection-color: #fff; */

	font-family: monospace;
	color: var(--foreground-color);
  overscroll-behavior: none;
  
  width: 100%;
  height: 100%;
}
[mode="L"] {
  --background-color: #aaa;  /* Light mode background */
  --foreground-color: #000;  /* Light mode text color */
}

[mode="D"] {
  --background-color: #000;  /* Dark mode background */
  --foreground-color: #aaa;  /* Dark mode text color */
}

::selection {
	color: var(--fg-selection-color);
	background-color: var(--bg-selection-color);
}
::-moz-selection {
	color: var(--fg-selection-color);
	background-color: var(--bg-selection-color);
}


body {
	background-color: var(--background-color);
	color: var(--foreground-color);
	/*background-image: linear-gradient(*/
 /*       rgba(0, 0, 0, 0.94),*/
 /*       rgba(0, 0, 0, 0.94)*/
 /*   ),*/
	/*url('/miku/wow-t-posing.gif');*/
	/* background: linear-gradient(90deg, */
	/* 		var(--background-color) 0%, */
	/* 		#000 20%, */
	/* 		#000 80%, */
	/* 		var(--background-color) 100%); */
}
#body-container {
	display: grid;
	grid-template:
	"before" auto
	"links" auto
	"content" 1fr /
	auto;
}

/* .content9 { */
/*   grid-area: content; */
/* 	border: 1px solid var(--foreground-color); */
/* 	display: flex; */
/* 	align-self: center; */
/* } */

.content {
    grid-area: content;
	text-align: center;
	/* border: 1px solid var(--foreground-color); */
}

.content0 {
    /* grid-area: content; */
	display: flex;
	flex-wrap: wrap;
	margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
	justify-content: center;
	text-align: left;
	max-width: 1200px;
}
.itemm {
	width:100%;
    max-width: 350px;
	border-radius: 2px;
	border: 1px solid var(--foreground-color);
	padding:4px; /* inside */
	margin: 10px; /* outside*/
	
    transition: all 0.2s ease-in-out;
}
/*@media(min-width: 800px) {*/
/*.itemm:hover {*/
/*    transform: rotate(360deg);*/
/*}*/
/*}*/

#scroll-container {
  border: 3px solid black;
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
}

#scroll-text {
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  
  -moz-animation: scrolling-text 15s linear infinite;
  -webkit-animation: scrolling-text 15s linear infinite;
  animation: scrolling-text 15s linear infinite;
}

/* https://rh0mbus0fruin.neocities.org/homepage */
/* Text styles */
.scrolling-text {
    display: flex;
}

.scrolling-text-item {
    padding: 0 3px;
}

/* Apply the animation to the text items */
.scrolling-text-inner>div {
    animation: var(--direction) var(--marquee-speed) linear infinite;
}

/* Pause the animation when a user hovers over it */
.scrolling-text-container:hover .scrolling-text-inner>div {
    animation-play-state: paused;
}

/* Setting the Animation using Keyframes */
@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}


@keyframes cutting {
	0% {
		opacity: 0;
		visibility: hidden;
	}

	50% {
		opacity: 1;
		visibility: visible;
	}

	100% {
		opacity: 0;
		visibility: hidden;
	}
}


.one {
	animation: cutting 1.5s step-end infinite;
}

.two {
	animation: cutting 1.5s step-start infinite;
}


.thing {
	grid-area: thing;
	color: var(--foreground-color);
	animation: top-rotate 5s step-end infinite;
	font-size: 8px;
	white-space: pre-wrap;
	/* letter-spacing: px; */
	line-height: 12px;
	margin-top: -24px;
	margin-bottom: 4px;
	padding: 4px 0px;
	text-align: center;
}

.links {
	grid-area: links;
	border-radius: 2px;
	border: 1px solid var(--foreground-color);
	padding:4px; /* inside */
	margin: 10px; /* outside*/
    margin-left: auto;
    margin-right: auto;
	text-align: center;
	
    transition: all 0.2s ease-in-out;
}
.links>a {
	padding: 0px 15px; /* inside */
	background: none;
	color: var(--foreground-color);
}

.links>#selected {
	color: #000;
	background: var(--foreground-color);
}
.links>a:hover {
	background: var(--foreground-color);
	color: #111;
}

.link-button a {
	padding: 0 20px;
	background: var(--foreground-color);
	color: #000;
}

.link-button a:hover {
	background: #000;
	color: var(--foreground-color);
}

.link-button a:active  {
	background: var(--foreground-color);
	color: unset;
	background-color: #333;
}


a {
	cursor: url('/img/cursor/click.png'), default;
	color: var(--foreground-color);
	font-weight: 600;
}
a:hover {
	background: var(--foreground-color);
	color: #000;
}




@keyframes top-rotate {
	0% {
		transform: rotate3d(1, 0, 1, 0deg);
	}

	10% {
		transform: rotate3d(1, 0, 1, 36deg);
	}

	20% {
		transform: rotate3d(1, 0, 1, 72deg);
	}

	30% {
		transform: rotate3d(1, 0, 1, 108deg);
	}

	40% {
		transform: rotate3d(1, 0, 1, 144deg);
	}

	50% {
		transform: rotate3d(1, 0, 1, 180deg);
	}

	60% {
		transform: rotate3d(1, 0, 1, 216deg);
	}

	70% {
		transform: rotate3d(1, 0, 1, 252deg);
	}

	80% {
		transform: rotate3d(1, 0, 1, 288deg);
	}

	90% {
		transform: rotate3d(1, 0, 1, 324deg);
	}

	100% {
		transform: rotate3d(1, 0, 1, 360deg);
	}
}




/* @media (prefers-color-scheme: dark) { */
/* 	:root { */
/* 		--background-color: #222; */
/* 		--text-color: #fff; */
/* 		--primary-color: #fff; */
/* 		--foreground-color: #fff; */
/* 	} */
/* } */
/**/
/* @media (prefers-color-scheme: light) { */
/* 	:root { */
/* 		--background-color: #ccc; */
/* 		--text-color: #000; */
/* 		--primary-color: #000; */
/* 		--foreground-color: #000; */
/* 	} */
/* } */