body{
	box-sizing: border-box;
	    width: -webkit-fill-available;
}

body{
	position:absolute;
}

@font-face { 

	font-family: work-sans; 

	src: url('../fonts/workSans/WorkSans-Regular.ttf');

} 

@font-face { 

	font-family: work-sans; 

	src: url('../fonts/workSans/WorkSans-Bold.ttf');

	font-weight: bold;

} 



html {
  scroll-behavior: smooth;
}


html[data-theme='light'] {

	--background-color: #efefef;
	--text-color:  black;
	--link-color: #543fd7;


	--header-background-color: #d0dce1cc /*#efefefcc*/;
	--header-border-bottom:#dbdbdb;

	--shadow-color: #d8d8d8;



	--panel-background:#e9e9e9;

	--panel-background-solid: #e9e9e9;

	--glow-1-color:#6beaff00;

	--glow-2-color:#6beaff00;


	--panel-border:1px solid #e3e3e3;
	--panel-border-hover:1px solid #dcd9d9;
	--darker-content-background:#f1f1f1;
	--darker-content-border-top:#ebebeb;

	

	--panel-small-background-color:#e7e7e7;


	--panel-row-background: 	#e1e1e1a3;

	--panel-row-border-bottom:2px solid #eae9e9;
	--panel-row-background: #e7efee80;

	--input-background-color:#f7f7f7;

	--input-border-color:#e1e1e1;

}

html[data-theme='dark'] {
	--background-color: #0a0a0a;
	--text-color: white;
	--link-color: #828fff;
	--header-background-color: #13191acc; /* #141415cc; */
	--header-border-bottom:#141415cc;
	--header-button-hover-background: #192831;

	--shadow-color: #111111;


	--panel-background:#1d2024e0/*#1b1c1e*/;
	--panel-background-solid: #0f1316;
	--panel-border:1px solid #1b1c1e;
	--panel-border-hover:1px solid #373535;

	--panel-row-border-bottom:2px solid #212121;

	--darker-content-background:radial-gradient(ellipse closest-side at 50% 50%, #23262b, #25242b 25%, #18181a);
	--darker-content-border-top:2px solid #1c1c1c;

	--panel-small-background-color:#1c1f24e0; /*#1b1c1e;*/

	--panel-row-background: #1b1c1ea3;

	--input-background-color:#181818;

	--input-border-color: #252525;

	--glow-1-color: #099bff42;

	--glow-2-color: #09ff5242;
}

*{

	transition: * 0.2s;


}

#home, #contact, #about{

	padding-top: 40px;
}

body{

	transition: 0.2s;

	color: var( --text-color );

	background: var( --background-color );

	padding: 0;

	margin: 0;

	padding-top:	60px;

}






@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

.glowingBorder {
 position: relative;
  z-index: 1000;
/*

	left: 4px;
	top: 393px;
	width: 374px;
	height: 254px;*/
  border-radius: 12px;
  overflow: hidden;

  
  &::before {
  		opacity: 0;
  		transition: .2s;
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        z-index: -2;
        height: 200%;
        background: conic-gradient(transparent, var(--glow-1-color), transparent 30%);
        animation: rotate 4s linear infinite;
  }
  

  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 2px;
    top: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background: var(--panel-background-solid);
    border-radius: 12px;
    
  }

}

.glowingBorder2 {

  &::before {

        background: conic-gradient(transparent, var(--glow-2-color), transparent 30%);
        animation: rotate 4s linear infinite;
        animation-delay: -2.2s;
       /* animation-direction: reverse;*/
  }

}

.glowingBorder-active{


  &::before {
  	opacity: 1;
  }

}


.glowingBorder:hover{

	margin-top: 20px;

	cursor: pointer;

}


@keyframes opacityChange {
  50% {
    opacity:1;
  }
  100% {
    opacity: .5;
  }
}




h1{

	padding: 20px;
}

.menuBar{

	display: flex;

	background: var( --header-background-color ); /*linear-gradient(45deg, #3c519d3b, #335d7b40, #23284180);*/

	height: 56px;

	z-index: 100000;

}

