:root{
	--editorBorder:#5099dc;
	--editorBackgroundColor:#202124;
	--editorColor:#f29766;
	--editorFontFamily:Consolas;
}

@font-face {
	font-family: "Consolas";
	src: url("../fonts/Consolas.ttf") format("truetype");
  }
  @font-face {
	font-family: "Raleway";
	src: url("../fonts/Raleway-VariableFont_wght.woff2") format("woff2");
	font-weight: 100 900;
  }
  @font-face {
	font-family: "Klavika";
	src: url("../fonts/klavika-bold.otf") format("opentype");
  }
  
  @font-face {
	  font-family: "Roboto";
	  src: url("../fonts/Roboto-Light.ttf") format("truetype");
  }
  
  @font-face {
	  font-family: "Mulish";
	  src: url("../fonts/Mulish-VariableFont_wght.ttf") format("truetype");
  }
  
  @font-face {
	font-family: "Trickster";
	src: url("../fonts/PalmerCorella.otf") format("opentype");
	}

	@font-face {
		font-family: "Sherina";
		src: url("../fonts/Sherina.ttf") format("truetype");
	}

	@font-face {
		font-family: "Mathisde";
		src: url("../fonts/Mathisde.otf") format("opentype");
	}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{min-height:100lvh;}
body{
	position:absolute;
	width:100%;
	display:flex;
	flex-direction:column;
	font-size:16px;
	background: url("../pictures/mainBackground3.jpg") center center / auto 120lvh no-repeat;
	background-attachment:fixed;
}

main{
	display:flex;
	position:relative;
	flex-direction:column;
	overflow:hidden;
}

a,
a:link,
a:visited,
a:hover,
a:active{
    text-decoration: none;
}

.skip_display{
	display:none !important;
}

.hide_ase{
	opacity:0;
	pointer-events:none;
}

.ase_marker{
	position:absolute;
	left:0px;
	top:0px;
	width:0px;
	height:0px;
	background-color:rgba(255,0,0, .1);
	background-image: radial-gradient(rgba(255,0,0,1) 20%, rgba(0,0,0,0) 20%);
	background-position: 0 0;
	background-size: 5px 5px;
	pointer-events:none;
}

.ase_Container{
	display:flex;
	flex-direction:column;
	position:absolute;
	left:0px;
	top:0px;
	width:min(500px, 100%);
	height:min(600px, 100%);
	background-color:var(--editorBackgroundColor);
	border-radius:4px;
	font-family:var(--editorFontFamily);
	z-index:1000;
}

.ase_ContainerFull{/* ----------------Full Size Editor---------------- */
	display:flex;
	flex-direction:column;
	position:fixed;
	left:0px !important;
	top:10% !important;
	min-width:100%;
	width:100%;
	height:80%;
	min-height:80%;
	background-color:var(--editorBackgroundColor);
	border-radius:4px;
	z-index:1000;
}

.ase_grabHandle{
	display:flex;
	align-items:center;
	background-color:var(--editorBackgroundColor);
	border-bottom:solid var(--editorBorder) 2px;
	border-radius:10px 10px 0 0;
	height:3rem;
	width:100%;
	font-size:1.5rem;
	color:var(--editorColor);
	padding-left:0.5rem;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	cursor:grab;
}

.ase_commonButtons{
	display:flex;
	flex-wrap:wrap;
	gap:5px;
	padding:5px;
}

.ase_close{
	width:2.4rem;
	aspect-ratio:1/1;
	position:absolute;
	top:0.2rem;
	right:0.2rem;
	border:Solid var(--editorBorder) 3px;
	border-radius:50%;
	background:var(--editorBackgroundColor) url('../pictures/cancel.png') no-repeat center center / 110% 110%;
	z-index:1000;
	cursor:pointer;
}

.ase_tabsContainer{
	display:flex;
	position:relative;
	flex-direction:row;
	flex-grow:1;
	width:100%;
	margin-top:2rem;
	isolation:isolate;
}

