/*
	David Cacorovski, Jeremy Thummel, Sohail Meghani
	29/10/2020
	Unit 2 Gui-Based Assignment
	This is the CSS Code for our Assignment
*/
/* ***************************Sohail Meghani 29/10/2020 10:33 AM Imported Font *****************************************/
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

/* *************************** David Cacorovski 02/11/2020 11:19 AM Imported Font *****************************************/
/* *************************** Sohail Meghani 04/11/2020 10:22 AM Imported Font Locally ***********************************/
@font-face {
font-family: "Chopsic";
src: url("../fonts/transfonter.org-20201104-144945/Chopsic.woff") format("woff")
}
/* ***************************Sohail Meghani 29/10/2020 10:12 AM Added body styles *****************************************/
/* ***************************Jeremy Thummel 2/11/2020 9:32AM added more background image styles *****************************************/
body{
	background-color: #5ed18e;
	background-image: url(../images/homePageBackground.png);
	background-size: 100%;
 	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-position: center;
}
/* ***************************Sohail Meghani 29/10/2020 10:27 AM Added h1 styles *****************************************/
h1{
	border-style: outset;
	text-align: center;
	text-shadow: 2px 2px #999999;
	font-family: 'Source Code Pro', monospace;
	background-color: #5ed18e;
	opacity: 75%;
}
/* ***************************Sohail Meghani/David Cacorovski 29/10/2020 10:34 AM Added paragraph styles *****************************************/
/* ***************************Jeremy Thummel 2/11/2020 9:35AM Added paragraph positioning styles, changed opacity to rgba, changed all colours*****************************************/
#start{
	border-style: solid;
	border-radius: 10px;
	color: white;
	text-shadow: 2px 2px #BD0707;
	text-align: center;
	font-size: 24px;
	font-family: 'Source Code Pro', monospace;
	font-weight: bold;
	background-color: rgba(0,0,0,0.5);
	margin-left: 40px;
	margin-right: 40px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-top: 10px;
}
/* ***************************Sohail Meghani 29/10/2020 10:41 AM Added h2 styles *****************************************/
/* ***************************Jeremy Thummel 2/11/2020 9:35AM Added text positioning styles, changed opacity to rgba, changed all colours*****************************************/
h2, h3{
	border-style: solid;
	border-radius: 10px;
	color: white;
	text-shadow: 2px 2px black;
	text-align: center;
	font-size: 32px;
	font-family: 'Source Code Pro', monospace;
	font-weight: bold;
	background-color: rgba(189,7,7,0.5);
	margin-right: 40%;
	margin-left: 40%;
	padding-bottom: 5px;

}
/* ***************************Sohail Meghani 29/10/2020 10:57 AM Added styles for description class *****************************************/
/* ***************************Jeremy Thummel 2/11/2020 9:55AM Added paragraph positioning styles, changed opacity to rgba, changed all colours*****************************************/
.description{
	border-style: solid;
	border-radius: 10px;
	color: white;
	text-shadow: 2px 2px #BD0707;
	text-align: center;
	font-size: 24px;
	font-family: 'Source Code Pro', monospace;
	font-weight: bold;
	background-color: rgba(0,0,0,0.5);
	margin-left: 20%;
	margin-right: 20%;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-top: 10px;
}
/* ***************************Sohail Meghani 29/10/2020 10:57 AM Added h3 styles *****************************************/
/* ***************************Jeremy Thummel 2/11/2020 9:35AM Added paragraph positioning styles, changed opacity to rgba, changed all colours*****************************************/
h3{
	border-style: solid;
	border-radius: 10px;
	color: white;
	text-shadow: 2px 2px #BD0707;
	text-align: center;
	font-size: 26px;
	font-family: 'Source Code Pro', monospace;
	font-weight: bold;
	background-color: rgba(0,0,0,0.5);
	margin-right: 40%;
	margin-left: 40%;
	padding-bottom: 5px;
}
/* ***************************David Cacorovski 29/10/2020 11:31 AM Added a styles *****************************************/
a{
	text-align: center;
	background-color: rgba(189,7,7,0.5);
  	color: white;
  	padding: 2px;
  	font-size: 16px;
  	border: 2px solid black;
  	font-family: 'Source Code Pro', monospace;
  	font-weight: bold;
  	text-shadow: 1px 1px #999999;
  	border-radius: 10px;
  	cursor: pointer;
  	display: inline-block;	
}
/* ***************************David Cacorovski 11/2/2020 9:26 AM Added styles for final game start box **************************************** */
.final {
  color: black;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}
