@import url("reset.css");
@import url("header.css");
@import url("main.css");
@import url("opening.css");
@import url("slideshow.css");
@import url("footer.css");
@import url("animations.css");


/* Fonts */
@font-face {
	font-family: "Montserrat Regular";
	font-style: normal;
	font-weight: 400;
	src: url("../assets/fonts/Montserrat-Regular.ttf");
}
@font-face {
	font-family: "Montserrat Medium";
	font-style: normal;
	font-weight: 500;
	src: url("../assets/fonts/Montserrat-Medium.ttf");
}
@font-face {
	font-family: "Montserrat Bold";
	font-style: normal;
	font-weight: 600;
	src: url("../assets/fonts/Montserrat-Bold.ttf");
}
@font-face {
	font-family: "Rubik Distressed";
	font-style: normal;
	font-weight: 400;
	src: url("../assets/fonts/RubikDistressed-Regular.ttf");
}

body {
	--white: floralwhite;
	--orange: orange;
	--asphalt: #373d42;
	--side-padding: 100px;
	--border-1: 1px solid var(--orange);
	--border-12: 12px solid var(--orange);
	--border-24: 24px solid var(--orange);
	--logo-height: 240px;
}

span, b {
	font-family: "Montserrat Medium", sans-serif;
	color: var(--white);
}

.root {
	position: relative;
	height: 100vh;
	overflow-y: scroll;
	overflow-x: hidden;
}


/*--------------------------------------------------------------------------------------Hook */
.hook {
	position: fixed;
	bottom: 0;
	right: 50px;
	width: 90px;
	height: 100vh;
	transform: translateY(-100%);
	z-index: 99;
}

.hit-area {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 200px;
	cursor: pointer;
}

.hook img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
}


/*--------------------------------------------------------------------------------------Responsiveness */
@media (min-width: 320px) and (max-width: 1024px) {
	body {
		--side-padding: 10px;
		--logo-height: 90px;
	}
	.hook {
		right: 10px;
		width: 35px;
	}
	.hit-area {
		height: 80px;
	}
}

@media (min-width: 425px) and (max-width: 768px) {
	body {
		--logo-height: 140px;
	}
}

@media (min-width: 576px) and (max-width: 768px) {
	body {
		--side-padding: 20px;
	}
	.hook {
		width: 40px;
	}
	.hit-area {
		height: 90px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	body {
		--side-padding: 40px;
		--logo-height: 180px;
	}
	.hook {
		width: 50px;
	}
	.hit-area {
		height: 110px;
	}
}

@media (min-width: 1024px) and (max-width: 1200px) {
	body {
		--side-padding: 40px;
		--logo-height: 140px;
	}
	.hook {
		right: 20px;
		width: 60px;
	}
	.hit-area {
		height: 140px;
	}
}

@media (min-width: 1200px) and (max-width: 1400px) {
	body {
		--side-padding: 60px;
		--logo-height: 200px;
	}
	.hook {
		right: 20px;
		width: 70px;
	}
	.hit-area {
		height: 160px;
	}
}

@media (min-width: 1400px) and (max-width: 1500px) {
	.hook {
		right: 20px;
		width: 80px;
	}
	.hit-area {
		height: 180px;
	}
}

/*--------------------------------------------------------------------------------------Responsiveness landscape */
@media (min-width: 576px) and (max-width: 1023px) and (orientation: landscape) {
	body {
		--logo-height: 90px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
	body {
		--logo-height: 120px;
	}
}