/* 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." */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
	padding: 0;
	margin: 0;
    /*outline: 1px solid red;*/
}

:root {
	--color-black: #000000;
	--color-blue:  #0000AA;

	--color-cyan:  #00AAAA;

	--color-lgray: #b9b9b9; 
	--color-white: #FFFFFF;
}

:root.sweet {
	--color-black: #000000;
	--color-blue:  #12083b;

	--color-cyan:  #00AAAA;

	--color-lgray: #AAAAAA; 
	--color-white: #FFF8E7;
}

body {
    background-color: var(--color-black);
    color: var(--color-white);
	font-family: "Press Start 2P", system-ui;
	font-size: 12px;
	font-weight: 400;
	font-style: normal;
	margin: 0;
}

pre {
	font-family: "Press Start 2P", system-ui;
	font-size: 12px;
	font-weight: 400;
	font-style: normal;
	padding: 2px 0px;
}

/**** Navigator ****/

.navigator {
	background-color: var(--color-lgray);
	padding: 4px 0px;
	height: 16px;
	width: 100vw;

	position: fixed;
	top: 0px;
	z-index: 1;
}


.navigator a:nth-child(1) {
	color: #AA0000;
	margin: 0px 0px 0px 16px;
	text-decoration: none;
}

.navigator a span{
	color: #AA0000;
}

.navigator a {
	color: var(--color-black);
	margin: 0px 0px 0px 8px;
	text-decoration: none;
}

/*** container ***/

.container {
	background-color: var(--color-blue);
	height: calc(100vh - 80px);

	margin-top: 24px;
	padding: 16px 16px;

	box-shadow: 
		inset 0px 0px 0px 6px var(--color-blue),
		inset 0px 0px 0px 8px var(--color-white);

	position: relative;
}


.container .title {
	background-color: var(--color-blue);
	padding: 0 31ch 0px 1ch;

	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-18ch);
}

.container h1 {
	font-size: 12px;
	font-style: normal;
	color: var(--color-cyan);
	padding: 4px 0px;
}

.container p {
	padding: 4px 0px;
}

.container .content {
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
}

/*** BOX ***/

.content {
	padding-right: 16px;

	position: relative;
	top: 0;
	left: 0;
}

.content::-webkit-scrollbar {
	width:16px;
	height: 10px;
	background: url("./assets/images/ui/background.png");
}


.content::-webkit-scrollbar-track {
    background-clip: padding-box;
}
 
.content::-webkit-scrollbar-thumb {
    background-color: var(--color-cyan);
	border: 4px solid var(--color-blue);
}

.content::-webkit-scrollbar-button:vertical:decrement {
	background: var(--color-blue) url("./assets/images/ui/up_bar.png");
}

.content::-webkit-scrollbar-button:vertical:increment {
	background: var(--color-blue) url("./assets/images/ui/down_bar.png");
}

/**** footer ****/

.footer {
	background-color: var(--color-lgray);
	padding: 4px 0;
	height: 16px;
	width: 100vw;

	position: fixed;
	bottom: 0;
	z-index: 1;
}

.footer a {
	color: var(--color-black);
	margin: 0 0 0 8px;
}

/*** window **/

.window {
	background-color: #00AAAA;
	width: 300px;
	padding: 16px;
	margin: 64px auto;

	box-shadow: 
		inset 0px 0px 0px 2px #00AAAA,
		inset 0px 0px 0px 4px #FFFFFF,
		inset 0px 0px 0px 6px #00AAAA,
		inset 0px 0px 0px 8px #FFFFFF;
}


.window h1 {
	font-size: 12px;
	font-style: normal;
	color: #55FFFF;
	padding: 4px 0px;
}


/*** Button ***/

.button {
	text-decoration: none;
	color: #00AA00;
}

.button:hover {
	color: #55FF55;
}


/*** warning and critic ***/

.warning {
	background-color: #000000;
	color: #FFFF55;
	margin: 8px 0;
	padding: 4px;

	text-align: center;
}

.critic {
	background-color: #AA0000;
	color: #FFFFFF;
	margin: 8px 0;
	padding: 8px;

	text-align: center;
}

/*** anims ***/

.warning-blink {
	background-color: #000000;
	color: #FFFF55;
	margin: 8px 0;
	padding: 4px;
	text-align: center;

	animation: anim_warning_blink 2s infinite steps(1);
}

@keyframes anim_warning_blink {
	0% { color: transparent;}
	50% { color: #FFFF55;}
}

/*** images ***/

.graphics {
    position: absolute;
    bottom: 0;
    right: 15px;
}

.graphics p {
    position: absolute;
    top: 50%;
    left: -20%;
}