* {
	box-sizing: border-box;
}

:root {
	--accent: #7f003f;

	--img_bg: url('https://upload.wikimedia.org/wikipedia/commons/7/7d/WTB_20220723_Ulrichsberg_Aussichtsturm_Alpenblick_9792.jpg');
	--color_bg: #000000;
	--color_light_50: #7f7f7f;
	--color_txt: #ffffff;
	--color_txt_link: #afafaf;

	--max-width_form: 1024px;
	--min-width_form: 50%;
	--padding_form: 16px;
	--color_bg_form: #000000af;

	--color_bg_input: #000000af;
}

.hidden {
	visibility: hidden;
}

html {
	color: var(--color_txt);
}

a {
	color: inherit;
}

a:hover {
	color: var(--color_txt_link)
}

body {
	background-color: var(--color_bg);
	background-image: var(--img_bg);
	background-size: cover;
	background-attachment: fixed;
}

form {
	width: 100%;
	max-width: var(--max-width_form);
	min-width: var(--min-width_form);
	margin: auto; /* center */
	padding: var(--padding_form);
	background-color: var(--color_bg_form);
	border-radius: 32px;
}

.question.description {
	padding-left: 16px;
	border-left-style: solid;
	border-color: var(--color_light_50);
	border-width: 4px;
}

input, textarea, select {
	width: calc(100% - 2*(8px));
	margin: 8px;
	padding: 16px;
	border-radius: 12px;
	background-color: var(--color_bg_input);
	color: inherit;
	text-align: center;
	border-style: none;
	accent-color: var(--accent);
}

textarea {
	text-align: initial;
	resize: vertical;
}

input[type=radio], input[type=checkbox] {
	width: 16px;
}

.answer.checkbox label, .answer.multiple-choice label {
	width: calc(100% - 16px - 2*(8px));
	height: calc(1em + 2*(8px));
	display: inline-block;
}

.answer.other {
	display: flex;
	align-items: center;
}

.answer.other input[type=radio], .answer.other label {
	flex-grow: 0;
	flex-shrink: 0;
	width: initial;
	height: initial;
}

.answer.other input[type=text] {
	flex-grow: 1;
	flex-shrink: 1;
	text-align: initial;
	margin: initial;
	padding: calc((1/2)*(16px));
	border-radius: calc((1/2)*(12px));
}