_sass/pages/_home.scss
@use 'sass:color';
@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;

body.landing{
	
	@include body-standard;

	.banner {
		position: relative;
		width: 100%;
	}
	
	.banner + header {
		position: sticky;
		top: 0;
		z-index: 900;
		& + main{
			margin-top: 0;
		}
		.headerline {
			position: unset;
			top: unset;
		}
	}
	
	main{
		margin-top: 70px;
	}
	h1{
		margin: 0;
	}
	h3{
		margin: 0;
	}
	section{
		position: relative;
		z-index: 10;
		padding: 105px 15px;
		div p:last-of-type{
			margin-bottom: 25px;
		}
	}
	section.blog + section.upcoming-events{
		//padding-top: 0;
	}
	section{
		.section-text{
			max-width: 750px;
			text-align: center;
			margin: 0 auto;
		}
		.section-image{
			display: block;
			max-width: 750px;
			margin: 0 auto;
			margin-top: 50px;
			img{
				display: block;
				height: auto;
				width: 100%;
			}
			.video-thumbnail {
				position: relative;
				cursor: pointer;
				border-radius: 15px;
				border: 1px solid var(--main-blogpost-border-color, #E6E6E6);
				overflow: hidden;
				transition: all .3s ease;
				
				&:hover {
					.play-button {
						transform: translate(-50%, -50%) scale(1.1);
					}
				}
				
				img {
					width: 100%;
					height: auto;
					display: block;
					transition: all .3s ease;
				}
				
				.play-button {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					transition: all .3s ease;
					pointer-events: none;
				}
				
				&.loading {
					.play-button {
						opacity: 0;
					}
					
					&::after {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 40px;
						height: 40px;
						border: 3px solid rgba(255, 255, 255, 0.3);
						border-top: 3px solid white;
						border-radius: 50%;
						animation: spin 1s linear infinite;
					}
				}
			}
			
			.video-container {
				position: relative;
				width: 100%;
				height: 0;
				padding-bottom: 56.25%; /* 16:9 aspect ratio */
				border-radius: 15px;
				overflow: hidden;
				
				iframe {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border: none;
				}
			}
			
		}
	}
	.wrap{
		max-width: $maxContentWidth;
		margin: 0 auto;
	}
	.flexwrap{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		-webkit-box-pack: justify;
			-ms-flex-pack: justify;
				justify-content: space-between;
	}
	.hidden{
		display: none;
	}
	.type{
		display: inline-block;
		border: 1px solid var(--main-marker-border-color, #EDDD0C);
		background: var(--main-marker-background-color, rgba(255, 244, 51, 0.60));
		border-radius: 10px;
		padding: 6px 15px 8px 15px;
		margin-left: -15px;
		margin-top: .15em;
		margin-bottom: .15em;
		white-space: nowrap;
		.typecursor{
			font-weight: 450;
			margin-left: .1em;
			-webkit-transform: translateY(-.025em);
				-ms-transform: translateY(-.025em);
					transform: translateY(-.025em);
			-webkit-animation: Typewriter-cursor 1s infinite;
			animation:Typewriter-cursor 1s infinite;
			margin-left:1px
		}
		@-webkit-keyframes Typewriter-cursor{
			0%{opacity:0}
			50%{opacity:1}
			100%{opacity:0}
		}
		@keyframes Typewriter-cursor{
			0%{opacity:0}
			50%{opacity:1}
			100%{opacity:0}
		}
	}
	.window{
		border-radius: 15px;
		border: 1px solid var(--main-codebox-border-color, #E6E6E6);
		background: var(--main-codebox-main-background-color, rgba(250, 250, 250, 0.60));
		-webkit-backdrop-filter: blur(5px);
				backdrop-filter: blur(5px);
		-webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.20) inset, 2px 2px 24px 0px var(--main-codebox-dropshadow, rgba(0, 0, 0, 0.05));
				box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.20) inset, 2px 2px 24px 0px var(--main-codebox-dropshadow, rgba(0, 0, 0, 0.05));
		.topbar {
			border-radius: 15px 15px 0px 0px;
			ul {
				position: relative;
				padding: 0;
				margin: 20px 20px 5px 20px;
				display: -webkit-inline-box;
				display: -ms-inline-flexbox;
				display: inline-flex; /* Ändere von flex zu inline-flex */
				border: 1px solid var(--main-codebox-border-color, #E6E6E6);
				list-style: none;
				-webkit-box-align: start;
					-ms-flex-align: start;
						align-items: flex-start; /* Beibehaltung der vertikalen Ausrichtung */
				border-radius: 100px; 
				padding: 5px;
				li {
					@include label-1;
					border-radius: 50px;
					padding: 12px 14px;
					color: var(--interactive-filter-unselected-text-color, #666);
					cursor: pointer;
					-webkit-transition: background 0.2s, color 0.2s;
					-o-transition: background 0.2s, color 0.2s;
					transition: background 0.2s, color 0.2s;
					white-space: nowrap;
					&:hover, &.active {
						color: var(--interactive-filter-selected-text-color, #1A1A1A);
					}
				}
			}
		
			.select-highlight {
				position: absolute;
				background: var(--interactive-filter-selected-background-color, #E6E6E6);
				height: calc(100% - 10px);
				top: 5px;
				left: 0;
				width: 0;
				-webkit-transition: all 0.3s ease;
				-o-transition: all 0.3s ease;
				transition: all 0.3s ease;
				z-index: -1;
				border-radius: 50px;
			}
		}
		.content{
			@include code-standard;
			padding: 20px 20px;
			position: relative;
			.lines{
				@include code-standard;
				line-height: 17px;
				position: absolute;
				top: 20px;
				left: 25px;
				text-align: right;
				color: var(--main-text-tertiary-color, #B2B2B2);
				pointer-events: none;
			}
			code{
				@include code-standard;
				line-height: 17px;
			}
			a{
				color: inherit;
				-webkit-transition: color .3s;
				-o-transition: color .3s;
				transition: color .3s;
			}
			a:hover{
				color: $purple;
				background: none!important;
			}
			pre{
				margin: 0;
			}
			&.haslines{
				padding-left: 60px;
			}
		}
		.bottombar{
			padding: 15px 20px;
			border-top: 1px solid var(--main-codebox-border-color, #E6E6E6);
			.system span{
				color: var(--main-text-tertiary-color, #B2B2B2);
				@include body-small;
			}
			p{
				margin: 0;
			}
		}
	}
	.accordion{
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
			-ms-flex-pack: justify;
				justify-content: space-between;
		>div{
			width: calc(50% - 10px);
		}
		.head{
			padding: 20px;
			position: relative;
			width: 100%;
			cursor: pointer;
			&::after{
				background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23EFEFEF'/%3E%3Cpath d='M23.8045 12.6287L15.1758 21.2574L6.54706 12.6287' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
				content: "";
				width: 30px;
				height: 30px;
				background-size: contain;
				position: absolute;
				display: block;
				right: 20px;
				top: 13px;
				-webkit-transition: all .25s;
				-o-transition: all .25s;
				transition: all .25s;
			}
			h4{
				max-width: calc(100% - 50px);
			}
		}
		.content{
			padding: 20px;
			padding-top: 0;
			display: none;
			p{
				@include body-standard();
			}
			p:first-child{
				margin-top: 0;
			}
			p:last-of-type{
				margin-bottom: 0;
			}
		}
		.foldout{
			background: #F9F9F9;
			border-radius: 15px;
			position: relative;
			-webkit-transition: all .25s;
			-o-transition: all .25s;
			transition: all .25s;
			cursor: pointer;
			margin-bottom: 10px;
			&:hover{
				background: #F3F1FF;
				.head::after{
					background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23DDD8FF'/%3E%3Cpath d='M23.8045 12.6287L15.1758 21.2574L6.54706 12.6287' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
				}
			}
		}
		.foldout.active .head::after{
			-webkit-transform: rotate(180deg);
				-ms-transform: rotate(180deg);
					transform: rotate(180deg);
		}
	}
	
	.upcoming-events{
		&:after{
			content: ""; 
			display: block;
			position: absolute;
			top: -0px;
			left: 0;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='426' fill='none' viewBox='0 0 1440 426'%3E%3Cpath stroke='url(%23a)' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1439.5 424.029H696.735c-27.614 0-50-22.386-50-50V51.875c0-27.614-22.386-50-50-50H-.5'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='166.001' x2='1397.35' y1='680.043' y2='345.949' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FAFAFA'/%3E%3Cstop offset='.58' stop-color='%23CCC'/%3E%3Cstop offset='1' stop-color='%23FAFAFA'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
			background-size: contain;
			background-repeat: no-repeat;
			width: 100%;
			aspect-ratio: 1400 / 422;
			height: auto;
			z-index: 1;
		}
		.wrap{
			position: relative;
			z-index: 2;
		}
	}
	
	/** STYLE SELECT BOX ANYWAYS – SO IT IS COLORED DIRECTLY **/
	select {
	 @include label-1();
	  -webkit-appearance: none;
		 -moz-appearance: none;
			  appearance: none;
	  background-color: transparent;
	  border: none;
	  padding: 0 2em 0 0;
	  margin: 0;
	  width: 100%;
	  font-family: inherit;
	  font-size: inherit;
	  cursor: inherit;
	  line-height: inherit;
	  z-index: 1;
	  outline: none;

	  display: -ms-grid;
	  display: grid;
		  grid-template-areas: "select";
	  -webkit-box-align: center;
		 -ms-flex-align: center;
			align-items: center;
	  position: relative;
	  
	  min-width: 15ch;
	  max-width: 30ch;
	
	  border: 1px solid $duckDByellow;
	  border-radius: 100px;
	  padding: 10px 14px;
	
	  cursor: pointer;
	  line-height: 1.1;
	  color: black;
	
	  background-color: $duckDByellow;
	  -webkit-transition: background-color .3s;
	  -o-transition: background-color .3s;
	  transition: background-color .3s;

	  &::-ms-expand {
		display: none;
	  }

	  select,
	  &::after {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		grid-area: select;
	  }

	  &:hover{
		  background-color: color.scale($duckDByellow, $lightness: -5%);
	  }
	  // Custom arrow
	  &:not(.select--multiple)::after {
		content: "";
		-ms-grid-column-align: end;
			justify-self: end;
		width: 20px;
		height: 20px;
		position: absolute;
		background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9.25' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M4.60938 8.18164L10.0637 13.636L15.5181 8.18164' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E%0A");
	  }
	}
	
	
	/** NEW CUSTOM SELECT BOX WITH JS**/
	$select-background: #c1b73d;
	$select-width: 240px;
	$select-height: 38px;
	
	.select-hidden {
		display: none;
		visibility: hidden;
		padding-right: 10px;
	}
	
	.select {
		cursor: pointer;
		display: inline-block;
		position: relative;
		color: black;
		min-width: $select-width;
		@include label-1();
	}
	
	.select-styled {
		position: relative;
		display: inline-block;
		color: var(--interactive-button-black-border-color, #999);
		background: var(--menu-dropdown-background-color, #F2F2F2);
		border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
		padding: 12px 45px 12px 20px;
		-webkit-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
		border-radius: 20px;
		z-index: 710;
		word-break: keep-all;
		> span{
			@include label-1();
			color: inherit;
			line-height: 1;
		}
		&:after {
			content: "";
			width: 20px;
			height: 20px;
			position: absolute;
			background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9.25' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M4.60938 8.18164L10.0637 13.636L15.5181 8.18164' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E%0A");
			right: 10px;
			top: 9px;
			-webkit-transition: all .3s;
			-o-transition: all .3s;
			transition: all .3s;
		}
		&:hover {
			//background-color: $select-background;
		}
		&:active,
		&.active {
			&:after {
				-webkit-transform: rotate(180deg);
					-ms-transform: rotate(180deg);
						transform: rotate(180deg);
			}
		}
	}
	
	.select-options {
		display: none;
		position: absolute;
		top: calc(100% + 4px);
		z-index: 700;
		margin: 0;
		list-style: none;
		background: var(--menu-dropdown-background-color, #F2F2F2);
		border: 1px solid var(--menu-dropdown-border-color);
		border-radius: 20px;
		padding: 8px;
		-webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));
				filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));
		li {
			word-break: keep-all;
			margin: 2px 0;
			padding: 8px 12px;
			font-weight: 450;
			-webkit-transition: all 0.15s ease-in;
			-o-transition: all 0.15s ease-in;
			transition: all 0.15s ease-in;
			color: var(--main-text-primary-color, #F2F2F2);
			&:hover,
			&.is-selected {
				background: var(--menu-dropdown-item-background-hover, #E6E6E6);
				border-radius: 50px;
			}
			&.is-selected {
				font-weight: 500;
			}
			&[rel="hide"] {
				display: none;
			}
		}
	}
	
	
	/** WELCOME SECTION **/
	section.welcome{
		z-index: 11;
		.flexwrap{
			-webkit-box-align: start;
				-ms-flex-align: start;
					align-items: flex-start;
			.duckdb{
				width: calc(45%);
				text-align: left;
				p{
					margin: 25px 0;	
				}
			}
			.window{
				width: 550px;
				button.copy{
					display: none;
				}
			}
			pre,
			.highlight{
				background: transparent;
				padding: 0px;
				border: none;
			}
			.button.livedemo{
				border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
				-webkit-backdrop-filter: blur(5px);
						backdrop-filter: blur(5px);
				color: var(--interactive-button-black-border-color, #999);
				font-weight: 600;
			}
		}
	}
	/** FEATURES SECTION **/
	section.whyduckdb{
		h1{
			max-width: 600px;
		}
		.flexwrap{
			margin-top: 70px;
			row-gap: 20px;
			.featurebox{
				width: calc(33% - 10px);
				padding: 30px 20px;
				-ms-flex-negative: 0;
					flex-shrink: 0;
				border-radius: 15px;
				border: 1px solid var(--main-infobox-border-color, rgba(212, 204, 255, 0.60));
				background: var(--main-infobox-background-color, rgba(246, 245, 255, 0.60));
				-webkit-backdrop-filter: blur(7px);
						backdrop-filter: blur(7px);
				.icon{
					margin-bottom: 25px;
					width: 45px;
					height: 45px;
					background-size: contain;
					&.simple{
						background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.9998 43.8851C34.5343 43.8851 43.8849 34.5345 43.8849 23C43.8849 11.4655 34.5343 2.11499 22.9998 2.11499C11.4653 2.11499 2.11475 11.4655 2.11475 23C2.11475 34.5345 11.4653 43.8851 22.9998 43.8851Z' stroke='%237D66FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.8042 24.9262L20.0386 30.138L32.2525 17.9771' stroke='%237D66FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
					}
					&.featurerich{
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m25.38 26.437 7.137 7.138M31.989 12.69l-6.08 6.08M17.448 22.603h-4.23'/%3E%3Ccircle cx='22.207' cy='22.207' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3Ccircle cx='35.954' cy='37.011' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3Ccircle cx='35.954' cy='8.988' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3Ccircle cx='8.46' cy='22.207' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3C/svg%3E");
					}
					&.speed{
						background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M43.885 23c0 11.535-9.35 20.885-20.885 20.885-11.535 0-20.885-9.35-20.885-20.885 0-11.534 9.35-20.885 20.885-20.885 11.534 0 20.885 9.35 20.885 20.885Z' clip-rule='evenodd'/%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M25.866 23a2.867 2.867 0 1 1-5.733 0 2.867 2.867 0 0 1 5.733 0Z' clip-rule='evenodd'/%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m25.047 25.457 8.19 8.19'/%3E%3C/svg%3E");
					}
					&.free{
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M25.435 30.358c2.912-1.067 4.433-3.12 4.433-6.655s-3.021-6.65-6.796-6.656c-3.983-.006-6.988 3.108-6.94 6.656.048 3.547 1.764 5.908 4.51 6.761l-4.865 11.802C9.266 40.604 2.644 33.029 2.644 23.703 2.644 12.656 11.645 3.7 22.928 3.7c11.282 0 20.428 8.955 20.428 20.002 0 9.471-6.56 16.94-13.21 18.596l-4.71-11.941Z'/%3E%3C/svg%3E");
					}
					&.portable{
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M27.929 8.46c1.145 0 2.077 1.173 2.077 2.616v2.577h-14.54v-2.577c0-1.442.93-2.616 2.076-2.616H27.93Z'/%3E%3Crect width='37.389' height='23.887' x='4.041' y='13.653' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' rx='5'/%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M34.371 14.903V36.29M11.1 36.29V14.903'/%3E%3C/svg%3E");
					}
					&.extensible{
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-width='2.5' d='M29.085 35.656a5.109 5.109 0 0 1-1.71-1.58 4.99 4.99 0 0 1-.579-4.462 5.052 5.052 0 0 1 1.252-1.952 5.153 5.153 0 0 1 2.003-1.202 5.213 5.213 0 0 1 4.519.644 5.09 5.09 0 0 1 1.575 1.712c.096.17.233.315.397.423a1.261 1.261 0 0 0 1.616-.195l3.912-3.854c.925-.912.925-1.733.416-2.28l-6.133-6.043a.317.317 0 0 1 .139-.524 5.121 5.121 0 0 0 2.92-2.37 4.996 4.996 0 0 0 .482-3.696 4.975 4.975 0 0 0-1.336-2.332A5.089 5.089 0 0 0 36.19 6.63a5.207 5.207 0 0 0-3.752.475 5.08 5.08 0 0 0-2.405 2.877.318.318 0 0 1-.227.214.329.329 0 0 1-.305-.077l-6.133-6.043a1.33 1.33 0 0 0-1.852 0l-4.305 4.264a1.253 1.253 0 0 0-.394 1.043 1.241 1.241 0 0 0 .602.94 5.063 5.063 0 0 1 1.918 2.164c.412.889.554 1.877.407 2.843a5.007 5.007 0 0 1-1.236 2.601 5.126 5.126 0 0 1-2.477 1.514 5.164 5.164 0 0 1-3.21-.214 5.072 5.072 0 0 1-2.438-2.066 1.238 1.238 0 0 0-.398-.424 1.262 1.262 0 0 0-1.615.196l-3.912 3.876c-.926.912-.926 1.71-.416 2.28l6.133 6.043a.318.318 0 0 1-.017.446.326.326 0 0 1-.145.078 5.144 5.144 0 0 0-2.912 2.374 5.019 5.019 0 0 0-.49 3.692 4.998 4.998 0 0 0 1.348 2.334 5.112 5.112 0 0 0 2.378 1.314 5.207 5.207 0 0 0 3.746-.466 5.08 5.08 0 0 0 2.41-2.863.318.318 0 0 1 .22-.229.328.328 0 0 1 .313.07l6.133 6.042a1.306 1.306 0 0 0 1.829 0l4.328-4.264a1.21 1.21 0 0 0 .433-1.065 1.197 1.197 0 0 0-.212-.553 1.221 1.221 0 0 0-.453-.389Z'/%3E%3C/svg%3E");
					}
				}
				p{
					margin: 15px 0;
				}
			}
		}
	}
	
	/** QUICK INSTALLATION SECTION **/
	section#quickinstall{
		position: relative;
		overflow: visible;
		.wrap{
			position: relative;
			z-index: 10;
			.intro{
				max-width: 380px;
			}
			.install{
				width: calc(100% - 450px);
				-moz-tab-size: 4;
				  -o-tab-size: 4;
					 tab-size: 4;
			}
		}
		&:after{
			content: " ";
			display: block;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='482' fill='none' viewBox='0 0 1440 482'%3E%3Cpath stroke='url(%23a)' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M0 359h514c27.614 0 50-22.386 50-50v-64.5c0-27.614 22.386-50 50-50h370.5'/%3E%3Cpath stroke='url(%23b)' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1438 2h-402c-27.61 0-50 22.386-50 50v249c0 27.614 22.39 50 50 50h157.47c27.61 0 50 22.386 50 50v29c0 27.614 22.38 50 50 50H1438'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='-192.5' x2='-19.068' y1='241.413' y2='-114.664' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FAFAFA'/%3E%3Cstop offset='1' stop-color='%23CCC'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1496.5' x2='1032.42' y1='171.5' y2='231.527' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FAFAFA'/%3E%3Cstop offset='1' stop-color='%23CCC'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
			width: 100%;
			top: 10px;
			left: 0px;
			background-repeat: no-repeat;
			background-size: contain;
			aspect-ratio: 1600/536;
			position: absolute;
			z-index: 1;
		}
		.window button.copy{
			right: 30px;
			top: 30px;
		}
		.highlight{
			border-radius: 10px;
		}
		.result a{
			padding: 15px;
		}
	}
	
	section.faq{
		h1{
			max-width: 600px;
		}
		.flexwrap{
			margin-top: 70px;
		}
	}
	
	.landing_bg_1{
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='671' height='780' fill='none' viewBox='0 0 671 780'%3E%3Cpath fill='url(%23a)' d='M-90 20c0-11.046 8.954-20 20-20h721c11.046 0 20 8.954 20 20v566c0 11.046-8.954 20-20 20H310.5c-11.046 0-20 8.954-20 20v134c0 11.046-8.954 20-20 20H-70c-11.046 0-20-8.954-20-20V20Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='290.5' x2='290.5' y1='0' y2='780' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FAFAFA'/%3E%3Cstop offset='1' stop-color='%23F2F2F2'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
		width: 50%;
		height: auto;
		position: absolute;
		z-index: 1;
		aspect-ratio: 761 / 888;
		top: 0px;
		left: 0px;
	}
	.landing_bg_2{
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='458' height='904' fill='none' viewBox='0 0 458 904'%3E%3Cpath fill='url(%23a)' d='M761 20c0-11.046-8.954-20-20-20H20C8.954 0 0 8.954 0 20v566c0 11.046 8.954 20 20 20h155c11.046 0 20 8.954 20 20v257.5c0 11.046 8.954 20 20 20h526c11.046 0 20-8.954 20-20V20Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='380.502' x2='380.502' y1='.004' y2='903.502' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FAFAFA'/%3E%3Cstop offset='1' stop-color='%23F2F2F2'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
		width: 35%;
		height: auto;
		position: absolute;
		z-index: 1;
		aspect-ratio: 413 / 819;
		top: 250px;
		right: 0px;
	}
	
	section.most_scalable {
		.flexwrap {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
		}
		
		.col-1,
		.col-2 {
			width: calc(50% - 10px);
		}
		
		.col-1 {
			padding-right: 40px;
		}
		
		.box {
			display: flex;
			justify-content: space-around;
			padding: 24px;
			border: 1px solid var(--main-infobox-border-color, rgba(212, 204, 255, 0.6));
			border-radius: 15px;
			background: var(--main-infobox-background-color, rgba(246, 245, 255, 0.6));
			backdrop-filter: blur(5px);
		
			> div {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 8px;
			}
		
			.label {
				color: var(--main-text-secondary-color, #666);
				@include pre-title;
			}
		
			.number {
				@include display-2;
			}
		
			.info {
				@include body-standard;
			}
		
			.divider {
				width: 1px;
				background: var(--main-infobox-border-color, rgba(212, 204, 255, 0.6));
			}
		}
		
		.reference {
			width: 100%;
			margin-top: 24px;
			text-align: right;
			font-size: var(--type-tiny, 12px);
			color: var(--main-text-tertiary-color, #B2B2B2);
		
			a {
				color: inherit;
			}
		}
	}
	
}



@media only screen and (max-width: 1200px) {
	body.landing{
		section.welcome .flexwrap .duckdb{
			margin-left: 15px;
		}
	} 
}


@media only screen and (max-width: 1100px) {
	body.landing{
		section#quickinstall .wrap .install{
			width: calc(100% - 390px);
		}
	}
}


@media only screen and (max-width: 1100px) {
	body.landing section.most_scalable {
		.flexwrap {
			display: flex;
			flex-wrap: wrap;
			gap: 48px;
		}
		
		.col-1,
		.col-2 {
			width: 100%;
			text-align: center;
			padding: 0;
		}
		
		.box {
			padding: 16px;
		}
	}
}

@media only screen and (max-width: 940px) {
	body.landing{
		h1{
			max-width: 500px;
		}
		section.welcome .flexwrap .duckdb{
			width: 100%;
		}
		section.welcome .flexwrap .window,
		section#quickinstall .window{
			width: 100%;
			margin-top: 60px;
		}
		section#quickinstall .wrap .install,
		section#quickinstall .wrap .intro{
			width: 100%;
		}
		section.whyduckdb .flexwrap .featurebox{
			width: calc(50% - 10px);
		}
		section.blog .postpreview{
			width: calc(50% - 10px);
		}
		.accordion > div{
			width: 100%;
		}
		.accordion{
			-ms-flex-wrap: wrap;
				flex-wrap: wrap;
		}
		section#quickinstall .wrap .intro {
			width: 100%;
		}
		section.whyduckdb{
			background-size: cover;
		}
		section.blog .newstileswrap{
			row-gap: 40px;
		}
		section.blog .postpreview:nth-child(4){
			display: block;
		}
		.select{
			margin-bottom: 10px;
		}
	}
}

@media only screen and (max-width: 660px) {
	body.landing{
		section.whyduckdb .flexwrap .featurebox{
			width: 100%;
		}
		section.blog .postpreview{
			width: 100%;
		}
		section.blog .newstileswrap{
			row-gap: 40px;
		}
		section.blog .postpreview:nth-child(4){
			display: none;
		}
		section.blog .newstileswrap{
			row-gap: 0;
		}
		section.blog + section.upcoming-events{
			margin-top: 40px;
		}
	}
	header .headerline .headercontent .button{
		display: none;
	}
}


@media only screen and (max-width: 660px) {
	body.landing{
		.install .environment{
			display: block!important;
		}
		label.onlymobile{
			display: none!important;
		}
		.window .topbar{
			width: calc(100% - 0px);
			position: relative;
			-ms-scroll-chaining: none;
				overscroll-behavior: contain;
			overflow-x: auto;
			&::-webkit-scrollbar {width:1px; background: var(--doc-scrollbar-bg, #E6E6E6); height: 2px;}
			&::-webkit-scrollbar-track {background: var(--doc-scrollbar-bg, #E6E6E6);}
			&::-webkit-scrollbar-thumb {background: var(--doc-scrollbar-slider, #CCC);border-radius:2px}
			ul{
				margin-left: 15px;
				margin-right: 15px;
				margin-top: 15px;
				margin-bottom: 10px;
			}
		}
		.window .topbar ul li{
			white-space: nowrap;
		}
	}
}

@media only screen and (max-width: 450px) {
	body.landing{
		.select{
			width: 100%;
			max-width: unset;
		}	
	}
	body.landing section.most_scalable .box > div:first-child{
		max-width: 100px;
	}
}