/* ** David Cacorovski 02/11/2020 9:38 AM Added blured image before game starts got code from: https://www.w3schools.com/howto/howto_css_blurred_background.asp */
#image-final {
	/* The image used */
	background-image: url("../images/backgroundInGame.png");
	/* Add the blur effect */
	/* filter: blur(8px);
	-webkit-filter: blur(8px); */
	/* Full height */
	height: 750px;
	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-style: solid;
	border-radius: 10px;
}

/* ** Jeremy Thummel/David Cacorovski 3/11/2020 added gameStart styles */
#gameStart{
	position: absolute;
	font-family: 'Chopsic';
	top: -80%;
	left: 33%;
	color: black;
	padding: 10px;
	font-size: 40px;
	background-color: rgba(189,7,7,0.5);
	text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}
#gameStart:hover, #gameStart:focus {
	transition: 0.25s;
	background-color: #FFFFFF;
	color: red;
	text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black;

}
/* Sohail Meghani 10/11/2020 !2:15 AM Added resolution label styles */
#lblResolution{
	position: absolute;
	font-family: 'Chopsic';
	color: black;
	left: 20%;
	width: 60%;
	top: 250%;
	padding: 25px;
	display: block;
	font-size: 40px;
	background-color: rgba(189,7,7,0.5);
	text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}
/* ********Sohail Meghani/David Cacorovski 02/11/2020 10:34AM Added and implemented animation */
@keyframes fadeOut {
	from {filter: blur(8px);}
	to{ filter: blur(0px); }
}
@keyframes fadeIn{
	0% {opacity: 0; z-index: -1;}
	100% {opacity: 1; z-index: 1;}
}
@keyframes fadeOut2 {
	0% {opacity: 1; z-index: 1;}
	100% {opacity: 0; z-index: -1;}
}
/* ***************************Sohail Meghani 29/10/2020 11:11; AM Added dropdown styles *****************************************/
/* Code taken from https://www.w3schools.com/howto/howto_js_dropdown.asp */
/* ***************************Jeremy Thummel 2/11/2020 9:35AM changed colors and border styles*****************************************/
/* Dropdown Button */
.dropbtn {
  background-color: rgba(189,7,7,0.5);
  color: black;
  padding: 16px;
  font-size: 16px;
  border: 2px solid black;
  border-radius: 20%;
  cursor: pointer;
  display: inline-block;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #FFFFFF;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/* ***************************Jeremy Thummel 2/11/2020 9:05AM logo / title styles *****************************************/
#logo{
	width: 25%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	background-color: rgba(0,0,0,0.5);
	border-radius: 2em;
	border-style: outset;
	border-width: 5px;
}
/* ***************************Sohail Meghani 2/11/2020 11:27AM Added Shop Button Styles *****************************************/
/* ***************************Jeremy Thummel 3/11/2020 9:58AM Positioned Shop Button (abosulte positioning) and added aesthetic styles*****************************************/
/* ***************************Jeremy Thummel 5/11/2020 11:25AM Adjusted positioning**************************************** */
#btnShop{
	position: absolute;
	display: inline-block;
	left: 86%;
	top: 250%;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 2em;
	border-style: outset;
	border-width: 4px;

}
/* ***************************Jeremy Thummel 3/11/2020 10:02AM Added Button Shop Styles*****************************************/
#btnAttack{
	position: absolute;
	display: inline-block;
	left: 71%;
	top: 250%;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 2em;
	border-style: outset;
	border-width: 4px;
}
/* ***************************David Cacorovski 10/11/2020 5:08 PM Added Button Mage Styles*****************************************/
#btnMage{
	position: absolute;
	display: inline-block;
	left: 103%;
	top: -240%;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 2em;
	border-style: outset;
	border-width: 4px;
}
/* *************************** David Cacorovski 4/11/2020 10:55 PM Added Shop Styles*****************************************/
#btnShopBackground{
	position: absolute;
	display: inline-block;
	left: -7%;
	top: 75%;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 2em;
	border-style: outset;
	border-width: 4px;
	opacity: 0.5;

}
#btnExit{
	position: absolute;
	display: inline-block;
	left: 20%;
	top: 100%;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 3em;
	border-style: outset;
	border-width: 4px;

}
/* Enemy Styles */
/* ***************************Jeremy Thummel 3/11/2020 10:56AM Added enemy styles**************************************** */

