@font-face {
	font-family: "Brush Script MT";
	font-style: normal;
	font-weight: 400;
	src: local("Brush Script MT"),
		url(https://db.onlinewebfonts.com/t/33bc06ea126d3ff79886277122f1f510.woff2)
			format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+FEFF;
}

html, body { overflow-x: hidden; }

main {
	position: relative;
	display: flex;
	align-content: center;
	justify-content: center;
	overflow: hidden;
	min-height: 75vh;
	margin: 0;
}

section {
	position: relative;
	width: 100%;
	max-width: 1152px; /* Magic numbers are bad practice, sorry */
	margin-bottom: 32%;

	p {
		transition: opacity 1s ease;
	}

	img {
		position: absolute;
		user-select: none;
		transition: opacity 1s ease;

		&#background-splotch {
			left: -13%;
			top: 6%;
		}

		&#background-fishes {
			left: 29%;
			top: 36.5%;
		}
		&.background-photo-frame {
			position: relative;
			box-shadow: 8px 8px 10px;
		}

		&#background-bike {
			left: 2.5%;
			top: 2%;
		}

		&#background-boat {
			left: 4%;
			top: 3%;
		}

		&#background-interior {
			left: 2.5%;
			top: 1.5%;
		}

		&#background-illustration-house {
			left: 96%;
			top: 6%;
			transform: rotate(-5deg);
		}

		&#background-box-arrow {
			left: 57%;
			top: 71%;
		}

		&#background-plant {
			left: 88%;
			top: 45%;
		}
	}

	#title {
		position: absolute;
		width: fit-content;
		user-select: none;
		color: #584e18;
		margin-left: 25%;
		margin-top: 60px;
		padding-top:20px;

		#title-part-0 {
			position: absolute;
			top: 2%;
			/*font-family: "Noteworthy";*/
			font-size: 46.35pt;
			margin-left: 10%;
			margin-top:-18%;
		}

		#title-part-1 {
			font-family: "Avenir Next Ultralight";
			font-size: 100pt;
			margin-left: 6%;
			margin-top: 20%;
		}

		#title-part-2 {
			position: absolute;
			top: 65%;
			font-family: "Avenir Next Bold";
			font-size: 57.35pt;
			margin-left: 55%;
		}

		#title-part-3 {
			margin-left: 94%;
			margin-top: -4%;
		}
	}

	.quote {
		&#quote-flipped-left,
		&#quote-flipped-right {
			opacity: 0;
			user-select: none;
			z-index: 1;
		}

		&#quote-flipped-left {
			width: 150pt;
			left: 5%;
			top: 2%;
		}

		&#quote-flipped-right {
			width: 130pt;
			left: 8%;
			top: 3%;
		}

		&#quote-middle {
			margin-left: 14%;
			margin-top: 60%;
		}

		span {
			font-family: Arial;
			font-style: normal;
			color: #84a86e;
		}
	}

	.background-element {
		position: absolute;
		width: calc(100% - 120pt);
		height: 100%;
		margin-left: -2%;

		#photo1 {
			position: absolute;
			left: 5.5%;
			top: 10%;
			display: flex;
			transform: rotate(-2deg);
			z-index: 1;

			*:not(.background-photo-frame, br, span) {
				position: absolute;
			}

			.background-tape {
				transform: scale(0.2) rotate(-28deg);
				left: -100%;
				top: -73%;
				z-index: 1;
			}

			img#background-splotch {
				left: -118%;
				top: -48%;
				transform: rotate(6deg);
			}

			&:hover {
				.background-tape {
					animation: animateTape1 1s;
					animation-fill-mode: forwards;
				}

				.background-photo-frame {
					animation: animateScale 1s;
					animation-fill-mode: forwards;
				}

				#quote-flipped-left {
					user-select: initial;
					opacity: 1;
					animation: animateScale 1s;
					animation-fill-mode: forwards;
				}

				#background-interior {
					opacity: 0;
					animation: animateScale 1s;
					animation-fill-mode: forwards;
				}
			}
		}

		#photo2 {
			position: absolute;
			left: 77%;
			top: 5%;
			display: flex;
			transform: rotate(2deg);
			z-index: 1;

			*:not(.background-photo-frame, br, span) {
				position: absolute;
			}

			.background-tape {
				transform: scale(0.2) rotate(-20deg);
				left: -127%;
				top: -114%;
				z-index: 1;
			}

			&:hover {
				.background-tape {
					animation: animateTape2 1s;
					animation-fill-mode: forwards;
				}

				.background-photo-frame {
					animation: animateScale 1s;
					animation-fill-mode: forwards;
				}

				#quote-flipped-right {
					user-select: initial;
					opacity: 1;
					animation: animateScale 1s;
					animation-fill-mode: forwards;
				}

				#background-boat {
					opacity: 0;
					animation: animateScale 1s;
					animation-fill-mode: forwards;
				}
			}
		}
	}
}

/*img#street-cutout {
	position: absolute;
	left: -1%;
	top: 69%;
	z-index: -1;
	transform: scale(1.35);
}

#street-cutout {
	width: 130%;
	height: auto;
	display: block;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
	margin-top: 0;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom:-10%;
	z-index: -5;
}*/

