achievements_project/frontend/webpage/static/styles/index.css

#index-page {
	max-width: 1600px;
}

#list-page-search-filters {
	width: 100%;
	height: max-content;
}

#list-page-search-dropdown {
	display: flex;
	flex-direction: row;
	align-items: center;
}

#search-wrapper {
	width: 100%;
}

#list-page-search-pair {
	flex-grow: 1;
}

#filter-dropdown-wrapper {
	box-sizing: border-box;
	height: 84px;
	width: 84px;
}

#filter-dropdown-stack {
	width:  100%;
	height: 100%;

	position: relative;
}

#filter-dropdown-stack.active {
	transform: rotateZ(-90deg);
}

#filter-dropdown-button {
	position: absolute;
	left: 0;
	top: 0;

	height: 100%;

	display: block;
}

#filter-dropdown-stack:hover > #filter-dropdown-button {
	display: none;
}

#filter-dropdown-button-hover {
	position: absolute;
	left: 0;
	top: 0;

	height: 100%;

	display: none;
}

#filter-dropdown-stack:hover > #filter-dropdown-button-hover {
	display: block;
}

#list-page-filters-flex {
	display: none;

	width: 100%;
	height: max-content;

	flex-direction: row;
}

#list-page-filters-flex.active {
	display: flex;
}

.list-page-filter-section {
	box-sizing: border-box;

	flex-basis: 0;
	flex-grow: 1;

	height: 100%;

	display: flex;
	flex-direction: column;
}

#list-page-filters-background {
	background-color: var(--distinction);
}

.list-page-entry-text.achievement-name {
	flex-grow: 3;
	flex-basis: 0;
}

.list-page-entry-text.achievement-description {
	flex-grow: 6;
	flex-basis: 0;
}

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