:root {
	--void: #040405; /* black */
	--known: #c2c4c7; /* silver */
	--lurking-shadows: #23262d; /* shadow grey */
	--old-gods: #857143; /* olive wood */
	--faint-starlight: #7ea9b8; /* cool steel */
	--life: #5d181c; /* night bordeaux */
	--space-dust: #5f4c7a; /* dusty grape */

}

html {
	background-color: var(--void);
	background-image:
		radial-gradient(1px 1px at 199px 91px, white, transparent), 
		radial-gradient(1px 1px at 59px 72px, white, transparent), 
		radial-gradient(1px 1px at 192px 22px, white, transparent), 
		radial-gradient(1px 1px at 110px 28px, white, transparent), 
		radial-gradient(1px 1px at 114px 191px, white, transparent), 
		radial-gradient(1px 1px at 114px 191px, white, transparent), 
		radial-gradient(1px 1px at 66px 142px, white, transparent), 
		radial-gradient(1px 1px at 660px 42px, white, transparent), 
		radial-gradient(1px 1px at 45px 49px, white, transparent), 
		radial-gradient(1px 1px at 134px 149px, white, transparent), 
		radial-gradient(1px 1px at 148px 453px, white, transparent), 
		radial-gradient(1px 1px at 148px 153px, white, transparent); 
	background-size: 200px 200px;
	background-repeat: repeat;
}

@font-face {
	font-family: 'Cinzel';
	src: url('fonts/Cinzel_Decorative/CinzelDecorative-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Elms';
	src: url('fonts/Elms_Sans/static/ElmsSans-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'IBM';
	src: url('fonts/IBMPlexSans/static/IBMPlexSans-Medium.ttf') format('truetype');
}

body {
	color: var(--known);
	max-width: 50rem;
	margin: 0 auto;
	padding: 2rem;
	font-family: 'Elms', sans-serif;

}


h1, h2 {
	font-family: 'Cinzel', serif;
	text-shadow: 0.1rem 0.3rem 0 var(--old-gods);
}

.postcardCollection {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	list-style: none;
}

.postcardCollection > li {
	display: grid;
}


/* ///////////Profile///////// */

.profile-page {
	max-width: 62rem;
	gap: 1rem;
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-areas:
		'intro intro'
		'main topRight'
		'main midRight'
		'main bottomRight'
		'bottom bottom'
		'comments comments';
}

@media only screen and (max-width: 399px) {
	.profile-page {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			'intro'
			'main'
			'topRight'
			'midRight'
			'bottomRight'
			'bottom';
	}
}

nav a:visited{
	color: var(--life);
}

nav a:hover {
	color: var(--faint-starlight);
}

nav a {
	color: var(--space-dust);
	text-decoration: none;
}

#topIntro {
	grid-area: intro;
	border-bottom: solid var(--lurking-shadows);
}

#mainContent {
	grid-area: main;
}

#topRightSidebar {
	grid-area: topRight;
}

#midRightSidebar {
	grid-area: midRight;
}

#bottomRightSidebar {
	grid-area: bottomRight;
}

#bottomComments {
	grid-area: bottom;
}