:root {
	--tile-width: 128px;
	--tile-height: 128px;
}

canvas {
	display: block;
	position: fixed;
	width: 100%;
	height: 100lvh;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 99;
}

@font-face {
  font-family: "Crimson";
  src: url("/assets/CrimsonText-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

html {
	font-size: 14pt
}

body {
	font-family: "Crimson", sans-serif;
	text-align: center;
    background-color: #396302;
    color: #260307;
}

/* HEADER */

.title {
	margin-top: calc(var(--tile-height));
	margin-left: calc(var(--tile-width));
	margin-right: calc(var(--tile-width));
	display: flex;
	flex: 4;
  	flex-wrap: wrap;
  	align-items: center;
  	justify-content: center;
}

h1 {
	position: relative;
	margin-top: 1%;
	margin-bottom: 1%;
	font-size: 5rem;
    text-shadow:
		-1px -1px 0 #E1CA96,
		1px -1px 0 #E1CA96,
		-1px 1px 0 #E1CA96,
		1px 1px 0 #E1CA96;
}

.night {
	font-size: 2rem;
	transform: rotate(-20deg);
	position: absolute;
	color: #ffdf64;
	right: -10%;
	bottom: -5%;
	text-shadow:
		-1px -1px 0 #260307,
		1px -1px 0 #260307,
		-1px 1px 0 #260307,
		1px 1px 0 #260307;
}

.title span {
	font-size: 1.5rem;
	flex: 1;
	padding-left: 3%;
	text-align: left;
	justify-content: right;
    text-shadow:
		-0.5px -0.5px 0 #E1CA96,
		0.5px -0.5px 0 #E1CA96,
		-0.5px 0.5px 0 #E1CA96,
		0.5px 0.5px 0 #E1CA96;
}

.link_bar {
	font-style: bold;
	text-align: center;
	font-size: 2.5rem;
	color: inherit;
	font-weight: 900;
	margin-top: 0%;
	margin-bottom: 2%;
	padding-left: calc(var(--tile-width));
	padding-right: calc(var(--tile-width));
	text-shadow:
		-0.5px -0.5px 0 #E1CA96,
		0.5px -0.5px 0 #E1CA96,
		-0.5px 0.5px 0 #E1CA96,
		0.5px 0.5px 0 #E1CA96;
}

.link_bar a { text-decoration: none; margin-right: 1.5%; margin-left: 1.5%;}
.link_bar a:hover {color: #484848; text-decoration: none;}

/* END HEADER */

/* LIST BLOCK*/

.list_button {
	top: 0px;
	left: calc(50% - var(--tile-width)*0.6);
	/*transform: translateX(-50%);*/
	width: calc(var(--tile-width)*1.2);
	height: calc(var(--tile-height)*1.2);
	z-index: 100;
	position: fixed;

	transition: transform 0.5s ease;
  	cursor: pointer;
}

.list_block {
	display: none;
	opacity: 0;
	transition: opacity 0.25s ease;
	position: fixed;

	width:40%;
	height: calc(100vh - var(--tile-height)*4);
	top: calc(var(--tile-height)*1.2);
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;

	text-align: left;
	overflow-y: scroll;
	padding-top: 1.5%;
	padding-bottom: 1.5%;
	padding-left: 2%;
	padding-right: 2%;
	border: 1px solid #222222;
	font-size: 1.2rem;
	background-color: #E1CA96;
	color: #222222;
}

.list_block::-webkit-scrollbar-track {
  background: #E1CA96;
}

.list_block::-webkit-scrollbar-thumb {
  background-color: #260307;
}

/* END LIST BLOCK*/

/* ARTICLES*/

a {color: inherit;}
a:hover {color: #484848;}

article {
	text-align: justify;
	display: block;
	margin-bottom: 5%;
	padding-top: 3%;
	padding-bottom: 6%;
	padding-left: 7%;
	padding-right: 7%;
	margin-left: 20%;
	margin-right: 20%;
	border: 1px solid #260307;
	font-size: 1.5rem;
	background-color: #E1CA96;
	color: #260307;
	white-space: pre-wrap;
}

article img {
	border-radius: 4px; 
	display: block; 
	margin-top: 10px; 
	margin-bottom: 10px; 
	margin-left: auto; 
	margin-right: auto; 
	max-width: 80%; 
	height: auto;
}

article p {
	text-indent: 3em;
	margin: 0px;
}

article h2 {
	text-align: left;
}

.will_appear {
	display: none;
	
}

.will_appear.with_transition {
	opacity: 0;
	transition: opacity 0.5s ease-in;
}

.will_appear.now {
	display: block;
	opacity: 1;
}

/*Mobile Phones*/
@media (max-aspect-ratio: 4/3) {
	html {
		font-size: 18pt;
	}

	article {
		margin-left: calc(var(--tile-width)*1.2);
		margin-right: calc(var(--tile-width)*1.2);
		padding-left: 3%;
		padding-right: 3%;
	}

	.title {
		flex-direction: column; 
	}

	.title span {
		font-size: 1.35rem;
		align-self: center;
	}

	.vanisher {
		display: none;
	}

	.list_block {
		width: 75%;
	}

	.night {
		right: 0%;
		bottom: -15%;
	}
}

/* END ARTICLES */