body, html {
	font-size: 18px;
	font-family: Arial, sans-serif;
    margin: 0;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
	color: rgb(41, 44, 56);
    background-color: rgb(243, 244, 248);
}

header {
    height: 200px;
    background-color: #34eba8;
    width: 100%;
}

#headerText {
	font-size: 25px;
	margin: 20px;
	float: right;
}

section {
    flex: 1;
    width: 100%;
    background-color: #f2f2f2;
    padding: 20px;
    box-sizing: border-box;
}

#container {
	width: 90%;
	margin: 0 auto;
	padding: 20px;
}

.form-row {
	display: flex;
	flex-direction: row;
	margin-bottom: 20px;
	gap: 20px;
	align-items: center;
}

.form-row > label {
	flex: 1;
}

.form-row > input, .form-row > select {
	flex: 1;
	padding: 5px;
	box-sizing: border-box;
}

label[for="naam"]::after, label[for="email"]::after {
	content: " *";
	color: tomato;
}

form span {
	font-size: 0.75rem;
	color: tomato;
}

form span::before {
	content: "* ";
	color: tomato;
}

input, select, option, textarea {
	font-size: 1rem;
	color: rgb(41, 44, 56);
}

input[type="submit"] {
	color: rgb(243, 244, 248);
	background-color: rgb(95, 102, 131);
	border: 1px solid rgb(68, 73, 94);
	box-shadow: 0px 0px 3px rgb(68, 73, 94);
	padding: 4px 8px;
	cursor: pointer;
}

input[type="submit"]:active {
	background-color: rgb(122, 131, 168);
}

input[type="checkbox"] {
	transform: scale(1.25);
}

input:required {
	background-color: wheat;
}

input:out-of-range {
	background-color: tomato;
}

input:in-range {
	background-color: palegreen;
}

table {
    border-collapse: collapse;
    border: 2px solid black; 
}

table td, table th {
    border: 1px solid black; 
    padding: 8px; 
}

footer {
    height: 50px;
    background-color: #34eba8;
    width: 100%;
}

#footerText {
	margin-left: 20px;
	line-height: 50px;
}