/* 

Header
------------------------------------------------------------ */


	.header {
		background-color: var(--white);
		padding: 32px 32px 0 32px;
		transition: .5s;
		position: relative;
		z-index: 2;
	}
		@media (prefers-color-scheme: dark) {
			.header {
				background-color: var(--baltic-sea);
			}
		}
		
		@media screen and (min-width: 768px) {
			.header {
				padding: 64px 64px 0 64px;
			}
		}
		
		@media screen and (min-width: 1024px) {
			.header {
				padding: 64px 32px 0 32px;
			}
		}


	.menu-toggle-wrap #menu-toggle-checkbox:checked ~ .header {
		background-color: var(--alabaster);
		transition: .5s;
	}
		
		@media (prefers-color-scheme: dark) {
			.menu-toggle-wrap #menu-toggle-checkbox:checked ~ .header {
				background-color: var(--charade);
			}
		}
		
		@media screen and (min-width: 1024px) {
			.header {
				background-color: var(--alabaster);
				transition: .5s;
			}
				
				@media (prefers-color-scheme: dark) {
					.header {
						background-color: var(--charade);
					}
				}
		}
	

	.logo_container {
		float: left;
		width: 50%;
		height: 48px;
		margin-bottom: 32px;
	}
	
		@media screen and (min-width: 768px) {
			.logo_container {
				margin-bottom: 32px;
			}
		}
		
		@media screen and (min-width: 1024px) {
			.logo_container {
				margin-bottom: 32px;
			}
		}
	
	.logo {
		content: ' ';
		background-color: var(--baltic-sea);
		background-size: 48px 48px;
		display: inline-block;
		height: 48px;
		width: 48px;
		line-height: var(--line-none);
		opacity: 1;
		mask-image: url('../images/logo.svg');
		-webkit-mask-image: url('../images/logo.svg');
		transition: .5s;
		/* transform: scale(1.25); */
	}
	
		@media (prefers-color-scheme: dark) {
			.logo {
				background-color: var(--white);
			}
		}
	
	.logo:hover {
		transform: scale(1.125);
	}



	
	.menu-toggle-bread {
		right: 32px;
		top: 40px;
	}

		@media screen and (min-width: 768px) {
			.menu-toggle-bread {
				right: 64px;
				top: 72px;
			}
		}
		
		@media screen and (min-width: 1024px) {
			.menu-toggle-bread {
				display: none;
			}
		}
	
/* 
	
	Menu
	------------------------------------------------------------ */

	.start-btn {
		float: right;
		margin-top: 12px;
		margin-right: 48px;
		opacity: 1;
		visibility: visible;
		display: inline;
		transition: .25s visibility, .25s opacity;
	}
		
		@media screen and (min-width: 1024px) {
			.start-btn {
				display: none;
			}
		}
	
	.start-btn a:link, .start-btn a:visited {
		background-color: var(--alabaster);
		color: var(--ship-grey);
		cursor: pointer;
		font-size: 1em;
		font-weight: 400;
		padding: 12px 16px 12px 16px;
		text-decoration: none;
		transition: .25s margin, .25s padding;
		border-radius: 8px / 8px;
		-webkit-border-radius: 8px 8px;
		-moz-border-radius: 8px / 8px;
	}
		
		@media (prefers-color-scheme: dark) {
		.start-btn a:link, .start-btn a:visited {
			background-color: var(--charade);
			color: var(--mercury);
		}
	}
	
	.start-btn a:hover {
		background-color: var(--iron);
		color: var(--ship-grey);
		margin-top: -2px;
		margin-bottom: -2px;
		padding: 14px 18px;
	}
		
		@media (prefers-color-scheme: dark) {
			.start-btn a:hover {
				background-color: var(--abbey);
				color: var(--mercury);
			}
		}
	
	.menu-toggle-wrap #menu-toggle-checkbox:checked ~ .header .start-btn {
		opacity: 0;
		visibility: hidden;
		/* display: none; */
	}
	
	.menu {
		margin: 0 auto 0 auto;
		padding: 0;
		width: 100%;
	}
	
	.menu_container {
		margin: 0;
		padding: 0;
		width: 100%;
		position: absolute;
		top: 0;
	}
		
		@media screen and (min-width: 1024px) {
			.menu_container {
				float: left;
				width: 320px;
				position: fixed;
			}
		}
	
	.menu_content {
		margin: 0;
		height: 0;
		min-height: 0; 
		max-height: 0;
		clear: both;
		overflow: hidden;
		opacity: 0;
		transition: .5s;
		position: relative;
	}
		
		@media screen and (min-width: 1024px) {
			.menu_content {
				height: 100vh;
				min-height: 100vh; 
				max-height: 100vh;
				overflow: visible;
				opacity: 1;		
			}
		}
	
	.menu-toggle-wrap #menu-toggle-checkbox:checked ~ .header .menu_content {
		margin: 0;
		padding: 0;
		height: 100vh;
		min-height: 100vh; 
		max-height: 100vh;
		overflow: visible;
		opacity: 1;		
	}
	
	.menu-toggle-wrap #menu-toggle-checkbox:checked ~ .header .logo_container .logo {
		background: var(--mountain-mist);
	}
		
		@media (prefers-color-scheme: dark) {
			.menu-toggle-wrap #menu-toggle-checkbox:checked ~ .header .logo_container .logo {
				background: var(--mountain-fog);
			}
		}
	
	.menu-toggle-wrap #menu-toggle-checkbox:checked ~ .menu-toggle-label .menu-toggle-bread-top .menu-toggle-bread-crust, .menu-toggle-wrap #menu-toggle-checkbox:checked ~ .menu-toggle-label .menu-toggle-bread-bottom .menu-toggle-bread-crust {
				background: var(--mountain-mist);
			}
			
		@media (prefers-color-scheme: dark) {
			.menu-toggle-wrap #menu-toggle-checkbox:checked ~ .menu-toggle-label .menu-toggle-bread-top .menu-toggle-bread-crust, .menu-toggle-wrap #menu-toggle-checkbox:checked ~ .menu-toggle-label .menu-toggle-bread-bottom .menu-toggle-bread-crust {
				background: var(--mountain-fog);
			}
		}
	
	#updates {
		padding-bottom: 32px;
	}