#street-cutout {
  display: block;
  width: 120vw;          /* larger than the viewport so it overflows */
  max-width: none;       /* allow exceeding container */
  height: auto;
  /* center a 120vw image in the viewport so both sides crop evenly;
     tweak 120->110/130 and 60->55/65 to taste */
  /*margin-left: calc(50% - 60vw);*/
  	margin-bottom:-10%;
  	margin-left:-10% !important;
}

#street-cutout {
  display: block;
  width: 120vw;
  max-width: none;
  height: auto;
  margin-left: 0;          /* anchor to the left */
}


.btn-primary {
	margin: 0 0 34px 50px;

	&#home-page-btn {
		position: absolute;
		white-space: nowrap;
		top: 92%;
		left: 75%;
	}
}

@keyframes animateScale {
	50% {
		transform: scale(1.1);
	}
	to {
		transform: scale(1);
	}
}

@keyframes animateTape1 {
	50% {
		top: -80%;
		transform: scale(0.25) rotate(-28deg);
		animation-play-state: paused;
	}
	to {
		transform: scale(0.2) rotate(-28deg);
	}
}

@keyframes animateTape2 {
	50% {
		top: -120%;
		transform: scale(0.25) rotate(-20deg);
		animation-play-state: paused;
	}
	to {
		transform: scale(0.2) rotate(-20deg);
	}
}

/* For mobile phones: */
@media screen and (max-width: 426px) {
	#title-part-0 {
		font-size: 21pt;
		left: -16%;
		top: 3%;
	}

	#title-part-1 {
		font-size: 51pt;
		left: -16%;
		top: 13%;
	}

	#title-part-2 {
		font-size: 30pt;
		left: 10%;
		top: 23%;
	}

	#title-part-3 {
		font-size: 63pt;
		left: 49%;
		top: 28%;
	}

	section img.background-splotch {
		width: 100%;
		top: 17%;
		left: -44%;
	}

	section img#home-photo {
		width: 50%;
		top: 36%;
	}

	#home-page-btn {
		left: 26%;
		top: 89%;
	}

	section img#box-arrow {
		left: -10%;
		top: 60%;
		width: 80%;
	}

	section img#illustration-house {
		left: 10%;
		top: 44%;
		width: 15%;
	}

	section img#plant {
		left: 62%;
		top: 56%;
		width: 61%;
	}

	#quote {
		width: 158pt;
		left: -13%;
		top: 50%;
	}

	#title-part-3 > *:not(:nth-child(1)):nth-child(odd) {
		top: -4px;
	}

	#title-part-3 > *:nth-child(even) {
		left: -5%;
	}
}

@media screen and (max-width: 1024px) {
	section {
		margin-top: -2%;
	}

	img#street-cutout {
		left: -18%;
		/*transform: scale(1);*/
	}

	section .background-element {
		transform: scale(0.9);
		width: 90%;
		left: 2%;
	}

	section #title {
		transform: scale(0.8);
		margin-left: 22%;
	}

	section {
		.quote {
			&#quote-middle {
				margin-left: 7%;
				margin-top: 72%;
			}
		}
	}
}

@media screen and (max-width: 768px) {
	img#street-cutout {
		left: -43%;
		transform: scale(0.9);
		top: 63%;
	}

	section .background-element {
		transform: scale(0.7);
		width: 120%;
		left: -11%;
		height: 140%;
		top: -14%;
	}
	section #title {
		transform: scale(0.6);
		margin-left: 13%;
		margin-top: 9%;
	}
	section{ 
		.background-element { 
			#photo2 {
				position: absolute;
				left: 67%;
				top: 0%;
				display: flex;
				transform: rotate(2deg);
				z-index: 1;
			}
		}
	}
	section {
    & img {
        &#background-fishes {
            left: 36%;
            top: 29.5%;
        }
    }
}
	section {
		.quote {
			&#quote-middle {
				margin-top: 80%;
			}
		}
	}
}

@media screen and (max-width: 480px) {
	section .background-element {
		transform: scale(0.4);
	}

	section #title {
		transform: scale(0.4);
		margin-left: -48%;
		margin-top: -12%;
	}

	section #title #title-part-3 {
		margin-left: 51%;
		margin-top: 59%;
	}

	section .background-element #photo2 {
		left: 82%;
		top: -41%;
		transform: rotate(8deg);
	}

	section .background-element #photo1 {
		left: -29.5%;
		top: 115%;
		transform: rotate(-6deg);
	}

	section img {
		&#background-splotch {
			left: -29%;
			top: 110%;
		}

		&#background-plant {
			left: 88%;
			top: 10%;
		}

		&#background-illustration-house {
			left: 81%;
			top: 16%;
		}

		&#background-box-arrow {
			left: -9%;
			top: 42%;
		}
		&#background-fishes {
			left: 89%;
			top: 116%;
		}
	}

	.btn-primary {
		&#home-page-btn {
			position: absolute;
			white-space: nowrap;
			top: 71%;
			left: 85%;
		}
	}

	section .quote {
		&#quote-middle {
			margin-top: 261%;
			margin-left: -20%;
		}
	}

	img#street-cutout {
		left: -163%;
		transform: scale(0.5);
		top: 63%;
	}

	main {
		max-width: 320px;
	}
}