#assignment {
	>main {
		background-image:
			linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
			url("/static/images/laptop-bg.jpg");
		background-size: cover;
		background-position: center;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		>div {
			font-family: Arial, Helvetica, sans-serif;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 2rem;

			>* {
				color: #fff;
			}

			>h1,
			>p {
				margin: 0;
				font-weight: 100;
			}

			>h1 {
				font-size: 6rem;
			}

			>p {
				font-size: 2.5rem;
			}

			>button {
				background-color: transparent;
				border: 1px solid #fff;
				border-radius: .4rem;
				padding: 1rem 2rem;
				font-size: 1.7rem;
				cursor: pointer;
				--transition-speed: 200ms;
				transition:
					background-color var(--transition-speed),
					color var(--transition-speed);

				&:hover {
					background-color: #fff;
					color: #000;
				}

				&:active {
					filter: brightness(0.7);
				}
			}
		}
	}
}