body {
	font-family: Arial, Helvetica, sans-serif;
}
.header {
	padding: 80px; /* some padding */
	text-align: center; /* center the text */
	background: #1abc9c; /* green background */
	color: white; /* white text color */
}

/* Increase the font size of the <h1> element */
.header h1 {
	font-size: 40px;
}

/* Style the top navigation bar */
.navbar {
	overflow: hidden; /* Hide overflow */
	background-color: #333; /* Dark background color */
}

/* Style the navigation bar links */
.navbar a {
	float: left; /* Make sure that the links stay side-by-side */
	display: block; /* Change the display to block, for responsive reasons (see below) */
	color: white; /* White text color */
	text-align: center; /* Center the text */
	padding: 14px 20px; /* Add some padding */
	text-decoration: none; /* Remove underline */
}

/* Right-aligned link */
.navbar a.right {
	float: right; /* Float a link to the right */
}

/* Change color on hover/mouse-over */
.navbar a:hover {
	background-color: #ddd; /* Grey background color */
	color: black; /* Black text color */
}

/* Ensure proper sizing */
* {
	box-sizing: border-box;
}

/* Column container */
.row {
	display: flex;
	flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
	flex: 30%; /* Set the width of the sidebar */
	background-color: #f1f1f1; /* Grey background color; */
	padding: 20px; /* Some padding */
}

/* Main column */
.main {
	flex: 70%; /* Set the width of the main content */
	background-color: white; /* White background color */
	padding: 20px; /* Some padding */
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
	.row {
		flex-direction: column;
	}
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
	.navbar a {
		float: none;
		width: 100%;
	}
}

.footer {
	padding: 20px; /* Some padding */
	text-align: center; /* Center text */
	background: #ddd; /* Grey background */
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
	width: 100%; /* Full width */
	padding: 12px; /* Some padding */
	border: 1px solid #ccc; /* Gray border */
	border-radius: 4px; /* Rounded borders */
	box-sizing: border-box; /* Make sure that the padding and width stays in place */
	margin-top: 6px; /* Add a top margin */
	margin-bottom: 16px; /* Bottom margin */
	resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
	background-color: #4CAF50;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
	background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
	border-radius: 5px;
	background-color: #f2f2f2;
	padding: 20px;
}

/* Add color for error messages */
.error {
	color: #FF0000;
}