/* the scroll button */

::-webkit-scrollbar {width:5px;
					height:10px;
					border-radius:50%;
					padding:1.5px;
					}

::-webkit-scrollbar-thumb {background-color:black}

::-webkit-scrollbar-thumb:hover {background-color:navy}

::-webkit-scrollbar-track {background-color:cornflowerblue}

::-webkit-scrollbar-piece {background-color:navy;}

::-webkit-scrollbar-corner {background-color:teal}

/*font packages*/

/* link modification*/




a,a:hover ,a:focus,a:active,a:active {color:unset;
	text-decoration:unset;}		
			



* {box-sizing:border-box}

@font-face {font-family:cinzel;
			src:url(fonts/Cinzel.ttf)}
			
			
@font-face {font-family:ral3;
			src:url(fonts/Raleway-Bold.ttf)}
			
			
@font-face {font-family:shadow;
			src:url(fonts/ShadowsIntoLight.ttf)}
			
			
			
					
@font-face {font-family:libre;
			src:url(fonts/libre.ttf)}
			
			
			
			
			
@font-face {font-family:cardo;
			src:url(fonts/Cardo.ttf)}
							
@font-face {font-family:berkshire;
			src:url(fonts/Berkshire.ttf)}
			
@font-face {font-family:cookie;
			src:url(fonts/Cookie.ttf)}
			
			
@font-face {font-family:dancingScript;
			src:url(fonts/DancingScript.ttf)}
			
			

@font-face {font-family:comf;
			src:url(fonts/Comfortaa-Bold.ttf);
}

@font-face {font-family:jul;
			src:url(fonts/JuliusSansOne-Regular.ttf);
}

@font-face {font-family:ral;
			src:url(fonts/Raleway-Light.ttf);
}

@font-face {font-family:ral2;
			src:url(fonts/Raleway-Thin.ttf);
}

@font-face {
font-family:alg;
src:url(fonts/Alegreya-Italic.ttf)
}

@font-face {
font-family:tangerine;
src:url(fonts/Tangerine-Bold.ttf)
}

@font-face {
font-family:code39;
src:url(fonts/BarCode39.ttf)
}


/*font packages*/




/*colors*/
.bggreen {background-color:green;color:white;}
.bgsienna {background-color:sienna;color:white;}
.bgteal {background-color:teal;color:white;}
.bggrey {background-color:grey;color:white;}
.bgnavy {background-color:navy;color:white;}
.bgwheat {background-color:wheat;color:white;}
.bgcream {background-color:navajowhite;color:white;}
.bgtomato {background-color:tomato;color:white;}
.bgmagenta {background-color:magenta;color:white;}
.bghotpink {background-color:hotpink;color:white;}
.bggold {background-color:gold;color:white;}
.bgyellow {background-color:yellow;color:white;}
.bgdarkslategrey {background-color:darkslategrey;color:white;}

.bgblack {background-color:black;color:white;}


/*colors*/
.bgwhite {background-color:white;color:black;}

/*flexible displays */




.flex_standard {
	display:flex;
	justify-content:center;
	align-items:center;
}

.flex_seperate {
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.flex_standard_end {
	display:flex;
	justify-content:flex-end;
	align-items:center;
}

.flex_standard_start {
	
	display:flex;
	justify-content:flex-start;
	align-items:center;
	
}

.flex_minor {
	
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:100%;
	
}

.flex_minor_end {
	
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-end;
	
}

.flex_minor_start {
	
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	
}

/* unique display elements such as display areas */
.round {border-radius:50%;
		display:flex;
		align-items:center;
		justify-content:center;}

		
.border {border:1px solid black}
.paddin {padding:20px}
.paddin_medium {padding:16px}
.paddin_small {padding:8px}

.hide {display:none;}

.abs {position:absolute;}
.fix {position:fixed;}

.abs_t_r {position:absolute;
				top:0;
				right:0;
				}
				
.abs_t_l {position:absolute;
				top:0;
				left:0;
				}
				
				
				
.abs_100 {position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;}

.rel_100 {position:relative;
			top:0;
			left:0;
			width:100%;
			height:100%;}			
			
.fix_100 {position:fixed;
			top:0;
			left:0;
			width:100%;
			height:100%;}

			
			
			
.rel {position:relative}

*{
	box-sizing:border-box;
	
	
}


.bg_img {
	
	background-size:cover;
}

.bg_img2{
	
	background-size:cover;
	background-attachment:fixed;
	
	
}


.button {padding:5px;
		min-width:150px;
		background-color:teal;
		color:white;
		margin-left:4px}		
		

.button_v2 {padding:5px;
		min-width:150px;
		background-color:;
		color:white;
		margin-left:4px;}		
		
.displayArea {
	background-color:white;
	height:100%;
	overflow:hidden;
	
}

.sep {width:15px;
		height:15px}

.pnt {cursor:pointer}
		
.shad {box-shadow:0px 0px 4px 0px rgba(0,0,0,0.4)}

.round_btn {height:30px;
			width:30px;
			font-size:20px;
			background-color:white;
			color:black;
			border:1px solid black;}
			
			
.curve {border-radius:3.5px}			
			
.reset {border:unset;
		margin:unset;
		padding:unset;
		background-color:unset;}

.fade {opacity:0}

.ovr {overflow:auto}	
		
._100 {width:100%;}		
		
.ten {height:10%;
	width:100%;}		
	
.seventy {height:70%;
		width:100%;}	

.sixty {height:60%;
		width:100%;}	


		
.ninety {height:90%;
		width:100%;}	
		
.eighty {height:80%;
		width:100%;}		
		
.twenty {height:20%;
		width:100%;}	

.fifty {height:50%;
		width:100%;}

._fifty {width:50%;}
._full {width:100%;}
.marg_l {margin-left:4px}	
.marg_r {margin-left:4px}	
.trans {transition:0.5s;}
.hov_sgreen:hover {background-color:seagreen;
color:white}
.hov_crimson:hover {background-color:crimson;
color:white}
.wrap {flex-wrap:wrap}
.x16 {font-size:16px}		
.x20 {font-size:20px}		
.x25 {font-size:25px}		
.x30 {font-size:30px}		
.x12 {font-size:12px;}
.x9 {font-size:9px;}
.p5 {padding:5px;}
.p8 {padding:8px;}
.p10 {padding:10px;}
.p20 {padding:20px;}
		
.center {text-align:center;}		
.left {text-align:left;}		
.right {text-align:right;}		
.line_above {border-top:1px solid white}
.line_below {border-bottom:1px solid white}
/*animations*/

@keyframes bottom_top_reveal {
	
	0% {transform:translateY(130%)}
	
	100% {transform:translateX(0%)}
	
	
}