@import "colors.less";
@import "fonts.less";
@import "vars.less";
@import "animations.less";

@import "starting_page.less";
@import "secondary_part.less";
@import "tertiary_part.less";
@import "footer.less";

@import "about.less";
@import "work.less";



html, body {
	background-color: @mainDarkC;
	margin: 0;
	padding: 0;
	max-width: 100%;
	height: 100%;
	overflow: hidden;
	font-size: 20px;
}

html.is-animating main {
	opacity: 0;
}

body {

	#contentWrapper {
		position: relative;
		height: 100%;
	}
	
	#scrollWrapper {
		overflow-x: hidden;
		overflow-y: scroll;
		position: relative;
		height: 100%;
		pointer-events: all;
	}
	main {
		&.home {
			pointer-events: none;
		}
		transition: 2s;
		opacity: 1;
		min-height: 100vh;
		min-height: calc(100 * var(--vh));

		.underConstruction {
			.absoluteCentering();
			color: @mainLightC;
			font-size: 40px;
			@media @screenMobile {
				font-size: 25px;
			}
		}

		// // hide wow animations in beginning
		// .wow {
		// 	visibility: hidden;
		// }

	}

	// footer { display: none; }

	font-family: Abel;
	background-color: @mainDarkC;
	// typography
	h1, h2, h3, h4, h5, h6 {
		margin: 0;
		padding: 0;
	}
	a {
		color: @yellow;
		text-decoration: none;
		pointer-events: all;
		transition: color 0.4s ease;
		@media @hover {
			&:hover {
				color: @red;
			}
		}
		&:focus-visible {
			outline: none;
		}
	}

	span {
		&.red { color: @red; }
		&.blue { color: @blue; }
		&.yellow { color: @yellow; }
		&.smallerText {
			@media @screenDesktop {
				font-size: 24px;
			}
			@media @screenWide {
				font-size: 36px;
			}
		}
		&.fat { font-weight: 600; }
		&.hideOnMobile {
			@media @screenMobile {
				display: none;
			}
		}
		&.showOnMobile {
			display: none;
			@media @screenMobile {
				display: inline;
			}
		}
	}

	.mainText {
		.absoluteCentering();
		color: @mainLightC;
		text-align: center;
		padding: 20px;
		@media @screenLaptop {
			max-width: 600px;
			font-size: 28px;
		}
		@media @screenDesktop {
			max-width: 570px;
			font-size: 36px;
		}
		@media @screenDesktopXL {
			max-width: 800px;
			font-size: 46px;
		}
		@media @screenWide {
			max-width: 1400px;
			font-size: 62px;
		}
		@media @screenPortrait {
			width: 75vw;
			max-width: 75vw;
			font-size: 35px;
			@media (min-width: 1024px) {
				font-size: 40px;
			}
		}
		@media @screenMobile {
			width: 98vw;
			max-width: 98vw;
			font-size: 22px;
			@media (min-width: 400px) {
				font-size: 26px;
			}
		}
		.smallerText a {
			white-space: nowrap;
		}
	}	
	
	.tertiary_part .mainText {
		@media @screenPortrait {
			width: 50vw;
			max-width: 50vw;
			font-size: 30px;
			@media (min-width: 1024px) {
				font-size: 35px;
			}
		}
		@media @screenMobile {
			width: 98vw;
			max-width: 98vw;
			font-size: 20px;
			@media (min-width: 400px) {
				font-size: 26px;
			}
		}
	}

	.container {
		.linkWrapper {
			.aboutLinkPath, .workLinkPath {
				fill: @yellow;
			}
			.secondaryVector4, .tertiaryVector4 {
				stroke: @yellow;
			}
			// class gets added when scrollmagic happens
			&.animating {
				.linkBoxAnim(2.5s, 0.4s, @yellow, @red, @blue);	
			}
			@media @hover {
				&.animating:hover {
					.aboutLinkPath, .workLinkPath {
						fill: @yellow !important;
					}
					.secondaryVector4, .tertiaryVector4 {
						stroke: @yellow !important;
					}
				}
			}
		}

		// grid padding
		> * {
			@media @screenLaptop {
				padding: 20px;
			}
			@media @screenDesktop {
				padding: 25px;
			}
			@media @screenDesktopXL {
				padding: 50px;
			}
			@media @screenPortrait {
				padding: 25px;
			}
			@media @screenMobile {
				padding: 15px;
			}
		}
	}
	
	.scrollIcon {
		opacity: 0;
		position: absolute;
		bottom: 0;
		left: 0;
		transform: scale(0.6);
		.scrollIconAnim();
		@media @screenMobile {
			bottom: 10px;
		}
	}
	&.scrolled {
		.scrollIcon {
			animation: hide 0.7s forwards;
		}
	}
	svg {
		height: auto;
	}
}