.header-container {
	position: sticky;
	top: 0;
	z-index: 10;

	header {
		display: flex;
		flex-direction: row;
		justify-content: center;
		color: white;
		background-color: #33691E;
		border-bottom: 1px solid rgba(255, 255, 255, .3);

		.container {
			width: 80vw;
			margin: 0;
		}

		h3 {
			margin-right: 1.5em;
		}

		[class^="icon-"]:not(.mode-changers *) {
			cursor: pointer;
			width: 32px;
			height: 32px;
			margin: 12px;
			user-select: none;
		}

		.icon-reload {
			float: right;
		}

		.mode-changers {
			margin-top: auto;
			margin-left: auto;
			height: max-content;

			a {
				border-bottom: 3px solid transparent;
				align-items: center;
				display: flex;
				padding: 0 1em;
				cursor: pointer;
				text-decoration: none;
				width: max-content;
		
			 	span {
					font-weight: bold;
					margin: 1em .4em;
				}
			}

			a.active {
				border-bottom: 3px solid white;
			}
		}
	}
}

@media (max-width: 650px) {
	header {
		padding-top: 10px;

		.mode-changers {
			margin: auto;
		}

		h3 {
			margin: 8px 0;
		}
	}
}

@media (max-width: 799px) {
	header {
		.icon-back {
			left: 10px;
		}
	}
}