/****
***** Author: SKDJ
*****
***** cool Color #3aeaed
****/



/*****
   text-shadow: 0 0 0 #D7624E, 0.0025em 0.0025em 0 #D7624E, 0.005em 0.005em 0 #D7624E, 0.0075em 0.0075em 0 #D7624E, 0.01em 0.01em 0 #D7624E, 0.0125em 0.0125em 0 #D7624E, 0.015em 0.015em 0 #D7624E, 0.0175em 0.0175em 0 #D7624E, 0.02em 0.02em 0 #D7624E, 0.0225em 0.0225em 0 #D7624E, 0.025em 0.025em 0 #D7624E, 0.0275em 0.0275em 0 #D7624E, 0.03em 0.03em 0 #D7624E, 0.0325em 0.0325em 0 #D7624E, 0.035em 0.035em 0 #D7624E, 0.0375em 0.0375em 0 #D7624E, 0.04em 0.04em 0 #D7624E, 0.0425em 0.0425em 0 #D7624E, 0.045em 0.045em 0 #D7624E, 0.0475em 0.0475em 0 #D7624E, 0.05em 0.05em 0 #D7624E, 0.0525em 0.0525em 0 #D7624E, 0.055em 0.055em 0 #D7624E, 0.0575em 0.0575em 0 #D7624E, 0.06em 0.06em 0 #D7624E, 0.0625em 0.0625em 0 #D7624E, 0.065em 0.065em 0 #D7624E, 0.0675em 0.0675em 0 #D7624E, 0.07em 0.07em 0 #D7624E, 0.0725em 0.0725em 0 #D7624E, 0.075em 0.075em 0 #D7624E, 0.0775em 0.0775em 0 #D7624E, 0.08em 0.08em 0 #D7624E, 0.0825em 0.0825em 0 #D7624E, 0.085em 0.085em 0 #D7624E, 0.0875em 0.0875em 0 #D7624E, 0.09em 0.09em 0 #D7624E, 0.0925em 0.0925em 0 #D7624E, 0.095em 0.095em 0 #D7624E, 0.0975em 0.0975em 0 #D7624E, 0.1em 0.1em 0 #D7624E;
   
   */


/*3rem -6rem 0 -0.9rem , -3rem 6rem 0 -0.9rem , -3rem -6rem 0 -0.9rem, 3rem 9rem 0 -1.35rem , 3rem -9rem 0 -1.35rem ,
	  -3rem 9rem 0 -1.35rem , -3rem -9rem 0 -1.35rem, 3rem 12rem 0 -1.8rem , 3rem -12rem 0 -1.8rem , -3rem 12rem 0 -1.8rem ,
	  -3rem -12rem 0 -1.8rem, 6rem 0 0 -0.6rem , -6rem 0 0 -0.6rem , 0 -6rem 0 -0.6rem , 0 6rem 0 -0.6rem,
	  6rem 3rem 0 -0.9rem , 6rem -3rem 0 -0.9rem , -6rem 3rem 0 -0.9rem , -6rem -3rem 0 -0.9rem, 6rem 6rem 0 -1.8rem ,
	  6rem -6rem 0 -1.8rem , -6rem 6rem 0 -1.8rem , -6rem -6rem 0 -1.8rem, 6rem 9rem 0 -2.7rem , 6rem -9rem 0 -2.7rem ,
	  -6rem 9rem 0 -2.7rem , -6rem -9rem 0 -2.7rem, 6rem 12rem 0 -3.6rem , 6rem -12rem 0 -3.6rem , -6rem 12rem 0 -3.6rem ,
	  -6rem -12rem 0 -3.6rem, 9rem 0 0 -0.9rem , -9rem 0 0 -0.9rem , 0 -9rem 0 -0.9rem , 0 9rem 0 -0.9rem,
	  9rem 3rem 0 -1.35rem , 9rem -3rem 0 -1.35rem , -9rem 3rem 0 -1.35rem , -9rem -3rem 0 -1.35rem, 9rem 6rem 0 -2.7rem ,
	  9rem -6rem 0 -2.7rem , -9rem 6rem 0 -2.7rem , -9rem -6rem 0 -2.7rem, 9rem 9rem 0 -4.05rem , 9rem -9rem 0 -4.05rem ,
	  -9rem 9rem 0 -4.05rem , -9rem -9rem 0 -4.05rem, 9rem 12rem 0 -5.4rem , 9rem -12rem 0 -5.4rem , -9rem 12rem 0 -5.4rem ,
	  -9rem -12rem 0 -5.4rem, 12rem 0 0 -1.2rem , -12rem 0 0 -1.2rem , 0 -12rem 0 -1.2rem , 0 12rem 0 -1.2rem,
	  12rem 3rem 0 -1.8rem , 12rem -3rem 0 -1.8rem , -12rem 3rem 0 -1.8rem , -12rem -3rem 0 -1.8rem, 12rem 6rem 0 -3.6rem ,
	  12rem -6rem 0 -3.6rem , -12rem 6rem 0 -3.6rem , -12rem -6rem 0 -3.6rem, 12rem 9rem 0 -5.4rem , 12rem -9rem 0 -5.4rem ,
	  -12rem 9rem 0 -5.4rem , -12rem -9rem 0 -5.4rem, 12rem 12rem 0 -7.2rem , 12rem -12rem 0 -7.2rem , -12rem 12rem 0 -7.2rem ,*/
	  /* -12rem -12rem 0 -7.2rem

***/