.ase_tabShaft{
	position:absolute;
	height:2rem;
	left:0;
	top:-2rem;
	display:flex;
	align-items:center;
	padding:0 10px;
	background:var(--editorBackgroundColor);
	border-left:solid var(--editorBorder) 1px;
	border-right:solid var(--editorBorder) 1px;
	cursor:pointer;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

.ase_tabShaftFull{
	left:10px !important;
}

.ase_tab{
	color:var(--editorColor);
	position:absolute;
	width:100%;
	height:100%;
	padding:10px;
	background:var(--editorBackgroundColor);
	font-size:1.3rem;
	opacity:.6;
}

.ase_tabFull{/* ----------------Full Size Editor---------------- */
	position:relative;
	display:flex;
	color:var(--editorColor);
	flex:1 1 40%;
	min-width:0;
	height:100%;
	padding:10px;
	opacity:1 !important;
	background:var(--editorBackgroundColor);
}

.ase_tabContent{
	width:100%;
	height:100%;
	border:solid var(--editorBorder) 2px;
	display:flex;
	flex-direction:column;
	gap:5px;
	padding:5px;
}

.ase_tabContent > *{
	display:flex;
	border:solid var(--editorBorder) 2px;
}

.ase_tabContent input{
	flex:1 1 auto;
	min-width:0;
	height:2rem;
	font-size:1.2rem;
	color:var(--editorColor);
	background:var(--editorBackgroundColor);
	box-shadow:none;
	border:none;
	padding:0.2rem 1rem;
}

.ase_button{
	display:flex;
	padding:0.2rem 1rem;
	font-size:1.2rem;
	align-items:center;
	border:solid var(--editorBorder) 2px;
	color:var(--editorColor);
	background:var(--editorBackgroundColor);
	cursor:pointer;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}
.ase_button:hover{box-shadow:0 0 0 100px rgba(255,255,255,.1) inset;}

.ase_Style_style, .ase_Content_content, .ase_Classes_classes, .ase_Attr_attr, .ase_NPHCS_attributes{
	flex:1;
	display:block;
	white-space:pre;
	word-break: break-all;
	font-size:1.2rem;
	overflow-y:scroll;
	padding:15px 0px 0px 15px;
}

.ase_datalistButton{
	position:relative;
	flex:0 1 auto;
	aspect-ratio:1/1;
	height:100%;
	background:url("../pictures/down_arrow.svg") no-repeat center / 100% 100%;
	border:solid var(--editorBorder) 2px;
	cursor:pointer;
}

.ase_datalist{
	z-index:1000;
	position:absolute;
	flex-direction:column;
	background:var(--editorBackgroundColor);
	gap:3px;
	padding:10px 0px;
	width:max-content;
	height:max-content;
	border:solid var(--editorBorder) 2px;
	top:0px;
	right:0px;
	display:none;
}
.ase_datalistShow{
	display:flex !important;
}
.ase_datalistItem{
	padding:0px 10px;
	text-align:left;
}

.ase_datalistItem:hover{
	color:var(--editorBorder);
	background-color:rgba(255,255,255,.2);
}

.darkCurtain{
	position:fixed;
	top:0px;
	left:0px;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.4);
	z-index:2000;
	backdrop-filter:blur(10px);
}

.darkCurtainBox{
	display:flex;
	max-height: 80%;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	padding:2rem;
	border:solid var(--editorBorder) 2px;
	background:var(--editorBackgroundColor);
	gap:2rem;
}





