/* Variables and the media query logik for theming*/
/* Font loading */
@font-face { font-family: geist; src: url(./Geist-Regular.woff2); }
@font-face { font-family: geist; src: url(./Geist-Bold.woff2); font-weight: bold; }
@font-face { font-family: melvian; src: url(./MelvianCode-Regular.woff2); font-weight: bold; }

/* Variables and theming */
:root {
	/* Text sizes */
	--lyb-t-small: clamp(0.5rem, 1vw + 0.5rem, 1rem);
	--lyb-t-normal: clamp(1rem, 1vw + 1rem, 1.35rem);
	--lyb-t-medium: clamp(1.3rem, 1vw + 1.3rem, 2rem);
	--lyb-t-large: clamp(1.5rem, 1vw + 1.5rem, 2.5rem);

	/* Borders and shadows and such */
	--lyb-b-thick: 4px;
	--lyb-b-default: 2px;

	/* Distances for margins */
	--lyb-d-normal: clamp(0.2rem, 1vw + 0.2rem, 0.5rem);
	--lyb-d-large: clamp(0.4rem, 1vw + 0.4rem, 0.7rem);


	/* The header is the same in both themes*/
	--lyb-c-header: #9b4242;
	--lyb-c-header-text: #d0cccc;
	--lyb-c-header-text-shadow: #211f21;

	--lyb-c-background: #d0cccc;
	--lyb-c-text: #211f21;
	--lyb-c-text-shadow: #211f2150;
}

@media (prefers-color-scheme: dark) {
	:root {
		--lyb-c-background: #211f21;
		--lyb-c-text: #d0cccc;
		--lyb-c-text-shadow: #d0ccccb1;
	}
}

/* Other styling */
.page {
	max-width: 70rem;
	margin: 0 auto;
	position: relative;
	width: 100%;
}

@media (min-width: 98rem) {
	.side {
		position: absolute;
		right: calc(100% + 2rem);
		width: 12rem;
	}
}
 /* Handles the main responsiveness of the main content and its sidebar */
header {
	background-color: var(--lyb-c-header);
	padding: var(--lyb-d-normal);
}

.header-entry {
	margin-left: var(--lyb-d-normal);

	color: var(--lyb-c-header-text);
	text-decoration: none;
	font-size: var(--lyb-t-large);
}

.header-entry:hover {
	text-shadow: var(--lyb-b-thick) var(--lyb-b-thick) var(--lyb-c-header-text-shadow);
} /* Styling thats only for the header */
footer{
	margin-top: auto;

	background-color: var(--lyb-c-header);
	
	text-align: center;
}

footer > a {
	color: var(--lyb-c-header-text);
}

footer > a:hover {
	text-shadow: var(--lyb-b-thick) var(--lyb-b-thick) var(--lyb-c-header-text-shadow);
} /* Styling thats only for the footer */
body {
	margin: 0px;
	line-height: 1.5;
	font-family: geist;
	font-size: var(--lyb-t-normal);
	color: var(--lyb-c-text);

	background-color: var(--lyb-c-background);

	/* Pushes down the footer */
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	justify-content: flex-start;
}

/* Links */
a {
	color: var(--lyb-c-header);
	font-weight: bold;
}
a:hover {
	text-shadow: var(--lyb-b-default) var(--lyb-b-default) var(--lyb-c-text-shadow);
}



code {
	display: block;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-break: break-all;

	border: var(--lyb-b-default) solid var(--lyb-c-text);
	padding: var(--lyb-d-large);
	margin: var(--lyb-d-normal);

	background-color: #00000021;
	color: var(--lyb-c-text);

	font-family: melvian;
	font-size: var(--lyb-t-small);

	
}

quote {
	display: block;
	white-space: pre-wrap;
	padding-left: var(--lyb-d-large);
	border-left: var(--lyb-b-default) solid var(--lyb-c-text);
}

	
h1, h2, h3, h4 { margin:0px;}
h1 {
	font-size: var(--lyb-t-medium);
}

/* Post list */
.postList {
	background-color: var(--lyb-c-header);
	border: var(--lyb-b-default) solid var(--lyb-c-text);
	padding: var(--lyb-d-normal);
	margin: var(--lyb-d-normal);
}

.postList:hover {
	box-shadow: var(--lyb-b-thick) var(--lyb-b-thick) var(--lyb-c-header-text-shadow);
}

@media (prefers-color-scheme: dark) {
	.postList:hover {
		box-shadow: var(--lyb-b-thick) var(--lyb-b-thick) var(--lyb-c-text-shadow);
	}
}

.postList>a {
	color: var(--lyb-c-header-text);
}

.postList>a:hover {
	text-shadow: unset;
}
 /* The actual component styling */