*{
   /* position: relative;*/
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    box-sizing: border-box;
    font-family: "F1", "rookworst", "Big Shoulders" ,"sans serif","font Awesome"; 
    font-size: 10pt;      
}



*,*::before,*::after{
     margin: 0;
     padding: 0;
     box-sizing: border-box; 
}




@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}



html{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100vh;
	max-height:100vh;
}

html,body{
	overflow: hidden;
}


body{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: linear-gradient(to bottom,var(--SKDJ-deep-purple),var(--SKDJ-newt-color), var(--SKDJ-newton-color),var(--SKDJ-hot-pink-color),var(--SKDJ-deep-purple));
	background-color: transparent;
	width: 100vw;
	height: 100%;
	min-height: 100vh;
	opacity: 1.0;
	/*overflow: none;*/
	 overflow-x: hidden;
  overflow-y: none;
}

body::-webkit-scrollbar{
	display: none;
}



IMG{
	border: 5px outset purple;

}

p + p {
	font-size: 24pt;
	-webkit-text-fill-color: var(--SKDJ-default-bg);
	
}

.BTN{
	background-color: var(--SKDJ-rasberry-jam-color);
	color: white;
	border: 1;
}


button{
	background-color: var(--SKDJ-rasberry-jam-color);
	color: white;
	border: 1;
	 &:focus{
	 	background-color: var(--SKDJ-teal-color);
	 	color: red;
	 }
	&:active{
		background-color: varl(--SKDJ-dull-blue);
		font-weight: bold;
	}
}

.fa{
	font-family: 'FontAwesome' !important; 
	width: 50px;
}


::-moz-selection{ 
    	color: white;
    	background-color: var(--SKDJ-teal-like-color);
    	font-weight: 800;
    	
    	text-shadow: -1px 0 var(--SKDJ-navy-blue), 0 1px var(--SKDJ-navy-blue), 1px 0 var(--SKDJ-navy-blue), 0 -1px var(--SKDJ-navy-blue);
    	-moz-text-fill-color: white;
	-webkit-text-fill-color: transparent;
}

p::selection{

	background-color: var(--SKDJ-rasberry-color);
	-moz-text-fill-color: white;
	-webkit-text-fill-color: transparent;
	text-shadow: -1px 0 var(--SKDJ-deep-purple), 0 1px var(--SKDJ-deep-purple), 1px 0 var(--SKDJ-deep-purple), 0 -1px var(--SKDJ-deep-purple);
}

.materials-icons{
	font-size: 20px;
}

#topNavBar{
	position: absolute;
		
	display: inline-flex;
	flex-direction: row;
	align-content: flex-end;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-self: flex-end;
		
	top: 0px;
	left: 5px;
	right: 5px;
	width: 100vw;
	border: 1;
				
	white-space: wrap;
	border: purple;
	color: white;
}


.topLink{
	position: relative;
	display: inline;
	font-size: 1.6vw;
	border-left: 2px solid currentColor;
	background-color: #ff019c;
	background: transparent;
	margin-left: 10px;
	 	
	max-width: 150px;
	
	min-height: 30px;
	max-height: 30px;
	
	-webkit-text-fill-color: hsla(304,76%,33%,0.8);
	-moz-text-fill-color: hsla(304,76%,33%,0.8);
	word-break: break-word;
	
	&:hover{
		vertical-align: top;
		border: 1px solid currentColor;
		background-color: transparent;
		color: mediumVioletRed;
		background: linear-gradient(to top,var(--SKDJ-light-grey), hsla(304,76%,33%,0.8));
	
		min-height: 30px;
		max-height: 30px;	
		transition: all .3s ease-in-out;
		transition: background 300ms ease-in-out, color 300ms ease-in-out;
	
	}
	& > i {
		font-size: 1.6vw;
	}
			
}



