achievements_project/frontend/webpage/styles/index.css

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: 1600px;

	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 {
	width: 50%;
	height: max-content;

	max-width: 480px;
}

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

	padding: 24px;
	background-color: var(--distinction);

	width: 100%;
	max-width: 640px;
	height: max-content;

	box-shadow: 0px 0px 8px 8px var(--shadow-color);

	border-radius: 8px;

	position: relative;
	z-index: -1;
}

#profile-info-pfp-vignette {
	box-shadow: inset 0px 0px 50px 30px var(--shadow-color);

	border-radius: 8px;
}

#profile-info-pfp-img {
	display: block;
	width: 100%;
	border-radius: 8px;

	position: relative;
	z-index: -1;
}

.profile-list {
	width: 100%;
	height: max-content;

	border-radius: 8px;
	
	overflow: hidden;

	box-shadow: 0px 0px 8px 8px var(--shadow-color);
}

.profile-entry {
	overflow: hidden;

	height: 64px;

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

	background-color: var(--distinction);
}

.profile-entry.accented {
	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;

	flex-grow: 0;
}

.profile-entry-text {
	box-sizing: border-box;

	margin: 0;
	padding: 0px 16px;

	height: 100%;
	line-height: 64px;

	color: var(--foreground);

	font-size: 24px;

	border-top: 1px solid var(--background);

	flex-grow: 0;
}

.top > .profile-entry-text {
	border: 0;
}

.accented > .profile-entry-text {
	border-color: var(--accent-value0);
}

.profile-entry-text.platform-name,
.profile-entry-text.game-name,
.profile-entry-text.achievement-name {
	flex-grow: 1;
}

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

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

#profile-platforms {
	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,
#profile-achievements {
	width: 50%;
	height: max-content;
}