menu{

	backdrop-filter: blur(10px);

	box-sizing: border-box;

	margin: 0;

	width: 100%;

	position: fixed;

	background: #141415cc;

	border-bottom:var(--header-border-bottom);

	top: 0;

	left:0;



}

menu menuItem{

	display: -webkit-box;

	

	border-radius: 2px;

	font-weight: bold;

	cursor: pointer;

	font-size: 18px;

}

menu menuItem a{

	padding:18px;

	color: var(--text-color);

	display: flex;

	text-decoration: none;

}

menu menuTitle{

	transition: 0.2s;

	padding: 20px;

	font-weight: bold;
}

menu menuItem:hover{

	background: var( --header-button-hover-background );


}

menu space{

	flex:1;
}

*{

	font-family: work-sans;

	text-align: center;

}

.menuBar{



}

p{
	color: var( --text-color );

	margin: 20px;
}

content{

	flex-direction: column;

	display: flex;

	width: 100%;

	padding: 10px;

	box-sizing: border-box;

	margin: 0 auto;

	max-width: 1200px;

	margin-bottom: 140px;

}

panel{

	flex: 1;

	margin: 20px;

	display: block;

	border-radius: 12px;

	margin-bottom: 40px;

	width: -webkit-fill-available;

}

.lightPanel{

	border: var( --panel-border );

	transition: 0.2s;

	background: var( --panel-background );
/*
	background: linear-gradient(65deg,var(--token-0c0b334b-6174-48b5-97d4-6d827fd9087a, #083947) 12%,var(--token-9b4f4d47-30a1-4d17-b7f3-1390421ad991, rgb(28, 31, 31)) 50.85515202702703%);
*/
}

.lightPanel:hover{
/*
	background: linear-gradient(65deg,var(#1b272b, #1b272b) 12%,var(#1b272b, rgb(28, 31, 31)) 50.85515202702703%);*/
	/*
	border: var( --panel-border-hover );

margin-top: 20px;*/


	cursor: pointer;

}

.halfPanel{

	height: 300px;

	margin:20px;

	margin-top: 30px;


	min-width: 275px;


}

.hidePanel{

	opacity: 0;
}

panel h2{

	padding: 40px;

	box-sizing: border-box;


}

panel:hover{



}

row{

	display: flex;

}

panel.dark{

	background: black;

	padding: 20px;

	text-align: justify;

	background: #1b1c1e;

}


.blackPanel{



}
.darkerContent{

	border-top: var( --darker-content-border-top );

	background: var( --darker-content-background );
}

.doublePanel{

	padding-top:40px;

	display: flex;

	flex-wrap: wrap;
}

.firstRow{

	margin-top:60px;

}

.switch {
	position: relative;
	display: inline-block;
	width: 120px;
	height: 38px;
	margin:12px;
	border-radius: 12px;
}

.switch input {
	display: none;
}

.slider {
	border-radius: 16px;
	position: absolute;
	cursor: pointer;
	top: 0;
	width: 120px;
	right: 0;
	bottom: 0;
	background-color: #0c0c0c;/*#1e1e1e;*/


	-webkit-transition: .2s;
	transition: .2s;
	/*border:1px solid #292929;*/
  
}

.slider:before,
.slider .label {
	border-radius: 12px;
	font-weight: bold;
	position: absolute;
	content: "";

	width: 60px;
	left: 0;
	bottom: 4px;

	-webkit-transition: .2s;
	transition: .2s;
	color:white;
}

.slider .label.dark{

	background: black;

	background: #1e1e1e;

}

.slider .label.light{

	background: white;

	color:black;

}


.slider .label {
	padding:6px;
	background: none;
	font-size: 14px;
	left: 4px;
	top: 4px;
	width:50px;
}

input:checked+.slider {
	background-color: #e5e5e5;
}

input:focus+.slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before,
input:checked+.slider .label {
	-webkit-transform: translateX(50px);
	-ms-transform: translateX(50px);
	transform: translateX(50px);
}