.navBTN{
	width: 50px;
	height: 40px;
	min-height: 40px;
	max-height: 100%;
	background-color: transparent /*var(--SKDJ-darkteal)*/;
	color: var(--SKDJ-darkteal);
	-webkit-text-fill-color: var(--SKDJ-default-head);
	border: 0;
	border-left: 2px solid var(--cool-color);
	align-items: center;
	align-content: center;
	align-self: center;
	justify-content: center;
}


.winBTN{
	display: flex;
	flex-direction: row;
	background-color: var(--SKDJ-bg);
	color: ;
	border-left: white 1px inset;
	
	float: right;
	right: 0px;
	
	align-content: center;
	align-self: center;
	justify-content: center;
		
	&:hover{
		background-color: var(--SKDJ-close-color);
		color: white;
	}
}

.titleBTN{
	background: black;
	
}

clsBTN{
	right: 0px;
	
}

#time{
	position: relative;
	top: 0px;
	background-color: var(--SKDJ-pro-grey);
	color: var(--SKDJ-teal-like-color);
}




.exit{
	position: absolute;
	display: flex;
	background-color: var(--SKDJ-rasberry-jam-color);
	color: var(--SKDJ-teal-like-color);
	
	right: 0px;
	height: 30px;
	
	align-content: center;
	align-self: flex-end;
	justify-content: flex-end;
	align-items: flex-end;
	
}

.exit:hover{
	background-color: var(--SKDJ-) !important;
	color: white;
}


/***********************************************/

a{
	position: absolute;
	display: inline;
	text-decoration: none;
	font-size: 0.8vw;
	
	
	color: var(--SKDJ-anchor-blue);
	z-index: 20;
	&:hover{
		color: #660033;
		animation: scale(1.2);
	}
	&:before{
		position: absolute;
		display: inline;
		content: " ";
		background: linear-gradient(to bottom, #B80D79 hsla(281,91%,47%, 0.8), hsla(286,34%,33%,0.8)) !important; 
		
		top: 0px;
		left: 0px;
		
		width: 100%;
		height: 4px;
		
		transition: all .3s ease-in-out;
		
		/*z-index: 20;*/
		&:hover{
			bottom: 0;
			width: 100%;
			height: 100%;
			transition: width 1s;
			transition: height 1s;
			width: 100%;
			height: 100%;
			-webkit-text-fill-color: white;
			color: white;
			z-index: 2;
			
		}
	}		
}


nav{
	display: flex;
	flex-direction: row;
	align-self: center;
}


P{
	font-size: 1vw;
}


#bodyContent:has(a){
	
}



ul{
	list-style-type: none;
	list-style-position: inside;
}

LI{
	list-style-type: none;
	list-style-position: inside;
}


.caret{
	position: relative;
	display: inline;
	background-color: lawngreen;
	top: -2px;
	width: 20px;
	height: 60px;
	vertical-align: center;
	justify-content: center;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: none;
	animation-play-state: running;
	animation-name: blink;

}

#navbar{
	position: relative;
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: auto auto;
	
	flex-wrap: wrap;
	flex-direction: rows;
	
	align-content: flex-start;
	align-self: flex-end;
}


/*background: linear-gradient(to top,#43d235, #15dd15 );*/


.date{
	font-style: bold;
	text-decoration: underline;
}

.fixed{
	width: 100vw;
}


.clsBTN{
	display: flex;
	
	right: 0px;
	width: 40px;
	height: 30px;
	background-color: red;
	align-self: flex-end;
	color: white;
}

.deathBTN{
		
	
}


.topNavBar{
	display: flex;
	flex-direction: row;
	height: 30px;
	background-color: #660033;
	color: white;
}

.navLink:last-of-type{
	background-color: var(--rasberry-color);
	background: purple;
	color: white;
	
}





.topLink::before{
	position: absolute;
	content: " ";
	background: linear-gradient(to top, hlsa(var(--SKDJ-bright-orange),0.8), hsla(var(--SKDJ-strawberry-pink),0.8));
	background-position: center top;
	
	height: 4px;
	
	opacity: 0.7;
	&:hover{
		bottom: 3;
		height: 100%;
		opacity: 0.7;
		transition: all .3s ease-in-out;
		transition: background 300ms ease-in-out, color 300ms ease-in-out;
		
	}
	
	
}


