@font-face {
	font-family: "Proxima Vara";
	src: url('/assets/Proxima_Vara.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-stretch: 0% 200%;
	font-style: normal;
	font-display: auto;
}

@font-face {
    font-family: "HEX Franklin";
    src: url('/assets/HEX_Franklin_v0.1_Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: auto;
}

#thick {
    font-family: "HEX Franklin";
    font-weight: 900;
    font-stretch: 125%;
}

#thin {
    font-family: "HEX Franklin";
    font-weight: 100;
    font-stretch: 75%;
}

.survey {
	background: red;
}

.survey .header {
	background: blue;
}

.survey .list {
	list-style-type: none;
	padding: 0; 
	margin: 0;
	background: blue;
}

.survey .list li {
	background: green;
	display: flex;
	flex-direction: row;
	position: relative;
	height: auto;

	--bar-width: 90%;

	will-change: transform;
	transition: transform 350ms cubic-bezier(.2, .8, .2, 1);
}

.survey .list li * {
	margin: 0px 3px;
}

.survey .list li .name {
	width: 10%;
	background: mediumpurple;
	text-align: right;
}

.survey .list li .bar_wrap {
	width: 80%;
	background: black;
	display: flex;
	flex-direction: row;
	overflow: visible;
}

.survey .list li .bar {
	height: 100%;
	margin: 0px 0px;
	width: var(--bar-width);
	background: yellow;

	width: var(--bar-width, 0%);
	transition: var(--bar-transition, none);
}

.survey .list li .bar_wrap .votes {
	background: orange;
	display: flex;
	flex-direction: row;
	position: relative;	
}

.votes_first {
    font-family: "HEX Franklin";
	font-weight: 550;
	font-stretch: 150%;
	margin: 0px 0px;
}

.votes_second {
    font-family: "HEX Franklin";
	font-weight: normal;
	font-stretch: 10%;
	margin: 0px 0px;
}