* {
	font-size: 16px;
	font-family: "narkiss-yair-variable", sans-serif;
	font-variation-settings: "MONO" 100, "wght" 400;
}

html {
	scrollbar-width: auto;
	-ms-overflow-style: none;
}

.html::-webkit-scrollbar {
	display: none;
}

body {
	margin: 0;
	scroll-behavior: auto;
	height: fit-content;
}

.keyart {
	position: relative;
	z-index: 1;
}

.keyart_layer {
	background-position: center;
	background-size: auto 100vh;
	background-repeat: repeat-x;
	width: 100vw;
	position: absolute;
}

.keyart,
.keyart_layer {
	height: 100vh;
}

.keyart_layer.parallax {
	position: fixed;
}

#keyart1 {
	background-image: url('../images/keyart/keyart13.svg');
}

#keyart2 {
	background-image: url('../images/keyart/keyart12.svg');
}

#keyart3 {
	background-image: url('../images/keyart/keyart11.svg');
}

#keyart4 {
	background-image: url('../images/keyart/keyart10.svg');
}

#keyart5 {
	background-image: url('../images/keyart/keyart9.svg');
}

#keyart6 {
	background-image: url('../images/keyart/keyart8.svg');
}

#keyart7 {
	background-image: url('../images/keyart/keyart7.svg');
}

#keyart8 {
	background-image: url('../images/keyart/keyart6.svg');
}

#keyart9 {
	background-image: url('../images/keyart/keyart5.svg');
}

#keyart10 {
	background-image: url('../images/keyart/keyart4.svg');
}

#keyart11 {
	background-image: url('../images/keyart/keyart3.png');
}

#keyart12 {
	background-image: url('../images/keyart/keyart2.png');
}

#keyart13 {
	background-image: url('../images/keyart/keyart1.png');
}

.seperator1 {
	width: 100%;
	height: 10vh;
	position: absolute;
	z-index: 999;
	background-image: url('../images/ui/seperator_white.svg');
	margin-bottom: -10vh;
	background-repeat: repeat-x;
	background-size: auto 10vh;
}

.seperator2 {
	width: 100%;
	height: 10vh;
	position: absolute;
	z-index: 999;
	background-image: url('../images/ui/seperator_blue.svg');
	margin-bottom: -10vh;
	background-size: auto 10vh;
	background-repeat: repeat-x;
	background-color: white;
}

.seperator3 {
	width: 100%;
	height: 10vh;
	position: absolute;
	z-index: 999;
	background-image: url('../images/ui/seperator_white.svg');
	margin-bottom: -10vh;
	background-repeat: repeat-x;
	background-size: auto 10vh;
	background-color: #838b9e;
}

.seperator_footer {
	width: 100%;
	height: 10vh;
	position: absolute;
	z-index: 999;
	background-image: url('../images/ui/seperator_beige.svg');
	margin-bottom: -10vh;
	background-size: auto 10vh;
	background-repeat: repeat-x;
	background-color: white;
}

section {
	padding-top: 10vh;
	padding-bottom: 5vh;
	position: relative;
}

.about {
	width: 100%;
	height: fit-content;
	z-index: 3;
	background: white;
	margin-top: 9.9vh;
}

.unique {
	width: 100%;
	height: 120vh;
	z-index: 4;
	background: #838b9e;
	margin-top: 9.9vh;
}

.history {
	width: 100%;
	height: fit-content;
	z-index: 5;
	background: white;
	margin-top: 9.9vh;
}

.coding {
	width: 100%;
	height: fit-content;
	z-index: 6;
	background: white;
}

footer {
	width: 100%;
	height: fit-content;
	position: absolute;
	z-index: 9;
	background: #E9EDD2;
	padding-top: 10vh;
	margin-top: 9.9vh;
}

.flexbox {
	display: flex;
	flex-direction: row;
	gap: 10vw;
	margin-left: 10vw;
	margin-right: 10vw;
	margin-bottom: 20vh;
}

.full {
	margin-top: 15vh;
	margin-left: 20vw;
	margin-right: 20vw;
	margin-bottom: 30vh;
}

.flex_element {
	align-self: flex-start;
	flex-basis: content;
}

.tabs {
	display: flex;
}

.tab {
	flex: 1;
	padding: 1em;
	background: white;
	text-align: center;
	color: black;
	font-size: 1em;
	line-height: 1.2em;
	border-radius: 0.3em;
	cursor: pointer;
	transition-duration: 0.3s;
}

.tab:hover {
	color: #838b9e;
	cursor: pointer;
	transition-duration: 0.3s;
}

.tab.active {
	background: #838b9e;
	color: white;
}

.run {
	flex: 1;
	padding: 1em;
	background: #838b9e;
	text-align: center;
	color: white;
	font-size: 1em;
	line-height: 1.2em;
	border-radius: 0.3em;
	cursor: pointer;
	transition-duration: 0.3s;
}

.run:hover {
	background: #6d7485;
}

.code {
	width: 30vw;
	height: 50vh;
	padding: 1em;
	margin-top: 3vh;
	background-image: url('../images/ui/code_background.svg');
	background-size: cover;
	background-repeat: repeat-x repeat-y;
	background-color: #f3f6ff;
	border-radius: 0.3em;
	transition-duration: 0.3s;
	overflow-y: scroll;
}

.switchable {
	display: none;
	transition-duration: 0.3s;
}

.switchable.active {
	display: block;
	transition-duration: 0.3s;
}

