stylenew.css

	body {
		font-family: Source Sans Pro, -apple-system, sans-serif;
		font-size: 12px;
		font-size: 1em;
		margin: 0;
		padding: 0;
		z-index: 1;
		-webkit-font-smoothing: antialiased;
		-moz-font-smoothing: antialiased;
		-o-font-smoothing: antialiased;
		font-smoothing: antialiased;
	}
	
	*, *:before, *:after {
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box; 
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	h1, h2, h3, h4, h5, p, em, a, em {
		margin: 0;
		padding: 0;
	}
	
	strong {
		font-size: 1.5em;
	}
	
	strong h1 {
		margin-top: 3em;
	}
	
	h1 {
		font-size: 2em;
		font-weight: 600;
		margin-bottom: 0.5em;
	}
	
	h2 {
		font-size: 1.5em;
		font-weight: 300;
	}
	
	h3 {
		font-size: 1.25em;
		font-weight: 600;
	}
	
	h4 {
		font-size: 1.25em;
		font-weight: 600;
	}
	
	h5 {
		color: #4A90E2;
		font-size: 0.8em;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 600;
	}
	
	p {
		font-size: 1em;
	}
	
	a {
		font-weight: bold;
		text-decoration: none;
	}
	
	header {
		color: white;
		padding: 0em 2em 0em 2em;
	}
	
	header:before {
		content: "";
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: -100;
		display: block;
		background-image: url("resources/bkg2.jpg");
		overflow: hidden;
		width: 100%;
		height: 100%;
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
	}
	
	
	button {
		font-family: Source Sans Pro, sans-serif;
		font-weight: 600;
		border: none;
		border-radius: 8px;
		color: white;
		font-size: 1em;
		padding: 0.75em 2em;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		margin-top: 1em;
		margin-bottom: 1em;
		margin-right: 8px;
		
	}
	
	header h2, header button {
		margin-bottom: 2em;
	}
	
	header button {
		background-color: rgba(37,37,37,0.6);
		color: white;
	}
	
	
	footer {
		color: white;
		width: 100%;
		background-color: #252525;
		padding-top: 3em;
		padding-bottom: 3em;
	}
	
	footer hr {
		border: 1px solid rgba(255, 255, 255, 0.25);
	}
	
	footer a {
		color: white;
	}

	input {
		border: none;
		border-bottom: solid 2px #D8D8D8;
		width: 70%;
		color: #6B7A8A;
		font-size: 1em;
		font-weight: 100;
		padding: 0.75em 2em;
		text-align: left;
		text-decoration: none;
		display: inline-block;
		margin-top: 2em;
		margin-right: 8px;
		outline: none;
		transition: 0.2s ease-in-out;
	}
	
	input:focus {
		border-bottom: solid 2px rgba(22,126,251,1);
		background-color: rgba(22,126,251,0.2);
		transition: 0.2s ease-in-out;
	}

	
	/* navigation styling below. */
	
	#navbar {
		font-family: 'MuseoSansRounded';
		background-color: rgba(37,37,37,0.8);
		height: 64px;
		margin: 0;
		padding: 0;
		position: fixed;
		overflow: hidden;
		top: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		-webkit-backdrop-filter: blur(5px);
	}
	
	#navbar button, #navbar label, #navbar a {
		 background-color: none;
		 margin: 1em;
		 color: white;
	}
	
	#navbar label {
		font-size: 1.4em;
		font-weight: 700;
		margin-left: 16px;
	}
	
	#navbar label em {
		font-size: 0.6em;
		font-style: normal;
		font-weight: 900;
		text-transform: uppercase;
		background-color: #FF3B30;
		color: white;
		padding: 4px;
		padding-left: 12px;
		padding-right: 12px;
		margin-left: 8px;
		border-radius: 100px;
	}
	
	#navbar button {
		background-color: rgba(220,220,230,0.2);
		padding-top: 8px;
		padding-bottom: 8px;
		margin-right: 16px;
		-webkit-backdrop-filter: saturate(350%) brightness(100%) blur(50px);
	}
	
	/* White page template below. */
	
	.page {
		background-color: white;
		border-bottom: 2px solid #D8D8D8;
		width: 100%;
		padding-top: 3em;
		padding-bottom: 3em;
	}
	
	.page:last-of-type {
		border-bottom: none;
	}
	
	.page button {
		background-color: #167EFB;
		color: white;
	}
	
	.page h3, .page h1 {
		color: #252525;
	}
	
	.page h2 {
		color: #6B7A8A;
	}

	/* Blue page template below. */
	
	.page.blue {
		background-color: #167EFB;
		color: white;
		border-bottom: none;
	}
	
	.page.blue button {
		background-color: white;
		color: #167EFB;
	}
	
	.page.blue h3, .page.blue h1 {
		color: white;
	}
	
	.page.blue h2 {
		color: white;
	}
	
	/* Grid behaviour and styling below. */
	
	.container {
		background-color: none;
		padding: 0em 2em 0em 2em;
		margin: auto;
		max-width: 1000px;
	}
	
	.feature, .profile {
		text-align: center;
		flex: 1;
		padding: 16px;
	}
	
	.feature p, .profile p {
		color: #6B7A8A;
		min-width: 220px;
		margin: auto;
	}
	
	.feature h3, .profile h3 {
		font-size: 1.5em;
		padding-top: 8px
	}
	
	.profile img {
		border-radius: 1000px;
	}
	
	.feature.mini h3 {
		font-size: 1.25em;
	}
	
	.grid {
		background-color: none;
		padding: 0em 2em 0em 2em;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	.grid_column {
		background-color: red;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
	}