$IS_DARK_THEME: ":root[data-theme='dark']";

:root {
	--ifm-background-color: #D5E2FF;
}

#{$IS_DARK_THEME} {
	--ifm-background-color: #060F22;
}

:global(.homepage-main-wrapper) {
	// Note: cannot apply it on html and body elements because it breaks sidebar scrolling
	// and also:
	// https://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers
	max-width: 100vw;
	// We cannot just clip X axis because it also clips Y.
	overflow: hidden;

	// Move it up a bit to make clipping invisible
	// (make up for the navbar space at the top)
	padding-top: var(--ifm-navbar-height);
	margin-top: calc(-1 * var(--ifm-navbar-height));

	// background-color: #D5E2FF;
	--background-circle-color: #BBD2FF;
}

#{$IS_DARK_THEME}
:global(.homepage-main-wrapper) {
	// background-color: #060F22;
	--background-circle-color: #000714;
}

@keyframes bringHeroBannerIn {
	0% {
		transform: scale(0.9) translate(5px, 10px);
	}

	to {
		transform: scale(1.0);
	}
}

@media screen and (orientation: landscape) and (min-height: 720px) {
	:global(.site-hero-banner) {
		.textPart {
			animation: 0.6s ease-in-out 0s 1 bringHeroBannerIn;
		}
	}
}

:global(.site-hero-banner) {
	--strip-bgc: #E2ECFF;

	--title-color: #1B1B1B;
	--subtitle-color: #383838;
	--title-verb-color: #4156C7;

	--subtitle-text-shadow: none;

	--outlined-bgc: #1B1B1B;
	--outlined-color: #D9D9D9;
}

#{$IS_DARK_THEME}
:global(.site-hero-banner) {
	--strip-bgc: #000A1E;

	--title-color: white;
	--subtitle-color: white;
	--title-verb-color: #FFD362;

	--subtitle-text-shadow: 3px 3px 10px black;

	--outlined-color: black;
	--outlined-bgc: #D9D9D9;
}

:global(.site-hero-banner) {
	--width-fraction: 0.9;

	display: grid;
	grid-template-areas:
		"text"
		"supporters"
		"features"
		"links";

	grid-template-columns: 1fr;
	padding: 0;
	margin: 0 auto;
	max-width: calc(min(var(--width-fraction, 0.95) * 100vw, 1920px));
	

	.background-strip {
		grid-row: 2 / 3;
		grid-column: 1 / 3;

		z-index: -2;

		background-color: var(--strip-bgc);
		transform: scaleX(10);
	}

	.background-circle {
		display: none;
	}

	// >*{
	// 	border: 1px solid red;
	// }

	.main-part {
		grid-area: text;

		position: relative;
		// padding-right: 15%;
		display: flex;
		justify-content: center;

		>div {
			max-width: 750px;
			width: 100%;
		}
	}

	.supporters-part {
		grid-area: supporters;

		display: flex;
		justify-content: center;
	}

	.features-part {
		grid-area: features;
	}

	.links-part {
		grid-area: links;
		display: flex;
		justify-content: left;
		margin-top: 40px;
	}

	.title {
		margin-top: 40px;
		margin-bottom: 10px;
		font-size: 2.5rem;
		font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		// letter-spacing: 10px;
		font-weight: normal;
		color: var(--title-color);
		line-height: 120%;

		.title-verb {
			color: var(--title-verb-color);
		}

		.outlined {
			color: var(--outlined-color);
			background-color: var(--outlined-bgc);
			border-radius: 10px;
			padding: 0 10px;
		}

		// text-shadow: 3px 3px 30px rgba(21, 181, 196, 0.5);
	}

	.subtitle {
		margin-top: 20px;
		font-size: 1.2rem;
		text-shadow: var(--subtitle-text-shadow);
		color: var(--subtitle-color);
	}

	// .interactiveEditor {
	// 	// visibility: hidden;
	// 	text-align: left;
	// 	padding: 10px 20px;
	// 	// min-height: 600px;
	// 	background-color: rgba(white, 0.8);

	// 	>iframe {
	// 		width: 100%;	
	// 		height: 100%;	
	// 	}
	// 	:global(.prism-code) {
	// 		min-height: 400px;
	// 		max-height: 400px;
	// 		overflow: auto;
	// 		font-size: 0.9em;
	// 	}
	// 	border: 1px solid rgba(gray, 0.2);
	// 	border-radius: 5px;
	// 	// box-shadow: 2px 2px 2px 2px gray;
	// }
}