#topHeading{
	background-color: linear-gradient(to right, var(--skdj-teal-like-color) ,var(--SKDJ-cool-color) ,var(--SKDJ-teal-like-color) ,var(--SKDJ-rasberry-color) ,var(-SKDJ-deep-purple-color) ,var(--SKDJ-));
	-webkit-text-fill-color: transparent;
	font-size: scale(1.2);
}

.subheading{
	
	background-color: linear-gradient(to right,mediumVioletRed,#15259A,#43d235,var(--SKDJ-cool-color), lawnGreen);
	-webkit-text-fill-color: linear-gradient(to right,mediumVioletRed,#15259A,#43d235,lawnGreen);
	-moz-text-fill-color: linear-gradient(to right,mediumVioletRed,#15259A,#43d235,lawnGreen);
	text-fill-Color: linear-gradient(to right,mediumVioletRed,#15259A,#43d235,lawnGreen);
	
	-moz-background-clip: text;
	-webkit-background-clip: text;
	background-clip: text;
	
}


.topHeading{
	width: 100%;
	font-weight: 800;
	font-size: 1vw;
	
	background: linear-gradient(to right,mediumVioletRed,#15259A,#43d235,lawnGreen);
	background-color: linear-gradient(to right, var(--skdj-teal-like-color) ,var(--SKDJ-green) ,var(--SKDJ-faded-color) ,var(--SKDJ-teal-like-color) ,var(--SKDJ-darkteal:) ,var(--SKDJ-darkgreen));
	text-shadow: -1px 0 purple, 0 1px purple, 1px 0 purple, 0 -1px purple;
		
	-moz-text-fill-color: linear-gradient(to right,mediumVioletRed,#15259A,#43d235,lawnGreen);
	-moz-background-clip: text;
	-moz-text-fill-color: linear-gradient(to right,mediumVioletRed,#15259A,#43d235,lawnGreen);
	
	-webkit-text-fill-color: linear-gradient(to right,mediumVioletRed,#15259A,#43d235,lawnGreen);
	-webkit-background-clip: text;
	-webkit-text-fill-color: linear-gradient(to right,mediumVioletRed,#15259A,#43d235,lawnGreen);

	
	/*-webkit-text-fill-color: transparent;*/
	font-size: scale(1.2);

}

.topHeading::after{
	background-image: url('../img/arrow.gif');
}



.title{
	width: 100%;
	font-weight: 800;
	font-size: 1vw;
	
	/*text-shadow: -1px 0 lawngreen, 0 1px lawngreen, 1px 0 lawngreen, 0 -1px lawngreen;*/
	vertical-align: top;
	/*-webkit-background-clip: text;
	background-clip: text;*/
}

.prompt{
	font-size: 1.6vw;

}

#topmenu::nth-first-child(1){
	justify-content: flex-start;
	align-self: flex-start;
	order: 0;
}


/********************************************* Body ***************************************************/

#bodyContent > DIV{
	min-width: 100%;
	width: 100%;
}


#bodyContent ~ DIV{
	min-width: 100%;
	width: 100%;
}

#bodyContent > DIV > H1, #bodyContent > DIV > H2, #bodyContent > DIV > H3,#bodyContent > DIV > H4, #bodyContent > DIV > H5, #bodyCentent > DIV > H6{
	display: flex;
	flex-direction: column;
	background-color: #660033;
	color: white;
	/*top: 20px;*/
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	min-width: 100%;
	width: 100%;
	text-align: center;
	align-content: center;
	justify-content: center;
	
	-webkit-text-fill-color: linear-gradient( to left, #f32170, #ff6b08, #cf23cf, #eedd44, #43d235, #cc0066, #660033) ;
		
	-moz-text-fill-color: linear-gradient: inear-gradient( to left, #f32170, #ff6b08, #cf23cf, #eedd44, #43d235, #cc0066, #660033);   
	/*text-fill-color: linear-gradient: inear-gradient( to left, #f32170, #ff6b08, #cf23cf, #eedd44, #43d235, #cc0066, #660033); */ 
	
	font-weight: 800;
	line-height: 1.5;
	font-size: 2.1rem;
	z-index: 40;
}

#SKDJCVDIV ~ UL{
	display: inline;
	vertical-align: bottom;
	columns: 5;
	-webkit-columns: 5;
	-moz-columns: 5;
	color: #43d235;
	
}

#SKDJCVDIV LI{
	
	
	columns: 5;
	-webkit-columns: 5;
	-moz-columns: 5;
	color: #43d235;
}


.Cfloated{
	float: center;
}


.Lfloated{
	float: left;
}

.Rfloated{
	float: right ;
}

#photoContainer{
	border: 2px inset purple;
}

#photoContainer:hover{
	border: 2px inset purple;
	width: 600px;
	height: 400px;
	z-index: 400;
}


#imageDIV{
	position: relative;
	display: inline-flex;
	background-color: transparent;
	
	width: 300px;
	height: 200px;
	margin: 0 auto;
	resize: both;
	float: center;

}

#imageDIV:hover{
	/*background-size: 600px 400px;*/
	width: 600px;
	height: 400px;
	z-index: 500;
	& .quad{
		background-size: 600px 400px;
	}
}


.quad{
	position: absolute;
	width: 50%;
	background-image: url('../img/lab/lab_06.jpg');
	height: 50%;
	border: 1px inset pink ;
	
	background-size: 300px 200px;
	transition: transform 0.3s ease;
	z-index: 500;
	&:target{
		z-index: 500;
	}

}



.quad1{
	top: 0;
	left: 0;
	background-position: top left;
}
.quad2{
	top: 0;
  	right: 0;
	background-position: top right;
}
.quad3{
	bottom: 0;
	left: 0;
	background-position: bottom left;
}
.quad4{
	 bottom: 0;
	right: 0;
	background-position: bottom right;	
}


#imageDIV:hover .quad1{
	transform: translate(-10px, -10px);
}

