html, body {
	background-color: var(--background-dark);

	margin: 0;
	border: 0;
	padding: 0;
	width: 100%;
	height: 100%;

	font-family: sans-serif;
}

#games-page {
	max-width: 1920px;
}

.list-page-entry-text.game-name {
	flex-grow: 1;
}

.list-page-entry-text.game-description {
	flex-grow: 2;
}

#achievements-page {
	max-width: 1920px;
}

.list-page-entry-text.achievement-name {
	flex-grow: 4;
}

.list-page-entry-text.achievement-description {
	box-sizing: border-box;

	margin: 0;
	padding: 0 12px;
	width: 0;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	flex-grow: 8;
}

.list-page-entry-text.achievement-stages {
	flex-grow: 1;
}

#profile-page {
	max-width: 1920px;

	display: block;
}

#profile-section-1 {
	box-sizing: border-box;

	width: 100%;
	height: max-content;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
}

#profile-info {
	box-sizing: border-box;

	width: max-content;
	height: max-content;

	max-width: 50%;

	padding: 0px 64px;
	padding-bottom: 128px;
}

#profile-info-pfp {
	width: 100%;
	max-width: 640px;

	margin-bottom: 1.25em;
}

#profile-info-name {
	margin: 0;

	padding: 16px 0px;

	font-size: 42px;

	color: var(--foreground);
}

.profile-list {
	margin-top: 1.25em;

	width: 100%;
	height: max-content;

	border-radius: 8px;
	
	overflow: hidden;
}

.profile-entry {
	overflow: hidden;

	height: 64px;

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	background-color: var(--distinction);

	border-bottom: 1px solid var(--background);
}

.profile-entry.accented {
	border-bottom: 1px solid var(--accent-value0);

	background-color: var(--accent-value1);
}

.profile-entry-left {
	height: 100%;

	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.profile-entry-right {
	height: 100%;

	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.profile-entry-icon {
	width: 64px;
}

.profile-entry-text {
	margin: 0;
	padding: 0px 16px;

	color: var(--foreground);

	font-size: 24px;
}

.profile-entry-text.accented {
	display: none;
}

.profile-entry.accented .profile-entry-text.accented {
	display: block;
}

#profile-platforms {
	box-sizing: border-box;

	height: max-content;

	padding: 0px 64px;

	flex-grow: 1;
}

#profile-section-2 {
	box-sizing: border-box;

	width: 100%;
	height: max-content;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
}

#profile-games {
	box-sizing: border-box;
	padding: 0px 64px 64px;

	width: 50%;
	height: max-content;
}

#profile-achievements {
	box-sizing: border-box;
	padding: 0px 64px 64px;

	width: 50%;
	height: max-content;
}