* {
	font-family: Inconsolata, monospace;
	outline: none !important;
}

*::selection {
	color: #ffffff;
}

body {
	/*----- Dynamic Gradient Background ------*/
	/*overflow-y: auto;*/
	overflow: hidden;
	background-color: #000000;
	padding: 0px;
	margin: 0px;
	width: 500%;
	height: 1000%;
	padding: 0px;
	margin: 0px;
	/*----- Normal Body CSS ------*/
}

/*---- Coming Soon Text  ----*/
.comingSoon {
	margin-top: 10%;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	font-size: 70px;
	color: #ffffff;
	/*mix-blend-mode: overlay;*/
	position: relative;
	top: 0; right: 0; bottom: 0; left: 0;
}

.preloader {
	height: 300vh;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	opacity: 0.8;
	background-color: #000000;
	color: #ffffff;
	z-index: 9999;
}

.preloaderText1 {
	text-align: center;
	font-size: 50px;
	display: block;
	padding: 15% 15% 15% 15%;
}


/*----- Space connect Background -----*/
canvas {
  display: block;
  vertical-align: bottom;
}

#particles-js {
	background-image: url('../img/background/space_low_brightness.jpg');
	background-repeat: repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
}

/*----- Text on Screen -----*/
.pageTitle {
	color: #ffffff;
	/*mix-blend-mode: difference;*/
	position: relative;
	top: 0; right: 0; bottom: 0; left: 0;
	font-size: 160px;
	color: #ffffff;
	margin-top: 1%;
	margin-bottom: 1%;
}

.secondTitle {
	color: #ffffff;
	/*mix-blend-mode: overlay;*/
	position: relative;
	top: 0; right: 0; bottom: 0; left: 0;
	font-size: 35px;
	color: #ffffff;
	margin-top: 3%;
}

.bodyText {
	color: #ffffff;
	/*mix-blend-mode: overlay;*/
	position: relative;
	top: 0; right: 0; bottom: 0; left: 0;
	font-size: 23px;
	margin-left: 6%;
	margin-right: 6%;
}

.interactiveText {
	text-align: center;
	transition: all .2s ease-in-out;
	color: #ffffff;
	/*mix-blend-mode: overlay;*/
	position: relative;
	width: 50%;
	top: 0; right: 0; bottom: 0; left: 0;
	font-size: 23px;
	padding: 20px, 20px;
	margin: 0 auto;
}

.interactiveText:hover{
	transform: scale(2);
}

.button {
	outline: none;
	z-index: -1;
	color: #fc5185;
	font-size: 40px;
	outline: none;
	/*margin-top: 30%;*/
	background-color: transparent;
	border-top: solid;
	border-bottom: solid;
	border-left: none;
	border-right: none;
	/*mix-blend-mode: difference;	*/
}

.download {
	text-decoration: none;
	text-align: center;
	font-size: 40px;
	font-style: italic;
	display: block;
	color: #ffffff;
	mix-blend-mode: difference;
}

.webLink {
	text-decoration: none;
	font-style: italic;
	mix-blend-mode: difference;
	color: #ffffff;
}

.codeSegment {
	font-family: Courier, monospace;
	font-size: 19px;
	font-style: italic;
	color: #000000;
	background-color: #6d6d6d;
	border: solid 2px;
	padding: 5px;
	margin-right: 10%;
	margin-left: 10%;
}

.codeSegmentSmall {
	font-family: Courier, monospace;
	font-size: 19px;
	font-style: italic;
	color: #000000;
	background-color: #6d6d6d;
	border: solid 2px;
	padding: 5px;
	margin-right: 25%;
	margin-left: 25%;	
}

/*----- Open Menu Button ------*/
#openMenuBtn {
	margin-top: 5%;
	background-color: transparent;
	font-size: 30px;
	width: 200px;
	height: 100px;
	color: #fc5185;
	position: relative;
	border: solid 5px transparent;
	mix-blend-mode: difference;
}

#openMenuBtn:after {
	content: '';
	display: block;
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	border: solid 10px #fc5185;
	margin: -15px;
	z-index: -1;
	transition: transform 0.6s linear;
	transform: scale(0.97, 0.93);
}

#openMenuBtn:hover::after { transform: scale(1,1); }


/*----- Navigation Bar -----*/
.navbar {
	margin-top: 8%;
	height: 200px;
	background-color: transparent;
}

.navbar a {
	top: 50%;
	text-decoration: none;
	color: #ffffff;
	font-size: 50px;
	padding: 15px 15px;
}

.navbar a:hover {
	mix-blend-mode: difference;
}


/*----- Navigaton Bar for right side*/
.pageNavbar {
	float: right;
	margin-top: 0px;
	z-index: 999;
/*	border-left-style: solid;
	border-right-style: solid; */
}

.pageNavbar a {
	overflow: hidden;
	text-decoration: none;
	display: block;
	background-color: transparent;
	padding: 20px 40px 20px;
	/*margin-left: 80%;*/
	/*padding: 20px 20px;*/
	color: #ffffff;
	font-size: 50px;
}

/*----- Home Div ------*/
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
#home {
	height: 100vh;
	width: 20%;
	text-align: center;
}


/*----- Family Div -----*/
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
#family {
	height: 100vh;
	width: 20%;
	text-align: center;
}


/*----- Projects Container*/
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
#projectContainer {
	display: flex;
}


/*----- Project Page -----*/
#projectPage {
	flex: 1;
	padding: 1em;
	border-style: none;
}