#imageDIV:hover .quad2{
	transform: translate(10px, -10px);
}

#imageDIV:hover .quad3{
	 transform: translate(-10px, 10px);
}

#imageDIV:hover .quad4{
	 transform: translate(10px, 10px);
}


.skdj-grid-card{
	background: #fff;
	border-radius: 1.6rem;
	box-shadow: 0 0 10rem -5rem;
	overflow: hidden;
}

.skdj-grid-frame{
	position: absolute;
	display: grid;
  	grid-template-columns: repeat(30, 1fr);
  	grid-template-rows: repeat(20, 1fr);
  	inset: 0;
  	min-width: 100%;
  	max-width: 100%;
  	min-height: max-content;
  	z-index: -1;
  	
  	/*&:hover{
  		z-index: 1;
  	}*/
  	&:blur{
  		z-index: -1;
  	}
}

.skdj-grid-tile{
	position: relative;
	background-color: var(--SKDJ-pro-grey);
	width: 5px;
	height: 5px;
	z-index: -1;
	& :focus{
		background-color: gold;
		/*z-index: 100 ;*/
	}
	&:active{
		background: var(--SKDJ-navy-blue);
		width: 10px;
		height: 10px;
		z-index: 100;
		border-radius: 50%;
	}
	&:blur{
		background-color: var(--SKDJ-pro-grey);
		z-index: -1;
	}
	&:hover{
		width: 0.6rem;
		height: 0.6rem;	
	}
}

