@import url("https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Vidaloka&display=swap");

:root {
	--peach: #ffd699;
	--accent: #ed8e00;
}

::-webkit-scrollbar {
	width: 14px;
}

::-webkit-scrollbar-thumb {
	border: 3px solid transparent;
	background-clip: padding-box;
	border-radius: 9999px;
	background-color: var(--accent);
}

* {
	font-family: "Oxygen", sans-serif;
}

html,
body {
	padding: 0;
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Vidaloka", serif;
}

footer {
	padding: 5rem 10rem;
}
footer i {
	color: white;
}
footer .nav-link:hover,
footer .nav-link:hover i {
	color: var(--accent) !important;
}

.hero {
	background: url("./assets/hero.png") no-repeat;
	background-position: right top;
	background-color: var(--peach);
	background-size: contain;
	background-attachment: fixed;
}

.vr {
	height: 30px;
}

.nav-link.active {
	border-bottom: 3px solid var(--accent);
}

.heading1 {
	font-size: 80px;
}

.heading2 {
	font-size: 70px;
}

.heading3 {
	font-size: 45px;
}

.featured {
	height: 500px;
}

.text-yellow {
	color: var(--accent);
}

.carousel-item img {
	-o-object-fit: cover;
	object-fit: cover;
	height: 100%;
	width: 100%;
}

.overlay {
	background-color: rgba(0, 0, 0, 0.5);
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 0;
}

.btn-yellow {
	background-color: var(--accent);
	padding: 10px 40px;
	color: white;
	border: none;
}

.btn-underlined {
	padding: 3px 10px;
	border-bottom: 3px solid var(--accent);
	text-decoration: none;
	color: black;
}

.hex-number {
	width: -moz-max-content;
	width: max-content;
	position: relative;
}

.hex-number h2 {
	position: absolute;
	inset: 25%;
}

.clip-hex {
	-webkit-clip-path: polygon(9% 29%, 51% 0, 93% 27%, 93% 73%, 50% 99%, 9% 73%);
	clip-path: polygon(9% 29%, 51% 0, 93% 27%, 93% 73%, 50% 99%, 9% 73%);
}

.avatar {
	max-width: 10rem;
}

.carousel-control-prev,
.carousel-control-prev:hover,
.carousel-control-prev:focus {
	color: black;
}

.carousel-control-next,
.carousel-control-next:hover,
.carousel-control-next:focus {
	color: var(--accent);
}

.email-input {
	border: 1px solid black;
	padding: 1rem 8rem;
	border-radius: 0;
}

.card {
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.15);
	transition: all 150ms ease-in-out;
}

.card-scale-hover:hover {
	transform: scale(1.05);
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
}

.fade-in-750 {
	animation: 750ms fadeIn ease-in-out;
}

.fade-in-1s {
	animation: 1s fadeIn ease-in-out;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}