@font-face {
	font-family: "CloisterBlack";
	src: url("fonts/CloisterBlack.ttf");
}

:root {
	--bg-color: #000;
	--fg-color: #F5F1E8;
	--accent-color: #694b86;
}

/* Base layout */
html {
	font-family: "CloisterBlack";
	color: var(--fg-color);
	background: 
		url("img/angels-egg2.jpg") center / cover no-repeat,
		var(--bg-color);
		background-attachment: fixed;
	font-size: 18px;
}

main {
	display: flex;
	justify-content: center;
	align-items: center;
}

body {
	margin: 0;
}

a {
	color: var(--accent-color);
	text-decoration: none;
	position: relative;
	letter-spacing: 0.05em;
	text-shadow: 
		0 0 2px var(--bg-color),
		0 0 6px var(--accent-color);
	transition: all 0.25s ease;
}

a::after {
	content: "†";
	margin-left: 6px;
	font-size: 0.8em;
	opacity: 0.7;
}

a:hover {
	color: var(--accent-color);;
	transform: scale(1.05);
	text-shadow: 
		0 0 4px #000,
		0 0 10px var(--accent-color),
		0 0 18px var(--accent-color);;
}

a:hover::before {
	content: " ";
	opacity: 0.8;
}

a:active {
	color: #fff;
	text-shadow: 0 0 8px var(--accent-color);;
}


.index-list, .post-list{
	width: 420px;
	height: 540px;
	padding: 36px; 

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	text-align: center;
	position: relative;

	border: 2px solid var(--accent-color);
	background: var(--bg-color);

	box-sizing: border-box; /* critical */
	overflow: hidden; /* prevents expansion */

	box-shadow:
		0 0 15px var(--accent-color),
		inset 0 0 25px var(--accent-color);
	
	margin-top: 10vh;
	margin-bottom: 10vh;
}

.post-list{
	height: auto;
	width: auto;
}

/* List */
.index-list ul, .post-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.index-list li {
	margin: 14px 0;
	text-align: center;
	letter-spacing: 0.08em;
}

.post-list li {
	margin: 14px 0;
	text-align: left;
	letter-spacing: 0.08em;
}

/* Image */
.index-list a {
	display: inline-block;
}

a span {
	display: inline-block;
	transition: transform 0.25s ease, letter-spacing 0.25s ease;
}

a:hover span {
	transform: scale(1.1);
	letter-spacing: 0.12em;
}