:root {
	/* color components */
	--palette-background: 33,33,33;
	--palette-contrast: 255,255,255;
	--palette-header: 45,45,45;
	--palette-accent-high: 253,74,24;
	--palette-accent-low: 170,3,88;

	/* compiled colors */
	--color-background: rgb(var(--palette-background));
	--color-contrast: rgb(var(--palette-contrast));
	--color-header: rgb(var(--palette-header));
	--color-accent: linear-gradient(145deg, var(--palette-accent-high) 0%, var(--palette-accent-low) 100%);
}

* {
	margin: 0;
	color: var(--color-contrast);
}

*::-webkit-scrollbar {
	display: none;
}

html,
body {
	background-color: var(--color-background);
	display: flex;
	flex-direction: column;
	align-items: center;
}

body {
	--page-depth: 0;
	--animation-speed: 400ms;

	width: 400px;
	transition: var(--animation-speed) transform cubic-bezier(0.4, 0, 0.2, 1);
	transform: translateX(calc((100% * var(--page-depth)) * -1));
}

.page .header,
header {
	width: 100%;
	background-color: var(--color-header);
	border-bottom: solid 1px black;
}

header {
	--header-padding: 30px;
	--pfp-size: 80px;
	--pfp-stroke-offset: 5px;
	--pfp-stroke-width: 4px;
	--pfp-stroke-size: calc(var(--pfp-stroke-offset) + var(--pfp-stroke-width));

	height: calc(var(--pfp-size) + (var(--pfp-stroke-size) * 2));
	padding: var(--header-padding) 0 var(--header-padding) 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

#myAvatar {
	width: var(--pfp-size);
	height: var(--pfp-size);
	box-shadow: 
		0 0 0 var(--pfp-stroke-offset) var(--color-header), 
		0 0 0 var(--pfp-stroke-size) rgb(var(--palette-accent-high));
	border-radius: 100%;
}

ol {
	list-style-type: none;
	width: 100%;
	font-size: 15px;
	padding-left: 0;
}

ol li {
	--padding: 25px;

	width: calc(100% - (var(--padding) * 2));
	height: 64px;
	padding: 0 var(--padding) 0 var(--padding);
	display: flex;
	align-items: center;
	cursor: pointer;
}

.page .back:hover,
ol li:hover {
	background: rgba(var(--palette-contrast),.1);
}

ol li img {
	height: 20px;
	filter: brightness(0) invert(1);
	margin-right: 20px;
}

/* ---- */

.page {
	transition: var(--animation-speed) opacity;
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
	opacity: 1;
}

.page .header {
	--height: 60px;
	--button-size: 40px;
	--padding: 10px;

	height: 60px;
	box-sizing: border-box;
	padding: 0 var(--padding) 0 var(--padding);
	display: flex;
	align-items: center;
}

.page .back {
	--chevron-size: 10px;
	--chevron-stroke-width: 3px;

	width: var(--button-size);
	height: var(--button-size);
	border-radius: 4px;
	border: solid 1px var(--color-background);
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

.page .back::before {
	content: '';
	border-style: solid;
	border-width: var(--chevron-stroke-width) var(--chevron-stroke-width) 0 0;
	display: inline-block;
	width: var(--chevron-size);
	height: var(--chevron-size);
	top: 0;
	left: calc(var(--chevron-size) / 3);
	transform: rotate(-135deg);
	position: relative;
	vertical-align: top;
}

.page .header p {
	width: calc(100% - (var(--button-size) * 2));
	font-size: 17px;
	text-align: center;
}

.page .body {
	position: relative;
	top: var(--height);
	box-sizing: border-box;
    padding: 20px;
	font-size: 16px;
}