header nav {
	display: flex;

	a img {
		width: 100%;
		height: auto;
	}

	ul {
		list-style-type: none;
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 5px;

		li {
			padding: 10px;

			a {
				text-decoration: none;
				color: black;

				&:hover, &:focus {
					color: green;
					outline: none;
				}
			}
		}
	}
}

.extra-links {
	position: relative;

	a + ul {
		position: absolute;
		padding: 0px;
		display: flex;
		flex-direction: column;
		width: 120%;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
		background-color: white;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.2s linear;

		li {
			border-bottom: 1px solid black;

			&:last-child {
				border-bottom: none;
			}
		}
	}

	&:hover ul, &:focus-within ul {
		visibility: visible;
		opacity: 1;
		z-index: 2;
	}
}


/* Tablet */
@media (max-width: 921px) {
	body {
		background-color: blue;
	}
}

/* Mobile */
@media (max-width: 600px) {
	body {
		background-color: red;
	}
}