/* --------------------- //
//  FONTS
// --------------------- */

/* bro this is my own custom font from detective baku */
/* do not steal this shit istg */
@font-face { font-family: "bakutype"; src: url("../fonts/bakutype_regular.ttf"); font-weight: normal; font-style: normal; }
@font-face { font-family: "bakutype"; src: url("../fonts/bakutype_bold.ttf"); font-weight: bold; font-style: normal; }
@font-face { font-family: "bakutype"; src: url("../fonts/bakutype_italic.ttf"); font-weight: normal; font-style: italic; }
@font-face { font-family: "bakutype"; src: url("../fonts/bakutype_bold_italic.ttf"); font-weight: bold; font-style: italic; }

/* also this one but like i dont care as much */
@font-face { font-family: "tiny"; src: url("../fonts/tiny.ttf"); font-weight: normal; font-style: normal; }

/* --------------------- //
//  VARIABLES
// --------------------- */

:root {
	--margin-top: 64px;
	--padding-sides: 32px;
	--max-width: 768px;
}

/* --------------------- //
//  STYLE
// --------------------- */

* {
	/* box-shadow: inset 0px 0px 2px 0px white; */
	font-size: 16px;
}

body {
	background-color: var(--col_bg);
	image-rendering: pixelated;
	/* text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; */
	/* font-synthesis-weight: none; */
	/* font-smooth: never; */
	font-family: "bakutype";
	color: var(--col_text);
	margin: 0;
}

h1, h2, h3, h4 {
	/* font-size: 16px; */
	font-weight: bold;
	color: var(--col_primary);
}

h2, h3, h {
	color: var(--col_text);
}

a {
	color: var(--col_text);
	text-decoration-line: none;
	border-bottom: solid 2px;
}

a:hover {
	color: var(--col_primary);
	/* background-color: var(--col_text); */
}

#body_wrapper {
	display: grid;
	grid-template-columns: max-content auto;
	max-width: var(--max-width);
	margin: auto;
	margin-top: var(--margin-top);
	margin-bottom: var(--margin-top);
}

#sidebar_wrapper {
	grid-row-start: 1;
	grid-row-end: 2;
	position: sticky;
	width: 180px;
	height: fit-content;
	top: var(--margin-top);
	text-align: center;
}

#sidebar_wrapper h1 {
	color: var(--col_primary);
	margin-top: -16px;
}

#sidebar_wrapper a {
	border-bottom: none;
}

.sidebar_link {
	display: block;
	margin: 16px;
	padding-top: 4px;
	padding-left: 10px;
	padding-right: 8px;
}

.sidebar_link_home {
	display: block;
	margin: 16px;
	margin-bottom: 32px;
}

.sidebar_link img {
	height: 32px;
	margin-right: 8px;
}

#logo_wrapper {
	overflow: hidden;
}

#logo {
	filter: drop-shadow(0px 999px 0 var(--col_primary));
	transform: translateY(-999px);
}

#content_wrapper {
	padding-left: var(--padding-sides)
}

.banner_img {
	max-width: 100%;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.footer {
	font-family: "tiny";
	color: var(--col_text);
	font-size: 16px;
	opacity: 50%;
}

.social img {
	vertical-align: top;
	margin-right: 8px;
	height: 22px;
}

.game_banner {
	width: 100%;
}

.screenshot {
	width: 49%;
}

.info {
	font-family: "tiny";
	color: var(--col_text);
	font-size: 16px;
	opacity: 50%;
}

.info_margin {
	font-family: "tiny";
	color: var(--col_text);
	font-size: 16px;
	opacity: 50%;
	margin-bottom: 28px;
}

.date {
	font-family: "tiny";
	color: var(--col_bg);
	font-size: 16px;
	opacity: 50%;
	margin-left: 8px;
	vertical-align: text-bottom;
	background-color: var(--col_primary);
	padding: 4px;
	padding-left: 6px;
	border-radius: 0px;
}

.youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.smooth {
	image-rendering: auto;
}

::selection {
	color: var(--col_bg);
	background: var(--col_primary);
}
::-moz-selection {
	color: var(--col_bg);
	background: var(--col_primary);
}

hr {
	border: 2px solid var(--col_text);
	opacity: 0.5;
	margin-top: calc(var(--margin-top) * 2);
	margin-bottom: calc(var(--margin-top) * 1);
}

#more_button {
	background-color: var(--col_text);
	font-family: "bakutype";
	font-weight: bold;
	color: var(--col_bg);
	margin: 0;
	margin-top: var(--margin-top);
	margin-bottom: var(--margin-top);
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 4px;
	padding-bottom: 0px;
	font-size: 16px;
	border: none;
	cursor:pointer;
	opacity: 50%;
}

#more_button::before {
	content: "+ read more";
}

#more_button:hover {
	background-color: var(--col_primary);
	opacity: 100%;
}

.read_less::before {
	content: "- read less" !important;
}

.read_less {
	padding-left: 28px !important;
	padding-right: 28px !important;
}

.hidden {
	display: none;
}

/* --------------------- //
//  MEDIA QUERIES
// --------------------- */

@media (max-width: 768px) {

	* {
		font-size: 14px;
	}

	#body_wrapper {
		display: block;
		max-width: var(--max-width);
		margin: auto;
		margin-top: var(--padding-sides);
		margin-bottom: var(--margin-top);
	}

	#sidebar_wrapper {
		/* background-color: rgba(255, 0, 0, 0.297); */
		position: relative;
		/* width: 100%; */
		width: fit-content;
		height: auto;
		top: 0;
		margin: auto;
	}

	#content_wrapper {
		/* background-color: rgba(8, 0, 255, 0.297); */
		margin-top: var(--margin-top);
		padding-left: var(--padding-sides);
		padding-right: var(--padding-sides);
	}

	.sidebar_link {
		display: inline-block;
		margin-left: 0px;
		margin-right: 0px;
	}

	.sidebar_link_home {
		display: block;
		margin: 0px;
		margin-top: 16px;
	}

}