/*predefined classes from here*/
.pre_button_1{
	overflow:hidden;
	display:block;
	cursor: pointer;
	padding:0.3rem 2rem;
	--lineColor:black;
}
.pre_button_1::before{content:"";position:absolute;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,.05);pointer-events:none;}
.pre_button_1:hover::before{background:rgba(255,255,255,.1);}
.pre_button_1:hover::after{
	content:"";
	position:absolute;
	bottom:10%;
	left:5%;
	height:1px;
	background:var(--lineColor);
	box-shadow:0px 0px 3px 0px var(--lineColor);
	pointer-events:none;
	animation:0.3s anm_pre_button_1_keyframes ease-in 1 forwards;
}
@keyframes anm_pre_button_1_keyframes {
  0%   {width:0%;}
  100% {width:90%;}
}

.pre_button_2{
	overflow:hidden;
	display:block;
	cursor: pointer;
	padding:0.3rem 2rem;
	background-color:transparent;
}
.pre_button_2:hover{
	text-decoration:underline;
}

.parallaxBg{
	background-repeat: no-repeat;
	background-position: center center;
	background-size: max(1500px, 130%) auto;
}

.rowToCol{
	--treshold:600px;
	display: flex;
	flex-wrap: wrap;
}

.rowToCol > *{
	flex: 1 1 calc((var(--treshold) - 100%) * 999);
}

.prevent_select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.default{
	position:relative;
	display:flex;	
	min-height:30px;
	width:100%;
	white-space:pre;
	box-shadow:0 0 2px 0 black inset;
}

@keyframes anm_grow_keyframes {
  0%   {transform:scale(0.7);opacity:.1}
  100% {transform:scale(1);opacity:1}
}

@keyframes anm_shrink_keyframes {
  0%   {transform:scale(1.3);opacity:.1}
  100% {transform:scale(1);opacity:1}
}

@keyframes anm_fadein_keyframes {
  0%   {opacity:.1}
  100% {opacity:1}
}

@keyframes anm_wipeRight_keyframes {
  0%   {width:100%;}
  100% {width:0%;}
}

@keyframes anm_swimFromLeft_keyframes {
  0%   {transform:translateX(-70px);opacity:.1}
  100% {transform:translateX(0px);opacity:1}
}

@keyframes anm_swimFromRight_keyframes {
  0%   {transform:translateX(70px);opacity:.1}
  100% {transform:translateX(0px);opacity:1}
}

@keyframes anm_swimFromTop_keyframes {
  0%   {transform:translateY(-50px);opacity:.1}
  100% {transform:translateY(0px);opacity:1}
}

@keyframes anm_swimFromBottom_keyframes {
  0%   {transform:translateY(50px);opacity:.1}
  100% {transform:translateY(0px);opacity:1}
}

.loading {
	width:200px;
	height:200px;
	border:solid 10px #8822aa;
	border-radius:50%;
	border-right-color:transparent;
	border-bottom-color:transparent;
	transition: all 0.5s ease-in;
    animation-name:rotate; 
    animation-duration:1.0s; 
    animation-iteration-count:infinite;
    animation-timing-function:linear; 
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to { 
        transform: rotate(360deg);
    }
}


@media (prefers-reduced-motion: no-preference) {

	.anm_grow{
		animation:1s anm_grow_keyframes ease-in 1 forwards;
	}
	
	.anm_shrink{
		animation:1s anm_shrink_keyframes ease-in 1 forwards;
	}
	
	.anm_fadein{
		animation:1s anm_fadein_keyframes ease-in 1 forwards;
	}
	
	.anm_wipeRight::after{
		content:"";
		z-index:1000;
		background:white;
		height:100%;
		position:absolute;
		top:0px;
		left:0px;
		animation:0.7s anm_wipeRight_keyframes ease-in 1 forwards;
	}

	.anm_fLeft{
		animation:1s anm_swimFromLeft_keyframes ease-in 1 forwards;
	}

	.anm_fRight{
		animation:1s anm_swimFromRight_keyframes ease-in 1 forwards;
	}
	
	.anm_fTop{
		animation:1s anm_swimFromTop_keyframes ease-in 1 forwards;
	}
	
	.anm_fBottom{
		animation:1s anm_swimFromBottom_keyframes ease-in 1 forwards;
	}
}