@import url("css/reset.css");
@import url("css/color.css");
@import url("css/typography.css");
@import url("css/chat.css");
@import url("css/eightball.css");
@import url("css/components.css");
@import url("css/utilities.css");
@import url("css/collapse.css");
@import url("css/fancybox.css");
/* @import url("css/kenburns.css"); */

:root {
	--max-width: 980px;
	--gradient-bg: radial-gradient(circle, var(--color-ontix-blue) 0%, rgba(10, 4, 103, 1) 100%);
}

::selection {
	background: var(--color-light-blue);
	color: var(--color-ontix-blue);
}

::-moz-selection {
	background: var(--color-light-blue);
	color: var(--color-ontix-blue);
}

body {
	--padding-bottom: 50rem;
}

body.collapse {
	--padding-bottom: 4rem;
}

body {
	background-color: var(--color-soft-black);
	position: relative;
	overflow-x: hidden;
	
	header {
		position: absolute;
		top: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-image: var(--gradient-bg);
		
		h1 {
			display: inline-flex;
			width: 360px;
			max-width: 60vw;
			margin-bottom: 4rem;
			height: 0;
			padding-top: 95px;
			aspect-ratio: 3.79;
			overflow: hidden;
			background-image: url('images/ontix-logo-reverse.svg');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}
	}

	main {
		position: fixed;
		bottom: 0;
		z-index: 10;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		transition: bottom var(--transition-timing) ease-in-out;
		
		.root {
			color: white;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 1rem;
			transition: all var(--transition-timing) ease-in-out;
			
			@media(min-width: 992px) {
				padding: 2.5rem 1rem 2rem 1rem;
			}
			
			.container {
				width: 100%;
				max-width: var(--max-width);
			}
		}
	}
	
	
	footer {
		width: 100%;
		max-width: var(--max-width);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		transition: all var(--transition-timing) ease-in-out;
		
		.tagline {
			width: 100%;
		}
		
		.collapse {
			display: none;
		}
		
		.logo {
			width: 100px; 
			display: none;
		}
		
		@media(min-width: 992px) {
			.tagline {
				display: block;
			}
			
			.collapse {
				display: none;
			}
			
			.logo {
				&.desktop {
					display: block;
				}
				
				&.mobile {
					display: none;
				}
			}
		}
	}
	
	#feature {
		padding: 4rem 1rem var(--padding-bottom) 1rem;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 500px;
	}
	
	&.customer-open {
		overflow: hidden;
	}
}