html {
	scroll-padding-top: 4.5rem;
	--lightblue: cornflowerblue;
	--turqoise: paleturquoise;
	--light: #efefef;
	--gray: #6c757d;
	--dark: #212529;
	--black: #111;
}

/* layout */
aside, section { padding: 5rem 0; }

/* masthead */
.masthead {
	padding: 7rem 0 5rem 0;
	background-color: var(--white);
}
a.cta > i { transition: 150ms margin ease-in-out; margin-left: var(--indent); --indent: 0.5rem; }
a.cta:hover > i, a.cta:focus > i, a.cta:active > i { --indent: 1rem; }
.hero-showoff .circle {
	position: absolute;
	/* 200px -> 280px @ 768px -> 1200px */
	width: clamp(12.5rem, 3.611rem + 18.519vw, 17.5rem);
	fill: url(#circleGradient);
	top: -14%;
	left: 12%;
	filter: blur(1px);
}
.hero-showoff .circle-2 {
	fill: url(#circleGradient2);
	top: unset !important;
	left: unset !important;
	bottom: -22%;
	right: 16%;
	filter: blur(4px);
}
.hero-showoff .circle .gradient-start-color { stop-color: var(--bs-blue); }
.hero-showoff .circle .gradient-end-color { stop-color: var(--bs-purple); }
.hero-showoff .circle-2 .gradient-start-color { stop-color: var(--lightblue); }
.hero-showoff .circle-2 .gradient-end-color { stop-color: var(--turqoise); }
.hero-showoff .shape-1 {
	position: absolute;
	height: 1rem;
	width: 1rem;
	transform: rotate(-10deg);
	fill: var(--bs-blue);
	bottom: 15%;
	left: 10%;
}
.hero-showoff .shape-2 {
	position: absolute;
	height: 0.75rem;
	width: 0.75rem;
	fill: var(--lightblue);
	top: 15%;
	right: 10%;
}
.watch-wrapper { max-width: 15rem; }
.watch-wrapper > img {
	filter: drop-shadow(5px 5px 5px #222222cc);
	-webkit-filter: drop-shadow(5px 5px 5px #222222cc);
}

@media (min-width: 768px) {
	.hero-showoff .circle { top: -10%; left: 20%; }
	.hero-showoff .circle-2 { bottom: -10%; right: 20%; }
	.hero-showoff .shape-1 { left: 20%; }
	.hero-showoff .shape-2 { right: 18%; }
	.watch-wrapper { max-width: 16rem; }
}
@media (min-width: 992px) {
	.masthead { padding-top: 9.5rem; }
	.hero-showoff .circle { top: -14%; left: 2%; }
	.hero-showoff .circle-2 { bottom: -14%; right: 2%; }
	.hero-showoff .shape-1 { left: 10%; }
	.hero-showoff .shape-2 { right: 10%; }
	.watch-wrapper { max-width: 18rem; }
}
@media (min-width: 1200px) {
	.watch-wrapper { max-width: 20rem; }
}
@media (min-width: 1400px) {
	.hero-showoff .circle { top: -8%; left: 10%; }
	.hero-showoff .circle-2 { bottom: -3%; right: 10%; }
	.watch-wrapper { max-width: 24rem; }
}

/* testimonials */
#testimonials { padding: 5rem 0; }
.carousel-control-prev { justify-content: flex-start; }
.carousel-control-next { justify-content: flex-end; }
.pfp {
	border: 2px solid var(--dark);
	border-radius: 50%;
	max-height: 5rem;
}

/* typography */
footer a { color: var(--light); opacity: 0.5; text-decoration: none; }
footer a:hover, footer a:active, footer a:focus { opacity: 0.75; text-decoration: underline; }

/* nav */
.navbar-brand:hover, .navbar-brand:active { color: var(--bs-blue); }
.nav-item .nav-link { color: var(--dark); }
.nav-item .nav-link:hover { color: var(--gray); }
.nav-item .nav-link.active { color: var(--bs-blue); }
.navbar-toggler {
	font-size: 0.875rem;
	padding: 0.75rem 1rem;
	color: #212529;
}

/* util classes */
.bg-black { background-color: var(--black) !important; }
.bg-gradient { background: linear-gradient(45deg, var(--bs-blue), var(--bs-purple)) !important; }
.text-gradient {
	background: -webkit-linear-gradient(var(--grad-start), var(--grad-end));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

section.cta {
	padding: 10rem 0;
	background-image: url('../img/schedule-book.jpg');
	background-position: center;
	background-size: cover;
}
section.cta:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
}



/* animation */
@-webkit-keyframes rotating{from{-webkit-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{from{-ms-transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
.rotating{-webkit-animation:40s linear infinite rotating;-moz-animation:40s linear infinite rotating;-ms-animation:rotating 40s linear infinite;-o-animation:40s linear infinite rotating;animation:40s linear infinite rotating}