@media (min-width: 1550px) {

:global(.site-hero-banner) {
	grid-template-columns: 60% 38%;
	column-gap: 2%;

	.main-part, .supporters-part {
		padding-right: 15%;
		justify-content: right;
	}
}

}

@media (min-width: 450px)
{

:global(.site-hero-banner) {
	.title {
		font-size: 3.5rem;
	}
	.subtitle {
		font-size: 1.6rem;
	}
}

}

@media (min-width: 640px)
{

:global(.site-hero-banner) .title {
	font-size: 5rem;
}

}

@media (min-width: 1200px)
{

:global(.site-hero-banner) {
	--width-fraction: 0.98;
	grid-template-areas:
		"text features"
		"supporters links";
	grid-template-columns: 65% 35%;

	.main-part, .supporters-part {
		justify-content: center;
	}

	.features-part {
	}

	.links-part {
		justify-content: left;
		margin-top: 0;
	}
}

}


@media (min-width: 1700px) {

	// .heroBanner {
	// 	// width: 80%;
	// }

}

@media (min-width: 1450px) {

	:global(.site-hero-banner) {

		// The fancy background circle only looks good on larger screens
		.background-circle {
			display: block;

			position: relative;
			>div {
				z-index: -1;
				position: absolute;
				margin: 0 auto;
				top: 0;
				width: calc(0.75 * 1920px);
				aspect-ratio: 16 / 20;
				border-radius: 50%;
				transform: translate(-8%, -60%);
				background-color: var(--background-circle-color);
			}
		}
	}

}

@media (min-width: 1300px) and (max-width: 1700px) {

	// .heroBanner {
	// 	// width: 90%;
	// }

}

@media (max-width: 1300px) {

	// .heroBanner {
	// 	// width: 95%;
	// }

}

@media (min-width: 1250px) {

	:global(.site-hero-banner) {}

}

.btnGrad {
	background-image: linear-gradient(to right, #000428 0%, #004e92 51%, #000428 100%)
}

.btnGrad {
	margin: 10px;
	padding: 20px 45px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white !important;
	box-shadow: 0 0 20px aqua;
	border-radius: 50px;
	border: 0;
	display: block;
}

.btnGrad:hover {
	background-position: right center;
	/* change the direction of the change here */
	color: #fff;
	text-decoration: none;
}

html[data-theme="dark"] {

	:global(.site-hero-banner) {

		.textPart {}

		.interactiveEditor {
			background-color: rgba(black, 0.6);
		}
	}


}

/* Animation */


/*Shrinking for mobile*/
@media (max-width: 768px) {

	.content {
		height: 30vh;
	}

	h1 {
		font-size: 24px;
	}

}

:global(.homepage-section) {
	background-color: var(--section-bgc);
	color: var(--section-text-color);

	>header,
	>main {
		margin: 0 auto;
		max-width: calc(min(95vw, 1000px));
		// border: 1px solid red;
	}

	>header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		h2 {
			font-size: 2.5rem;
			width: 100%;
			margin-top: 60px;
			margin-bottom: 20px;
			text-align: center;
		}

		:global(.homepage-section-subtitle) {
			margin-top: 0;
			font-size: 1.5rem;
			width: 100%;
			text-align: center;

			color: var(--section-subtitle-color, unset);
		}
	}
}

:global(.homepage-browse-section) {
	--section-bgc: white;
	--section-text-color: black;
	--section-subtitle-color: rgb(30, 30, 30);

	&:nth-child(odd) {
		--section-bgc: rgb(240, 240, 240);
	}

	min-height: 600px;
	padding-bottom: 30px;
}


#{$IS_DARK_THEME}
:global(.homepage-browse-section) {
	--section-bgc: rgb(4, 4, 4);
	--section-text-color: white;
	--section-subtitle-color: rgb(203, 203, 203);

	&:nth-child(odd) {
		--section-bgc: rgb(14, 14, 14);
	}
}