* {
	box-sizing: border-box;
}

@media (prefers-color-scheme: light) {
	body {
		background-color: white;
		color: black;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
	}

	/* Header/logo Title */
	header {
		text-align: center;
		background: #ddd;
		color: black;
		width: 100%;
	}

	a {
		color: black;
	}

	/* Style the top navigation bar */
	nav {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		background-color: #eee;
		width: 100%;
	}

	/* Style the navigation bar links */
	nav a {
		color: black;
		padding: 10px;
		text-decoration: none;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	/* Change color on hover */
	nav a:hover {
		background-color: #ddd;
		color: black;
		box-shadow: 20px 20px 20px #eee, -20px -20px 20px #fff;
	}

	nav a:active {
		background-color: #ccc;
		color: #222;
	}

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

	/* Main column */
	main {
		flex: 70%;
		background-color: white;
		padding: 20px;
	}

	/* Footer */
	footer {
		padding: 10px;
		text-align: center;
		background: #ddd;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: black;
		color: #ddd;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
	}

	/* Header/logo Title */
	header {
		text-align: center;
		background: #111;
		color: #ddd;
		width: 100%;
	}

	a {
		color: #ddd;
	}


	/* Style the top navigation bar */
	nav {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		background-color: #222;
		width: 100%;
	}

	/* Style the navigation bar links */
	nav a {
		color: #ddd;
		padding: 14px 20px;
		text-decoration: none;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	/* Change color on hover */
	nav a:hover {
		box-shadow: 20px 20px 20px #070707, -20px -20px 20px #1b1b1b;
	}

	nav a:active {
		background-color: #ccc;
		color: #222;
	}

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

	/* Main column */
	main {
		flex: 70%;
		background-color: #000;
		padding: 20px;
	}

	/* Footer */
	footer {
		text-align: center;
		background: #111;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}
}

@media screen and (max-width: 700px) {

	.row,
	nav {
		flex-direction: column;
	}
}