textarea {
	resize: none;
	height: 110%;
	width: 100%;
	text-align: left;
	background: none;
	border-style: none;
	font-size: 1.25em;
	line-height: 1.25em;
	font-family: "narkiss-yair-variable", sans-serif;
	padding: none;
	overflow: hidden;
}

.readonly {
	cursor: not-allowed;
}

iframe {
	width: 38vw;
	height: 54vh;
	padding: 0;
	margin-top: 3vh;
	border-radius: 0.3em;
	border-style: none;
	transition-duration: 0.3s;
	overflow-y: scroll;
}

h1 {
	font-size: 3em;
}

.text {
	font-size: 1.5em;
	line-height: 1.5em;
	margin-top: 15vh;
}

.small_text {
	font-size: 1em;
	line-height: 1.2em;
	margin-top: 4vh;
}

.about_text {
	color:white;
	margin-top: 3vh;
	margin-bottom: 3vh;
	margin-left: 10vw; 
	margin-right: 10vw;
	font-size: 0.7em;
	line-height: 1em;
}

i {
	font-size: 1em;
	line-height: 1.2em;
}

.small_video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15px;
}

.code_video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15px;
	cursor: pointer;
}

#scroll_video {
	width: 40%;
}

.parallax_text {
	color: white;
	white-space: nowrap;
	position: absolute;
	font-size: calc(1vw + 1vh);
	line-height: calc(2vw + 1vh);
	color: white;
	margin-top: 60vh;
}

#top {
	top: 0;
}

#bottom {
	top: 180vh;
}

a {
	text-decoration: none;
}

span {
	width: 100%;
	top: 80vh;
	font-size: 1em;
	margin-left: 2vw;
	position: fixed;
	z-index: 2;
	color: white;
}

sup {
	line-height: 1.5em;
}

.source {
	color: #e6813b;
	background: #f8eadf;
	padding-left: 0.3em;
	padding-right: 0.3em;
	border-radius: 0.3em;
	transition-duration: 0.3s;
}

.source:hover {
	color: white;
	background: #e6813b;
	cursor: pointer;
	transition-duration: 0.3s;
}

button {
	border-style: none;
}

.popover {
	position: fixed;
	background: #f8eadf;
	padding: 2em;
	border-radius: 0.3em;
	border-style: none;
	transition-duration: 0.3s;
}

::backdrop {
	backdrop-filter: blur(3px);
	transition-duration: 0.3s;
  }

.footer_source {
	color: white;
	background: black;
	padding-left: 0.3em;
	padding-right: 0.3em;
	border-radius: 0.3em;
}

.hyperlink {
	transition-duration: 0.3s;
}

.hyperlink:hover {
	background: #e6813b;
	cursor: pointer;
	transition-duration: 0.3s;
	padding-left: 0.3em;
	padding-right: 0.3em;
	border-radius: 0.3em;
}

.footer_hyperlink {
	text-decoration: underline;
	color: #e6813b;
	cursor: pointer;
	font-size: 1em;
	transition-duration: 0.3s;
}

.footer_hyperlink:hover {
	text-decoration: none;
}

.footer_hyperlink:visited {
	color: #e6813b;
}

.mobile {
	display: none;
}

@media (max-width: 1000px) and (orientation: portrait) {

	* {
		font-size: 30px;
	}

	.keyart_layer {
		background-position-x: 45%;
	}

	section {
		padding-top: 3vh;
		padding-bottom: 1vh;
	}

	.seperator1 {
		margin-bottom: -5vh;
		background-size: auto 5vh;
	}

	.seperator2,
	.seperator3,
	.seperator_footer {
		height: 5vh;
		background-size: auto 5vh;
	}

	.about,
	.unique,
	.history,
	footer {
		margin-top: 4.9vh;
	}

	.unique {
		height: 60vh;
	}

	.flexbox {
		margin-top: 2.5vh;
		margin-left: 10vw;
		margin-right: 10vw;
		margin-bottom: 10vh;
		gap: 5vh;
		flex-direction: column;
	}

	.full {
		margin-top: 5vh;
		margin-left: 10vw;
		margin-right: 10vw;
		margin-bottom: 10vh;
	}

	.tab, .run {
		font-size: 1.5em;
	}

	.code {
		width: 70vw;
		height: 40vh;
		font-size: 1.5em;
	}

	.text {
		margin-top: 5vh;
	}

	.small_text {
		margin-top: 2.5vh;
		font-size: 1.5em;
		line-height: 1.5em;
	}

	.about_text {
		font-size: 1em;
		line-height: 1.5em;
	}

	i {
		font-size: 1em;
		line-height: 1.5em;
	}

	textarea {
		font-size: 0.9em;
		line-height: 1.5em;
	}

	iframe {
		width: 79vw;
		height: 40vh;

	}

	.small_video,
	.code_video {
		border-radius: 30px;
	}

	#scroll_video {
		width: 100%;
	}

	.video_container {
		margin: 0;
		width: 800px;
		height: 800px;
	}

	.parallax_text {
		margin-top: 30vh;
	}

	#bottom {
		top: 150vh;
	}

	.mobile,
	.source {
		font-size: 1em;
		display: inline;
	}

	sup {
		display: none;
	}

	span {
		font-size: 1em;
		top: 94vh;
		margin-left: 5vw;
	}

	.popover {
		position:fixed;
		font-size: 1.5em;
		line-height: 1.5em;
		background: #f8eadf;
		padding: 2em;
		border-radius: 0.3em;
		border-style: none;
		margin-right: 5vw;
		margin-left: 5vw;
	}
	
}