/*----- Projects Div -----*/
#projects {
	height: 100vh;
	width: 20%;
	text-align: center;
}

.interactiveTextProjects {
	text-align: center;
	transition: all .2s ease-in-out;
	color: #ffffff;
	/*mix-blend-mode: overlay;*/
	position: relative;
	width: 50%;
	top: 0; right: 0; bottom: 0; left: 0;
	font-size: 23px;
	margin: 0 auto;
	padding: 20px 20px;
}

.interactiveTextProjects:hover {
	transform: scale(2);
}

/*-- Back to main Topic Button --*/
#backToMainFromWhatItIs {
	align-items: center;
	margin-top: 5%;
}

#backToMainFromHowItLooks {
	align-items: center;
	margin-top: 0.5%;
}

#backToMainFromMobileSoftware {
	align-items: center;
	margin-top: 5%;
}

#backToSubFromSoftware {
	align-items: center;
	margin-top: 5%;
}

#backToSubFromHardware {
	align-items: center;
	margin-top: 5%;
}

.btSocketBoardImage {
	overflow-x: hidden;
	align-items: center;
	mix-blend-mode: unset !important;
	height: 500px;
	width: 700px;
}

.btSocketBoardImage:hover {
	background-size: cover;
}

/*----- Projects Pages -----*/
/*----- For every new Project Page, the widht of all must be divided by 2  ------*/
/*----- For the next Page the width of ALL must be 12.5 -----*/

/*-- Socket Board --*/
#socketBoard {
	/*mix-blend-mode: overlay;*/
	height: 100vh;
	width: 20%;
	text-align: center;
}

#interactiveTextSocketBoard1 {
	margin-top: 8%;
	margin-bottom: 5%;
}

#interactiveTextSocketBoard2 {
	margin-bottom: 5%;
}

.btSocketBoardSubTopics {
	/*mix-blend-mode: overlay;*/
	overflow: hidden;
}

.slideshowBtSocketBoard {
	box-sizing: border-box;
	max-width: 1000px;
	position: relative;
	margin: auto;
}

.slideShowImage {
	display: none;
}

.slideShowPrev, .slideShowNext {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: #ffffff;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

.slideShowNext {
	right: 0;
	border-radius: 3px 0px 0px 3px;
}

.slideShowPrev:hover, .slideShowNext:hover {
	background-color: rgba(0,0,0,0.8);
}

.imageCaption {
	color: #f2f2f2;
	font-size: 20px;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	margin-bottom: 10px;
	width: 100%;
	text-align: center;
}

.circle {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.active, .circle:hover {
	background-color: #717171;
}

.imgStandard {
	padding-bottom: 5%; 
	/*transform: scale(0.5);*/
	height: 600px;
	width: 800px;
}

/*-- Astro Fighter --*/
#astroFighter {
	height: 100vh;
	width: 20%;
	text-align: center;
}

#astroFighterGame {
	width: 1200px;
	height: 700px;
	margin: auto;
}

/*Game Window Size*/
#astroFighterGame > object:nth-child(1) {
	padding-top: 5px;
	height: 100%;
	width: 100%;
}

#loadGameBtn {
	height: 100px;
	width: 200px;
	margin-top: 5%;
}

#unloadGameBtn {
	height: 100px; 
	width: 250px;
	margin-top: 2%;
	float: right;
}

/*-- Web Socket Chat --*/
#webChat {
	height: 100vh;
	width: 20%;
	text-align: center;
}

.pageArrowRight {
	height: 90px;
	width: 90px;
	transform: rotate(90deg);
	mix-blend-mode: difference;
	margin-top: 12.5%;
	float: right;
}

.pageArrowLeft {
	height: 90px;
	width: 90px;
	transform: rotate(270deg);
	mix-blend-mode: difference;
	margin-top: 12.5%; 
	float: left;
}


#openChatBtn {
	height: 100px;
	width: 300px;
	margin-top: 5%;
}

#closeChatBtn {
	height: 100px;
	width: 300px;
	margin-top: 2%;
	float: right;
	margin-right: 5%;
}

#webChatInterface {
	height: 1000px;
	width: 700px;
	margin: auto;
}

/*Chat Window Size*/
#webChatInterface > object:nth-child(1) {
	height: 100%;
	width: 100%;
	margin-left: -17%;	
}

/*--- FLARM Radar on Raspberry Pi ---*/
#flarmRadar {
	/*mix-blend-mode: overlay;*/
	height: 10vh;
	width: 20%;
	text-align: center;
}

/*#flarmLogoTransparent {
	height: 400px;
	width: 600px;
	text-align: center;
	margin-top: 5%;
}
*/

#backToMainFromRequiredSoftware {
	margin-top: 5%; 
}

#backToSubFromInstallation {
	margin-top: 5%;
}

/* --- plaecholderDiv ---*/
.plaecholderSizeHeight92px {
	height: 92px;
}



/*---- Responsive ----*/

/*At screen size < 1000px*/
@media only screen and (max-width: 1000px) {
	.pageTitle {
		transform: scale(0.75);
	}

	.secondTitle {
		transform: scale(0.75);
	}

	.interactiveTextProjects {
		padding: 10px 10px;
		margin: 0 auto;
	}

	.interactiveTextProjects:hover {
		transform: scale(1.2);
	}

	.pageNavbar a {
		transform: scale(0.75);
		padding: 0;
	}
}

/*At screen size < 615px*/
@media only screen and (max-width: 615px) {
	.pageTitle {
		transform: scale(0.75);
	}

	.interactiveTextProjects {
		text-align: left;
	}
}