
// Define Colors:
$heavy: #272932;
$dark: #3f4040;
$red-orange: #f94e3f;
$red: #ff4e50;
$dark-purple: #34314c;
$bright-blue: #00dffc;
$dark-blue: #274555;
$gold: #ffc952;
$pink: #ff7473;
$mint: #67D5B5;
$tan: #fff1b9;
$white: #FFFFF2;

// Define Fonts:
$Raleway: 'Raleway', sans-serif;
$Cormorant: 'Cormorant Garamond', serif;

// Styling:
body {
	background: rgb(35,35,35);
  padding: 0;
  margin: 0;
}

.pageWrapper {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;

}

.aboutScreen-appear {
  opacity: 0.01;
}
.aboutScreen-appear.aboutScreen-appear-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.aboutScreen-enter {
  opacity: 0.01;
}
.aboutScreen-enter.aboutScreen-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.aboutScreen-leave {
  opacity: 1;
}
.aboutScreen-leave.aboutScreen-leave-active {
  opacity: 0.01;
  transition: opacity 1000ms ease-in;
}

.about {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	z-index: 5;
	background: linear-gradient(to bottom right, rgb(15, 20, 25), rgb(34, 20, 22));
	.aboutContainer {
		padding-top: 15px;
		padding-left: 50px;
		padding-right: 150px;
		height: 600px;
		h1 {
			font-family: $Raleway;
			color: $red-orange;
			font-size: 40px;
		}
		h1 a, h1 a:visited {
			color: $red-orange;
			text-decoration: none;
		}
		h1 a:hover {
			color: $white;
			text-decoration: underline;
		}
		.content {
			
			p {
				font-family: $Cormorant;
				font-size: 25px;
				color: $red;
			}
			.challenges {
				display: flex;
				flex-direction: row;
				img {
					width: 100px;
					height: 100px;
					margin-right: 25px;
					border: 1px solid rgba(15,15,15,1);
				}
				img:hover {
					border: 1px solid rgba(250,250,250,0.5);
				}
			}
			.challengeNames {
				color: #FF4A40;
				margin-top: 1px;
			}
			.fccLogo {
				width: 125px;
				height: 125px;
				border-radius: 50%;
				margin-left: 50px;
				margin-top: -5px;
				border: 2px solid rgba(0,0,0,0);
			}
			.fccLogo:hover {
				cursor: pointer;
				border: 2px solid $bright-blue;
			}
		}
	}
}



.header {
	position: fixed;
	top: 0;
	left: 0;
	height: 50px;
	width: 100%;
	background: #19281E;
	border-bottom: 1px solid $mint;
	display: flex;
	justify-content: center;
	align-items: center;
	#headerSpacer {
		height: 0;
	}
	p {
		font-family: $Raleway;
		color: $white;
		font-size: 22px;
	}
}

.gameWrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin: 50px 0 0 0;
	padding: 0;
	.sideBar {
		min-width: 300px;
		min-height: 625px;
		height: calc(100vh - 50px);
		margin: 0;
		background: $heavy;
		border-right: 1px solid $mint;
		.container {
			p {
				font-family: $Cormorant;
				text-align: left;
			}
			.title {
				text-align: center;
				font-size: 32px;
				margin-top: 3px;
				margin-bottom: 6px;
				color: $bright-blue !important;
				text-decoration: underline;
			}
			.stat {
				font-size: 20px;
				padding-left: 30px;
				margin-top: 0px;
				margin-bottom: 5px;
				font-family: $Raleway;
			}
			.certTitle {
				margin-top: 7px;
			}
			.certFlex {
				display: flex;
				justify-content: center;
			}
			.certList {
				margin-top: 2px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				width: 250px;
				padding-top: 5px;
				padding-bottom: 2px;
				.certContainer {
					img {
						margin-left: 3px;
						margin-right: 3px;
					}
				}
			}
			.skillsTitle {
				margin-top: 7px;
			}
			.skillsFlex {
				display: flex;
				justify-content: center;
				margin-top: 8px;
			}
			.skillsList {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				width: 250px;
				padding-top: 4px;
				margin-top: 0px;
        margin-bottom: 15px;
				img {
					margin-left: 2px;
					margin-right: 2px;
				}
			}
			.soundContainer {
        position: relative;
        margin-top: 15px;
				display: flex;
				justify-content: center;
				.soundControl {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 200px;
					height: 50px;
					border: 1px solid rgba(150,150,150,0.45);
					border-radius: 2px;
					p {
						font-family: $Raleway;
						font-size: 25px;
					}
				}
				.soundControl:hover {
					cursor: pointer;
					border: 1px solid $mint;
				}
			}
		}
	}

	.game {
		width: 1100px;
		min-height: 625px;
		height: calc(100vh - 50px);
		padding: 0;
		margin: 0;
		background: rgb(35,35,35);
		display: flex;
		justify-content: center;
		align-items: center;
		.map {
			width: 1000px;
			height: 600px;
			margin: 15px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			overflow: hidden;
			border: 1px solid $bright-blue;
			background: linear-gradient(#47327C, #1C2D63);
			.gridItem {
				background-size: cover;
			}
		}
	}
}

.headerChange-enter {
  transition: transform 1s ease-in-out;
  transform: translate(1000px, 0);
}
.headerChange-enter.headerChange-enter-active {
  transform: translate(0, 0);
}
.headerChange-leave {
	display: none;
  opacity: 1;  
}
.headerChange-leave.headerChange-leave-active {
  opacity: 0.01;
  transition: opacity 10ms ease-in;
}

.replayPanel {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	padding: 0;
	margin: 0;
	z-index: 5;
	background: rgba(25,25,25,0.70);
	display: flex;
	justify-content: center;
	align-items: center;
	color: $red-orange;
	font-size: 65px;
	h1 {
		margin-top: -125px;
		padding: 0;
	}
	h1:hover {
		color: #F71C3F;
		cursor: pointer;
	}
}