.skdj-grid-tile::before{
	content: "";
	color: #A9C9FF;
	position: absolute;
	
	top: 50%;
	left: 50%;
	transform: translate(-50% -50%);
	
	/*transform: rotate(-45deg);*/	
	/*border-radius: 50%;*/
		
	height: 0.6rem;
	width: 0.6rem;
	
	background: var(--SKDJ-pro-grey);
	transition: 500ms linear all;
	
	border-top: 100%;
	/*border-radius: 50% 50% 25% 25%;*/
	
	box-shadow: 0 0 0, 3rem 0 0 -0.3rem purple, -3rem 0 0 -0.3rem purple , 0 -3rem 0 -0.3rem purple, 0 3rem 0 -0.3rem purple
	  3rem 3rem 0 -0.45rem purple , 3rem -3rem 0 -0.45rem purple, -3rem 3rem 0 -0.45rem purple, -3rem -3rem 0 -0.45rem purple, 3rem 6rem 0 -0.9rem purple;
	 
	  
	  &:active{
	  	z-index: 200;
	  }
	  &:blur{
	  	z-index: -1;
	  }
	&:hover{
		
		
		/******** diamond **************/
	/*clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);*/
	
	/**************** even Cross start top border ****************/
	/*clip-path: polygon(25% 0%, 75% 0%, 75% 25%, 100% 25%, 100% 75%, 75% 75%,75% 100%,25% 100%, 25% 75%, 0% 75%,0% 25%, 25% 25%);*/
	
	/**************** even Cross diff Start Point (25% top border-left) ***********************/
	/*clip-path: polygon(0% 25% , 25% 25%, 25% 0%, 75% 0%, 75% 25%, 100% 25%, 100% 75%,75%75%,75% 100%,25% 100%,25% 75%,0% 75%, 0% 25%);*/
	
	
	/******** four point star ****************/ 
	/*clip-path: polygon(0% 50%,30% 30%,50% 0%,70% 30% ,100% 50%,70% 70%,50% 100%, 30% 70% ,0% 50%);*/
	
	/*********    Cursor shape  **********/	
	/*clip-path: polygon(0% 0%,30% 0%,30% 20%,60% 60%,20% 30%,0% 30%);*/
	
	/********** CURSOR **************/
	/*clip-path: polygon(0% 0%, 75% 0%, 50% 25%, 100% 75%,75% 100%, 25% 50%,0% 75%);*/
		
	clip-path: polygon(0% 0%, 75% 0%, 50% 25%, 100% 100%, 25% 50%,0% 75%);
			
		width: 1rem;
		height: 1rem;
		transition: 70ms linear all;
		z-index: 10;
		
		
	}
	
}




/******************************* IMG *******************************/

#imgcontainer{
	position: inline-grid;
	display: grid;
	grid-template-columns: auto auto auto auto;
}

#imgContainer IMG {
	width: 300px;
	height: 200px;
}

#imgContainer IMG:hover{
	cursor: pointer;
	border: 2px solid hotpink;
	width: 800px;
	height: 600px;	
}

/*************************** Code sections  **************************/

#codeContainer{

	position: inline-grid;
	display: grid;
	grid-template-columns: auto auto;
	width: 100%; 
	
}
.codeBox{
	border: none;
	border-left: 12px solid black;
}

#codeContainer DIV{

	position: block-grid;
	display: block-grid;
	font-family: monospace;
	
	background-color:  #cc0052;
	color: white;
	
	width: 100%;
	
	text-align: left;
	gap: 5px;		
	
}

#codeContainer H4{
	
	background-color: #660033;
	color: mediumVioletRed;
	
	Width: 100%;
	text-align: center;
	
}
#codeContainer PRE{
	background-color:  #cc0052;
	color: #ffffff;
}

CODE{
	white-space: pre-wrap;
	text-align: left;
}


audio{
	
	position: relative;
	bottom: 0px;
		
}

progress{
	width: 100px;
	accent-color: mediumVioletRed;
}

#bottomX:active{
	
}


/************************************ UNIVERSAL BOTTOM BAR *******************************************/


#bottomOpen{
	position: fixed;
	display: flex;
	bottom: 6vh;
	right: 0px;
	
	min-width: 60px;
	max-width: 90px;
	min-height: 40px;
	max-height: 40px;
	background: var(--SKDJ-rasberry-jam-color) /*hsla(305,43%,43%,0.8)*/;
	color: purple;
	z-index: 100;
	font-weight: 800;
}

#bodyAPP{
	position: fixed;
	display: flex;
	display: none;
	bottom: 6vh;
	left: 0px;
	background: var(--SKDJ-rasberry-jam-color);
	
	align-self: center;
	justify-content: center;
	min-height: 40px;
	max-height: 50px;
	min-width: 300px;
	max-width: 400px;
}








#titBar{
	position: relative;
	display: inline-block;
	background-color: #660033;
	color: MediumVioletRed;
	top: 0px;
		
	color: white;
	width: 100%;
	height: 25px;
	
}

#cls_btn{
	
	float: right;
	top: 0px;
	right: 0px;
	width: 40px;
	font-size: 12pt;
	font-weight: bold;
	border: 2px groove MediumVioletRed;
	background-color: Red;
	color: white;
	&:hover{
		cursor: pointer;
	}	
	
}

/*#cls_btn:hover{
	
	
	
}
*/
#min_btn{
	position: relative;
	float: right;
	top: 0px;
	width: 25px;
	background-color: black;
	color: white;
}
#min_btn:hover{
	cursor: pointer;
}


#bugReport{
	
	position: relative;
	
	top: 0px;
	right: 0px;
	
	width: 100%;
	height: 25px;
	
	background-color:  #cc0099;
	color: white;
}

#bottomX{
	


}



#bottomCaret{

}