#enemy1{
	position: absolute;
	display: inline-block;
	left: 33%;
	top: 150%;
	width: 35%;
	z-index: 1;
}

#enemy2{
	position: absolute;
	display: inline-block;
	left: 33%;
	top: 150%;
	width: 35%;
	z-index: 1;
}

#enemy3{
	position: absolute;
	display: inline-block;
	left: 33%;
	top: 150%;
	width: 35%;
	z-index: 1;
}
/* **************** Sohail Meghani 10/11/2020 12:55AM Added Shopkeeper styles ************************************************** */
#shopKeeper1, #shopKeeper2{
	position: absolute;
	display: inline-block;
	left: 33%;
	top: 110%;
	width: 35%;
	z-index: 1;
}
/* *************************** Jeremy Thummel 7/11/2020 11:40AM Added enemy boss styles **************************************** */
#enemyBoss{
	position: absolute;
	display: inline-block;
	left: 33%;
	top: 110%;
	width: 35%;
	z-index: 1;
}

#chest{
	position: absolute;
	display: inline-block;
	left: 33%;
	top: 150%;
	width: 35%;
	height: 750%;
	z-index: 1;
}

.enemyHit{
	width: 40%;
}

.enemyNoHit{
	
}
/* *************************** David Cacorovski 4/11/2020 10:15AM Added Wave, Money, And Monster Health text style **************************************** */
/* *************************** Sohail Meghani/Jeremy Thummel 4/11/2020 11:40AM Added text outlines using text-shadow **************************************** */
#wave{
	position: absolute;
	left: 43%;
	top: -40%;
	font-family: 'Chopsic';
	font-size: 50px;
	text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}
#money{
	position: absolute;
	left: -6%;
	top: -40%;
	font-family: 'Chopsic';
	font-size: 50px;;
	text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}
#monsterHealth{
	position: absolute;
	width: 50%;
	left: 60%;
	top: -40%;
	font-family: 'Chopsic';
	font-size: 50px;
	text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}
#lblShopStage{
	position: absolute;
	left: 31%;
	top: -40%;
	font-family: 'Chopsic';
	font-size: 50px;
	text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}
/* *************************** David Cacorovski 5/11/2020 3:42 PM Added weapon upgrades images **************************************** */
.upgrades{
	position: absolute;
	display: inline-block;
	left: 20%;
	background-color: rgba(255, 255, 255, 0.5);
	border-style: outset;
	border-width: 4px;
}
/* *************************** David Cacorovski 5/11/2020 4:01 PM Added weapon upgrades txt **************************************** */
.txtUpgrades{
	position: absolute;
	font-family: 'Chopsic';
	text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
	left: -6%;
}
/* ************************** Sohail Meghani 10/11/2020 1:45PM Added avatar styles */
.avatar{
	width: 15%;
	display: inline-block;
	position: relative;
	left: 27%;
	right: auto;
	background-color: rgba(0,0,0,0.5);
	border-radius: 2em;
	border-style: outset;
	border-width: 5px;
	margin-right: 20px;
}

/* ************************** Jeremy Thummel 10/11/2020 10:00PM Added more styles */
#dave{
	margin-left: -30px;
}

#pdf{
	border-style: solid;
	border-radius: 10px;
	color: white;
	text-shadow: 2px 2px black;
	text-align: center;
	font-size: 32px;
	font-family: 'Source Code Pro', monospace;
	font-weight: bold;
	background-color: rgba(189,7,7,0.5);
	margin-right: 40%;
	margin-left: 40%;
	padding-bottom: 5px;
}

#testTable{
	border-radius: 8px;
	border-style: outset;
	border-width: 8px;
}

.screenshots{
	width: 50%;
	margin-left: 25%;
	height: auto;
	display: inline-block;
	position: relative;
}