.slider.round {

	border-radius: 34px;

}

.slider.round:before {

	border-radius: 50%;

}

.softwareWord{

	opacity: 1;

}

.fadeOut{

}

h2.leftTitle{

	float: left;

	margin: 6px;

	margin-left:16px;

	padding: 0;

}

img{

	float:left;

}

panelRow{

	background: var( --panel-row-background );
	display: flex;
	border-bottom: var( --panel-row-border-bottom );
	box-sizing: border-box;
	padding: 20px;
	width: 100%;
	float:left;

}

panel.wiggle{

	/*animation: tilt-wiggle .2s linear infinite;*/

}
/*
panel.wiggle:nth-child(1){

	transform: rotate(3deg);

}

panel.wiggle:nth-child(2){

	transform: rotate(-4deg);
	
}
panel.wiggle:nth-child(3){

	transform: rotate(-3deg);
	
}*/

panel.noPadding{

	padding: 0;

}

panel.dark{

	animation-play-state: paused;

	background: var(--panel-small-background-color);

	box-shadow: 4px 4px 8px 0px var(--shadow-color);

	backdrop-filter: blur(10px);

}

panel.dark:hover{

	animation-play-state: running;

}

div.floatLeft{

	float: left;

	margin: 20px;

	margin-top:30px;




}

.smallPanels{

	max-width: 1200px;

	flex-wrap: wrap;

	padding-top: 40px;

}

panel.floatLeft{

	padding: 0;

	min-width: 300px;




}

panel.floatLeft *{

	text-align: left;

}

@keyframes tilt-wiggle {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(5deg); }
	50% { transform: rotate(0eg); }
	75% { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}


.glowPoint{

	z-index: -100;
	position: absolute;
	top: 1000px;
	left: calc(55% - 320px);
	width: 0;
	height: 0;
	box-shadow: 0 0 60px 30px #ffffff00, 0 0 100px 60px #0ff0, 0 0 140px 90px #00ffff1a;

}

.upperGlow{

z-index: -100;
    position: absolute;
    top: 220px;
    left: calc(49%);
    width: 0;
    height: 0;
    box-shadow: 0 0 60px 30px #ffffff00, 0 0 100px 60px #00ff7e00, 0 0 140px 90px #00ffdc1a;
}


panel.table{

	display: flex;

	flex-direction: column;

}

panelLabel{

	min-width: 92px;


	font-weight: bold;

	flex: 1;

	display: flex;

	padding-right: 20px;

	align-items: flex-end;

	flex-direction: column;
}

panelvalue{

	padding-left: 20px;

	display: flex;

	flex: 1;


}

table{

	border-collapse: collapse;

	background: var(--panel-row-background);

	border-radius: 12px;

	margin-bottom: 40px;

	width: -webkit-fill-available;

}

td{
	text-align: left;
	

}

td.label{
	vertical-align: top;

	text-align: right;

	font-weight: bold;

	    width: 47%;
}
    input:focus { 
        outline: none !important;
        border-color: #719ECE;
        box-shadow: 0 0 10px #719ECE;
    }
    textarea:focus { 
        outline: none !important;
        border-color: #719ECE;
        box-shadow: 0 0 10px #719ECE;
    }
  
tr td{

	padding: 20px;
	border-bottom: thin solid #1e1e1e;
}

table tr:last-child td {
     border-bottom: none;
}

columnLabel{

}

input, textarea{

	width: 300px;

	color: white;
	text-align: left;
	font-size: 16px;
	border: 1px solid var( --input-border-color );
	border-radius: 12px;
	padding: 12px;
	background: var( --input-background-color );


	box-sizing: border-box;
	
}
textarea{

	/*width: 497px;*/
	height: 276px;


}

@media only screen and (max-width: 800px) {

	menutitle, space {

		display: none;
		
	}

	input, textarea{

		max-width: 70%;

	}
	.noPadding{

		margin:0;
	}


	menu .switch{

		display: none;
	}

	panel.floatLeft{

		min-width: auto;

	}

	input, textarea{

		width: 30vw;
	}

}