.home {
	color: palette(gray, dark);

	&__container, &__subline, &__foot {
		margin: {
			right: auto;
			left: auto;
		}
		padding: {
			right: 1rem;
			left: 1rem;
		}
	}

	&__container {
		display: flex;
		justify-content: space-between;
		align-items: center;			
		max-width: 62rem;	

		&.nav {
			width: 62rem;
			padding: {
				top: .5rem;
				bottom: .5rem;
			}
		}

		&.main {
			margin-bottom: 1rem;

			@media screen and (max-width: $md) {
				flex-direction: column;
			}
		}
	}

	&__nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2rem;
		padding: {
			top: .5rem;
			bottom: 0rem;
		}
		border-bottom: {
			style: solid;
			width: 1px;
			color: palette(gray, light);
		}
      	transition: border-color $transition;

		&__logo {
			color: palette(orange);
			text-decoration: none;
			font: {
				family: $sans-serif;
				size: 1.5rem;
				weight: 700;
			}
      		transition: color $transition;
			outline: 0;

			@media screen and (max-width: $sm) {
				font-weight: 900;
				span {
					display: none;
				}
			}
		}

		&__button {
			color: palette(gray, dark);
			cursor: pointer;
			border: 0;
			background-color: transparent;
			font: {
				family: $sans-serif;
				size: 1rem;
				weight: 700;
			}
			padding: {
				bottom: 6px;
				right: 10px;
				left: 10px;
				top: 6px;
			}
			margin-left: 5px;
			outline: 0;
			text-decoration: none;
      		transition: color $transition;

			&.primary {
				margin-left: 15px;
				box-shadow: $box-shadow;
				color: palette(white);
				border: {
					style: solid;
					width: 1px;
					color: palette(orange, dark);
					radius: $border-radius;
				}
				background-color: palette(orange);
      			transition: background-color $transition, border-color $transition;

      			&:hover {
					border-color: palette(orange, x-dark);
				}
			}
		}
	}

	&__content {
		flex: 1;

		&.left {
			max-width: 25rem;
			padding-right: 1rem;

			@media screen and (max-width: $md) {
				min-width: 100%;
				padding-right: 0;
				margin-bottom: 1rem;
			}
		}

		&.right {
			max-width: 30rem;
			min-width: 30rem;
			@media screen and (max-width: $md) {
				max-width: 100%;
				min-width: 100%;
			}		
		}
	}

	.message {
		margin-bottom: 0;
	}

	&__headline {
		color: palette(black);
		margin: {
			top: 0;
			bottom: 2rem;
		}
		font-weight: 900;
      	transition: color $transition;
	}

	&__browser {
		box-shadow: $box-shadow-2;

		margin: {
			top: 1rem;
			bottom: 2rem;
		}

		border: {
			style: solid;
			width: 1px;
			color: palette(orange);
			radius: $border-radius;
		}
      	transition: border-color $transition;

		&__header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 2rem;
			border-bottom: {
				style: solid;
				width: 1px;
				color: palette(orange);
			}
      		transition: border-color $transition;
		}

		&__button-group {
			padding: {
				left: 10px;
			}
		}

		&__button {
			display: inline-block;
			width: .5rem;
			height: .5rem;
			border: {
				style: solid;
				width: 1px;
				color: palette(orange);
				radius: 50%;
			}
      		transition: border-color $transition;
		}

		&__name {
			color: palette(orange);
			padding-right: 10px;
      		font: {
      			family: $mono;
      			size: .9rem;
      		}
      		transition: color $transition;
		}

		&__body {
			img {
			    top: 0;
			    left: 0;
			    width: 100%;
				max-width: 100%;
    			height: auto;
    			border: 0;
			}
		}
	}

	&__subline {
		max-width: 45rem;
		line-height: 1.5;
		text-align: center;
		color: palette(black);
		font: {
			family: $sans-serif;
			size: 1.7rem;
		}
		margin-bottom: 2rem;
      	transition: color $transition;

		span {
			white-space: nowrap;
			background-color: palette(orange, light);
			font-weight: 700;
      		transition: background-color $transition;
		}

		@media screen and (max-width: $sm) {
			font-size: 1.5rem;
		}	
	}

	&__foot {
		padding: {
			top: 1rem;
			bottom: 1rem;
		}
		text-align: center;
		color: palette(gray, light);
		font: {
			family: $sans-serif;
			size: .85rem;
		}
		transition: color $transition;

		&:hover {
			color: palette(gray);
			a {
				color: palette(gray);
			}
		}

		a {
			color: palette(gray, light);
			transition: color $transition;

			&:hover {
				color: palette(orange);		
			}	
		}
	}
}

.dark .home {
	&__nav {
		border-bottom-color: palette(dark, light);

		&__logo {
			color: palette(blue);
		}

		&__button {
			color: palette(white);

			&.primary {
				background-color: palette(blue);
				border-color: palette(blue, dark);

				&:hover {
      				border-color: palette(blue, x-dark);
    			}
			}
		}
	}

	&__headline {
		color: palette(white);
	}

	&__browser {
		border-color: palette(blue);
		
		&__header {
			border-color: palette(blue);
		}

		&__button {
			border-color: palette(blue);
			color: palette(blue, dark);	
		}

		&__name {
			color: palette(blue);
		}
	}

	&__subline {
		color: palette(white);

		span {
			background-color: palette(blue, a-light);
		}
	}

	&__foot {
		color: palette(dark, light);

		a {
			color: palette(dark, light);

			&:hover {
				color: palette(blue);		
			}	
		}
	}
}
