@font-face { font-family: "nishiki"; src: url(media/fonts/nishiki.woff2); }

:root { 
	--bg: #282a36;
	--box_bg: #282a36; 
	--secondary_bg: #44475A; 
	--text: #F8F8F2; 
	--links: #ffaad5; 
	--button_text: white;
	--splash: #6272A4; 
	--body_font: "Atkinson Hyperlegible Next, sans-serif";
	--heading_font: "Kalnia";
	--box_rounding: 35px;
	--bg_image: url('/media/images/backgrounds/tokipona.webp');
	--bg_animation: "6s linear infinite bg";
	--abbr: #f9ffb5;
}

/* PAGE */
body {
	width: min(90vw, 1500px);
	margin: 20px auto;
	background-color: var(--box_bg);
	color: var(--text);
}

* {
	cursor: url("media/images/cursor.ico"), auto;
}

p, p a, input, button, select, select *, .not_sitelen { 
	font-size: 14pt; 
	font-family: var(--body_font); 
	line-height: 1.4;
}

.not_sitelen {
	font-size: 14pt; 
	font-family: var(--body_font); 
	line-height: 1.4;
}

h1, h2, h3 { 
	font-family: var(--heading_font); 
}

h1 { 
	margin: 20px 0 10px; 
	font-size: min(32px, 7vw);
}

h2 {
	font-size: 20pt;
}

.box {
	border-bottom: 5px solid var(--secondary_bg);
	padding-bottom: 20px;
}

/* OTHER */

abbr {
	position: relative;
	cursor: pointer;
	color: var(--abbr);
	text-decoration: none;
}

abbr:hover, abbr:focus {
	color: var(--links)
}

abbr:hover::after, abbr:focus::after {
	content: attr(data-title);
	position: absolute;
	left: 0;
	bottom: -2.5em;
	background: var(--box_bg);
	z-index: 10;
	white-space: nowrap;
	padding: 3px 12px 4px;
	border: 5px solid var(--secondary_bg);
	font-size: 14pt;
	border-radius: var(--box_rounding);
}

::selection {
	background-color: #ff95bd;
	color: white;
	text-decoration: underline;
}

img {
	max-width: 100%;
}

.splash { 
	color: var(--splash); 
	font-size: min(18px, 5vw);	
}
.splash:hover { text-decoration: underline; }
.bar { padding: 0; display: flex; margin: 20px 0 0; gap: 10px; }
.bar li { list-style: none; flex-grow: 1; text-align: center; }
.bar a { width: 100%; display: inline-block; padding: 10px 0; }
.bar a[href=""], .bar a:hover { background-color: var(--secondary_bg); color: var(--button_text); border-radius: 10px; text-decoration: none;}
footer p { text-align: center; }
.ipa { font-family: system-ui, 'Open Sans, sans-serif', sans-serif }
/* these two don't work because js */
#sillyring br { display: none; }
#sillyring-image { display: none; }

#profile_pic {
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
	width: 80px;
	outline: 2px solid var(--secondary_bg); /* thickness, style, color */
	border-radius: 10px;
}

.gallery { 
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: center;
	justify-items: center;
}

.gallery > * { 
	border: var(--secondary_bg) 4px solid;
	border-radius: 8px;
	margin: 0;
}

.gallery * {
	width: 100%;
}

/* DESKTOP */
@media only screen and (min-width: 1000px){
	#bg { 
		position: fixed;
		z-index: -2;
		top: -50%;
		right: -50%;
		bottom: -50%;
		left: -50%;
		background-image: var(--bg_image);
		animation: var(--bg_animation);
	}

	#header {
		margin: 0 10px;
	}

	.box {
		background-color: var(--box_bg);
		border: 5px solid var(--secondary_bg);
		border-radius: var(--box_rounding);
		padding: 5px 20px 20px;
		margin: 20px 10px;
	}

	#content {
		display: flex;
		flex-direction: row;
	}

	#left_aside { order: 1; }
	main { order: 2; }
	#right_aside { order: 3; }

	aside {
		width: 300px;
		flex-shrink: 0;
	}

	.gallery {
		grid-template-columns: repeat(4, 1fr);
	}

	.two_columns {
		margin: -20px 0;
		display: flex;
	}

	.small_column {
		width: 300px;
		flex-shrink: 0;
	}
}

/* BORING */
iframe { border: none; }
@keyframes bg { 0%{transform:translateY(0px);} 100%{transform:translate(128px,128px);} }
.sitelen, .sitelen *:not(.not_sitelen) { font-family: "nishiki", var(--body_font); word-break: break-all; font-size: 17pt;}
.sitelen h1 { font-size: 30pt !important; font-weight: normal; }
.sitelen h2 { font-size: 20pt !important; font-weight: normal; }
a { color: var(--links); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
p { hyphens: auto; }
.left { float: left; margin: 10px 20px 10px 0}
.right { float: right; margin: 10px 0 10px 20px}
.left, .right { width: 20%; }
.john { max-width:732px; width:100%; aspect-ratio: 361 / 42; border:none; margin: 20px auto; display: block; }
.link_button img { margin: 10px; }
.link_button img:hover { outline: 4px solid var(--links); /* thickness, style, color */ }

/* WEIRD */
button {
	background-color: var(--secondary_bg);
	color: var(--button_text);
	border: none;
	font-size: 14pt;
	padding: 10px ;
	margin: 10px;
	border-radius: 10px;
}

input[type="text"] {
	background-color: var(--box_bg);
	color: var(--text);
	border: 4px solid var(--secondary_bg);
	padding: 10px;
	margin: 10px 0px;
	border-radius: 10px;
	outline: none;
	max-width: 100%;
	box-sizing: border-box;
}

input[type="range"] {
	appearance: none;
	background: var(--secondary_bg);
	cursor: pointer;
	width: 400px;
	height: 10px;
	border-radius: 10px;
	margin: 10px 0px;
	max-width: 100%;
	box-sizing: border-box;
}

select {
	background-color: var(--secondary_bg);
	border: none;
	border-radius: 10px;
	color: var(--button_text);
	padding: 10px;
}

button:hover { color: var(--links); }


::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--secondary_bg); }
::-webkit-scrollbar-thumb:hover { background: var(--links); }

html { scrollbar-color: var(--secondary_bg) var(--bg); }