/* RESETS */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;

	font-size: 16px;
	line-height: 1em;
}

a, a:active, a:focus {
	text-decoration: none;
	color: inherit;
}

/* ----- COLORS ----- */
:root {
	--col-white: #ffffff;
	--col-black: #000000;
	--col-page-background: #121518;
	--col-accent0: #F7F75E;
	--col-accent1: #30FDA4;
	--col-accent2: #5FD1F1;
	--col-accent3: #F254AB;
}

/* LAYOUT */
.page {
	background: var(--col-page-background);

	color: var(--col-white);
	font-family: monospace;

	font-size: 75%;
	line-height: 1.5em;

	display: grid;
	grid-template-columns: 1fr 21em 1fr;
	grid-template-rows: 1fr auto 1fr;
}

.website:hover    { color: var(--col-accent0); }
.email:hover      { color: var(--col-accent1); }
.bsky:hover       { color: var(--col-accent2); }
.stagroodle:hover { color: var(--col-accent3); }

.container {
	grid-column: 2/3;
	grid-row: 2/3;
}

.container .entry {
	display: grid;
	grid-template-columns: auto 1fr;
}
.container .value {
	text-align: right;
}
.container .wip,
.container .spacer {
	grid-column: 1/3;
}
.container .wip {
	text-align: center;
}

@media only screen and (min-width : 768px) {
	.page { font-size: 100%; }
}

@media only screen and (min-width : 1023px) {
	.page { font-size: 125%; }
}

@media only screen and (min-width : 1599px) {
	.page { font-size: 150%; }
}