:root {
	--primary-font: 'Arial Narrow', 'Arial', sans-serif;
	--text-color: #3d342b;
	--menu-color: #4c00fd;
	--highlight-color: #fb7aff;
	--white-color: #f1ebd9;
	font-family: var(--primary-font);
	color: var(--text-color);
	font-size: 24px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background-color: var(--white-color);
}

html,
body {
	padding: 0;
	margin: 0;
	touch-action: manipulation;
}

body {
	overflow-x: hidden;
	overflow-y: scroll;
}
h1 {
	text-align: center;
}

a {
	text-decoration: none;
}

a:hover {
	background-color: var(--highlight-color);
}

form {
	background-color: white;
	width: 50vw;
	margin: 0 auto;
	cursor: default;
	margin-bottom: 5%;
}

.input--text {
	display: flex;
	flex-direction: column;
	margin: 1rem 0;
}

input[type='text'],
input[type='email'] {
height: 1rem;
}

textarea {
	height: 2.5rem;
	resize: none;
	margin: 0.25rem 0;
}

input[type='text'],
input[type='email'], textarea {
	border: 0.5px solid var(--text-color);
	outline: 0.5px solid var(--text-color);

		border-radius: 0;
			font-family: 'Arial', sans-serif;
	color: var(--text-color);
	font-size: 16px;
}

input[type='text']:focus,
input[type='email']:focus, textarea:focus {
	border: 1px solid var(--highlight-color);
	outline: 1px solid var(--highlight-color);
	border-radius: 0;
}

.input--text:first-of-type {
	display: grid;
	grid-template-columns: 48% 48%;
justify-content: space-between;
}

.input--text:first-of-type span {
	display: flex;
	flex-direction: column;
}

ul {
	font-size: 0.65rem;
	font-family: 'Arial', sans-serif;
	margin: 0;
	padding-left: 0;
	color: grey;
}

ul li {
	list-style: none;
	padding-left: 1px;
	margin: 0.125rem 0 0.25rem 0;
}

.input--radio {
	margin: 1rem 0;
	display: grid;
}

.input--radio p,
.input--text label {
	color: var(--highlight-color);
}
.input--radio p {
	margin: 0;
}

.input--check p,
.input--textarea p,
.input--text input {
	margin: 0.25rem 0;
}

.input--radio label,
.input--check label {
	margin-right: 2rem;
}

button {
	width: 100%;
	height: 3rem;
	font-family: var(--primary-font);
	border-radius: 0;
	background: white;
	font-size: 1rem;
	border: 2px solid var(--highlight-color);
	color: white;
	margin: 0.5rem 0 2rem 0;
	background: var(--highlight-color);
}

button:hover {
background: #f34af9;
}

a {
	cursor: crosshair;
	text-decoration: underline;
	text-underline-offset: 6px;
}

a:hover {
	text-decoration: none;
	background-color: var(--highlight-color);
	text-decoration: underline;
	text-underline-offset: 4px;
}

em {
	font-family: var(--sans-serif-font);
	font-size: 0.85rem;
	font-weight: bold;
}

main {
	position: fixed;
	padding: 0 1rem;
	line-height: 2rem;
	font-size: 1.85rem;
	cursor: default;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* kwes form specific styling */

.kw-alert {
  width: auto;
  padding: 0.25rem 1rem;
  border-radius: 0;
  margin-bottom: 1.5rem;
  font-size: 0.5rem;
	text-transform: uppercase;
  display: block;
  font-weight: normal;
	text-align: center;
}

.kw-alert-error {
	color: var(--menu-color);
	background: var(--white-color);
}

.kwes-form .kw-border-error, .kf-form .kw-border-error {
	border: 2px solid var(--text-color); !important
}

.kwes-form .kw-border-success, .kf-form .kw-border-success {
	border: var(--text-color);
}

/* Breakpoint */

@media (max-width: 990px) {
	.horizontal--scroll {
		touch-action: pan-y;
	}

	form {
		width: 70vw;
	}

	.input--text:first-of-type {
		display: block;
	}

	.input--text:first-of-type span {
		width: 100%;
	}
	.input--text:first-of-type span+span {
		margin-top: 0.5rem;
	}
}

@media (max-width: 680px) {
	form {
		width: 90vw;
	}

}