:root{
    --soft-white: hsla(0, 0%, 98%, 1);
    --soft-black: #222;
	
    --soft-red: rgb(150,40,40);
    --soft-green: rgb(40,150,40);
    --soft-blue: rgb(40,40,150);
	
    --border-rad: 0.25rem;
    --game3-adaptive-font-size: 1em;
    --game3-mine-animation: fadebackground 3s;
    --game-perc-1: 4%;
    --game-perc-2: 9%;
}

.container{
  	position: relative;
  	width: 98%;
	height: auto;
	margin: 10px auto 10px auto;
    
  	background-color: rgba(0,0,0,0.3);
	border-radius: 0.45rem;
	padding: 5px;
    
  	display: flex;
	flex-wrap: wrap;
}

.project-container{
 	background-color: hsla(0, 0%, 98%, 1);
 	min-width: 400px;
 	max-width: 700px;
 	height: 250px;
    
 	margin: 5px;
    	padding: 5px;
 	flex: 1;
    	text-align: center;
    
  	display: grid;
  	place-items: center;
}

/*
==========
Project 1
==========
*/

#target1{
	background-color:#B565FA;
}

.btn{
    	width: 110px;
   	height: 40px;
   	background: transparent;
   	margin-bottom: 70px;
   	color:var(soft-black);
	
	line-height: 14px;
   	font-size: 1rem;
  	padding: 0.75rem 1.25rem;
   	border: 2px solid #222;
   	border-radius: 0.25rem;
}
.btn:hover {
  	color: #fff;
  	background: #222;
  
}

.colour-name{
   	border-radius: 0.25rem;
   	background-color: rgba(15,15,15,0.35);
	padding: 5px;
}

/*
==================
Project 2, Counter
==================
*/

#span{
	font-size:2.7em;
}

/*
===========================
Project 3, Complex Polygons
===========================
*/

.mainTitle {
  	text-align: center;
  	margin-bottom: 0.5rem;
}

.underline {
  	height: 0.25rem;
 	width: 14rem;
  	background: hsl(205, 78%, 60%);
 	margin-left: auto;
  	margin-right: auto;
}

.info {
  	background: #fff;
  	padding: 1.5rem 2rem;
  	border-radius: 0.25rem;
  	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  	transition: var(--transition);
  	text-align: center;
  	width: 335px; 
}
.info:hover {
  	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);;
}

.shape{
    display: inline-block;
	width: 80px;
   	height: 80px;
    background-color: hsl(210, 22%, 49%);
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
   	margin-right: 25px;
}

#shapeName{
    font-size: 2rem;
    color: hsl(205, 72%, 37%);
}

#prev,
#next{
  	color: hsl(205, 90%, 76%);
  	font-size: 2rem;
  	background: transparent;
  	border-color: transparent;
  	margin: 0 0.5rem;
  	transition: var(--transition);
  	cursor: pointer;
}
#prev:hover,
#next:hover {
  	color: hsl(205, 78%, 60%);;
}

.shape-info{
    
}

.shape-line{
    display: inline-block;
    width: 170px;
    vertical-align: top ;
    
}

h5{
    display: inline-block;
    vertical-align: top;
}

/*
=======================
Project 4, project info
=======================
*/

.tab-btn {
  	padding: 1rem 0;
  	border: none;
  	text-transform: capitalize;
  	font-size: 1rem;
  	display: block;
  	background: hsl(212, 33%, 89%);;
  	cursor: pointer;
  	transition: all 0.3s linear;
  	letter-spacing: 0.25rem;
}

.btn-container {
  	width: 100%;
  	border-top-left-radius: 0.25rem;
  	border-top-right-radius: 0.25rem;
  	display: grid;
  	grid-template-columns: 1fr 1fr 1fr;
  	margin-bottom: 5px;
}

.tab-btn.active {
  	background: #fff;
}

.tab-btn:hover:not(.active) {
  	background: hsl(205, 100%, 96%);
  	color: #49a6e9;
}

#text-container{
    width: 95%;
    height: 150px;
    border-radius: 0.25rem;
    border: 2px solid #222;
	padding-left:5px;
	padding-right:5px;
    
}

#projects-title{
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: #222;
    border-bottom: 2px solid hsl(205, 78%, 60%);
}

.content {
	display: none;
	text-align:left;
}

.content.active {
  	display: block;
  
}

#target4{
    height: 245px;
    padding: 0 0 15px 0;
}

/*
============================
Games, container and styles
============================
*/

.games-master-container{
    width:98%;
    margin: 0 auto 0 auto;
    padding: 5px;
    
    background-color: var(--soft-white);
    
    border: 2px solid var(--soft-black);
    border-radius:var(--border-rad);
}

.legend-games{
    background-color: ;
    margin-right: 10px;
    border: 2px solid black;
    padding-right: 3px;
}

.game-btn {
  	padding: 1rem 0;
  	border: none;
  	text-transform: capitalize;
  	font-size: 1rem;
  	display: block;
  	background: hsl(212, 33%, 89%);
  	cursor: pointer;
  	letter-spacing: 0.25rem;
}

.game-btn-container{
  	width: 100%;
  	border-top-left-radius: 0.25rem;
  	border-top-right-radius: 0.25rem;
  	display: grid;
  	grid-template-columns: auto 1fr 1fr 1fr 1fr;
  	margin-bottom: 5px;
}

.game-btn.active {
  	background: #fff;
}

.game-btn:hover:not(.active) {
  	background: hsl(205, 100%, 96%);
  	color: #49a6e9;
}

.game-container {
	display: none;
	position: relative;
}

.game-container.active {
  	display: block;
  
}
/* 
============game 1============ 
*/
.game1{
    height:250px;
    width: auto;
    
    border: 2px solid var(--soft-black); 
    border-radius: var(--border-rad);
    
    background-image:url(pixelMountain.png), linear-gradient(to top, rgb(56, 56, 56), rgb(87, 87, 90) var(--game-perc-1), rgb(122, 120, 127) var(--game-perc-2), rgb(179, 172, 177));
    background-position: -500px -7px, -10px 0px;
    background-size: 1100px, 2000px;
    background-repeat: repeat-x;
}

#game1Hud{
    position: relative;
    top: -120px;
    left: calc(100% - 206px);
    
    border: 2px solid var(--soft-black);
    border-right: none;
    
    padding-left: 5px;
    
    display: flex;
    flex-direction: column;
	
    height: 50px;
    width: 200px;
}


.player{
    position: relative;
    height: 104px;
    width: 60px;
    
    left: 50px;
    top: 147px;
    
    background: url("pixelDino3.png") no-repeat;
    background-size: 85px;
    background-position: -14px 31px;
}

.playerState1{
    background: url("pixelDino0.png") no-repeat ;
    background-size: 85px;
    background-position: -14px 30px;
}

.player-jump{
    animation: jump 0.5s linear;
}

.box{
    width: 30px;
    height: 31px;
    
    position: relative;
    top:115px;
    left: calc(100% - 40px);
    
    background: url("pixelSpike.png");
    background-size: 60px; 
    background-position: -11px 49px;
    
    animation: none;
}

/*
============ Game 2 ============
*/

#game2Btns{
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    
    width: 40%;
    margin:0 auto 0 auto;
    
}

#game2BtnLeft,#game2BtnRight,#game2BtnShoot{
    background: rgb(36, 36, 36);
    color: white;
    height: 60px;
    border-radius: var(--border-rad);
    padding-left: 6px;
    
    line-height: 0;
    font-size: 3rem;
    text-align: center;
}

#game2BtnLeft:hover,#game2BtnRight:hover,#game2BtnShoot:hover{
    color: lightgrey;
    background: rgb(67, 67, 67);
}

.game2MainGridSpace{
    background: #ccc;
    margin: auto auto 10px auto;
    
    width: 90vmin;
    height: 90vmin;
    
    border: 2px solid var(--soft-black);
	
    display: grid;
    grid-template-columns: repeat(21,1fr);
    grid-template-rows: repeat(21,1fr);
}

#overlay{
  position: absolute;
  display: ;
  width: 85vmin;
  height: ;
  border: 2px solid var(--soft-black);
  top: 30%;
  left: 0;
  right: 0;
  margin: auto;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer; 
}

#game2controls{
    color: white;
    font-size: 0.7rem;
    text-align: center;
}

#game2Commands{
    display: grid;
}

#game2WinLoss{
    color: var(--soft-white);
    text-align: center;
    border: 2px solid black;
    margin: 3px;
}

#game2PlayBtn{
    background: none;
    margin: 3px;
    border: 2px solid black;
}

#game2PlayBtn:hover{
    background: grey;
    margin: 3px;
    border: 2px solid black;
}

.player2{
    background: rgb(40,40,150);
    border: 2px solid var(--soft-black);
}

.enemy{
    background: rgb(150,40,40);
    border: 2px solid var(--soft-black);
}

.playerBullet{
    background: rgb(80,150,80);
    border: 2px solid var(--soft-black);
}

.bullet{
    background: rgb(80,80,80);
    border: 2px solid var(--soft-black);
}

/*
============ Game 3 ==============
*/

#game3SelectionScreen{
    display: flex;
    justify-content: center;
}

#game3SelectionScreen > *{
    padding: 5px;
    margin: 4px;
    word-wrap:break;
    border: 2px solid var(--soft-black);
    border-radius: var(--border-rad)
}

#game3Hud{
    width: 200px;
}

#game3Hud > h1{
    text-decoration: underline;
    text-align: center;
    margin-bottom: 10px;
}

#game3Input{
    width: 97%;
}

#game3StartButton{
    width: 100%;
    height: 30px;
    background: lightgray;
    
    border: 2px solid var(--soft-black);
    border-radius: var(--border-rad);
    
    margin-top: 10px;
}

#game3StartButton:hover{
	background: rgb(190,190,190);
}

#errorDisplayField{
    text-align: center;
    color: var(--soft-red);
    word-wrap: break;
    margin-top: 5px;
    height: auto;
}

#game3MainPlaySpace{
	display: none;   
}

#game3MainPlaySpace > *{
    height: auto;
    margin: 5px;
    padding: 5px;
    
    border: 2px solid var(--soft-black);
    border-radius: var(--border-rad);
    
    text-align: center;
}

#game3Controls{
    display: flex;
    flex-direction: column;
    width: 20%;
    margin-left: auto;
}

#game3GridSpace{
    width: 65%;
    padding: 0;
    margin-right: auto;
}

#game3Controls > h3{
	text-decoration: underline;
	margin-bottom: 10px;
	margin-top: 10px;
}

#game3Controls > p{
    font-size: 0.7em;
}

#game3Controls > span{
    font-size: 0.75rem;
    color: darkblue;
    margin: 10px;
    text-align: left;
}

#game3Grid{
    margin: 2px auto 2px auto;
	width: 62vw;
   	height: 62vw;
	display:grid;
}

#game3InfoBar{
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--soft-black);
    background: hsl(212, 33%, 89%);
}

#game3Stats{
    margin: 0 auto 0 10px;
}

#game3Stats > *{
    margin: 10px;
    padding: 3px;
    
    background: hsl(216, 48%, 92%);
	border: 2px solid var(--soft-black);
    border-radius: var(--border-rad);
}

#timer{
    padding: 5px;
    margin-right: 5px;
    border: 3px double grey;
}

#game3Btns{
    display: flex;
    margin-right: 10px;
   	width: 130px;
    height: 70%;
}

#flagBtn{
    width: 40px;
    height: 100%;
    margin-right: 10px;
    border: none;
 
    background: url("redFlag.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#game3EndBtn{
    padding:0 10px 0 10px;
    border: 2px solid var(--soft-black);
    border-radius: var(--border-rad);
    font-size: 1.3em;
    background: hsl(216, 48%, 92%);
}

#game3EndBtn:hover{
    background: rgb(192, 255, 192);
}

.minesweeperTile{
    background: rgb(203, 208, 203);
    color: blue;
    font-size: var(--game3-adaptive-font-size);
    text-align: center;
    line-height: 175%;
    border: 2px solid rgb(133, 136, 133);
}

.landTile{
    background-color: var(--soft-green);
    border: 2px solid var(--soft-black);
}

.emptyTile{
    background: rgb(217, 235, 232);
    border: 2px solid lightgray;
}

.containsFlag{
    background: url("redFlag.png"), rgb(40,150,40);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#game3ResultsAligner{
    position: absolute;
    margin-top: 250px;
    width: 65%;
}

#game3Results{
    display:none;
    margin-right: auto;
    margin-left: auto;
    width: 250px;
    
    color: whitesmoke;
    border: 2px solid var(--soft-black);
    
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
}

#game3ReturnBtn{
    padding: 2px;
    border: none;
    width: 100%;
    margin-top: 10px;
    font-size: 1rem;
    background: hsl(214, 13%, 75%);
    letter-spacing: 0.15rem;
}


/*
============ Game 4 ============
*/

#game4AimSpace{
    diplay: none;
    height: 30em;
    width: auto;
    
    Background:rgba(40,40,150,0.1);
    border: 2px solid black;
    padding: 10px;
}

#passiveText{
    position: absolute;
    text-align: center ;
    font-size: 5em;
    color: rgba(0,0,50,0.3);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#decoyAimSpace{
    display: none;
    height: 30em;
    width: auto;
    
    background:rgba(40,40,150,0.1);
    border: 2px dotted black;
    padding: 10px;
    font-size: 0.5em;
}

#game4StartScreen{
    display: block;
    
    height: 30em;
    width: auto;
    
    background:rgba(40,40,150,0.1);
    border: 2px dashed  black;
    padding: 10px;
    font-size: 0.5em;
}

#game4StartBtn{
    border: 2px solid var(--soft-black);
    border-radius: 0.5em;
    
    background-color: var(--soft-white);
    font-size: 1.5em;
    height: 100px;
    width: 250px;
}

#game4StartBtn:hover{
    border: 2px dashed black;
}

.target{
    background: url("target1.png");
    background-size: 100px;
    height: 100px;
    width: 100px;
	
   position:absolute;
}

/*
======================
Animations- All games
======================
*/



@keyframes boxmove{
    0% {left: calc(100% - 40px);}
    100% {left: 0;}
}

@keyframes jump{
    0%{top: 140px;}
    30%{top: 40px;}
    70%{top: 40px;}
    100%{top: 140px;}
}

@keyframes reveal{
    0%{background-color:var(--soft-green);}
    50%{background-color:red; border: 2px solid var(--soft-black);}
    100%{background-color:var(--soft-green);}
}

@keyframes reveal{
    0% {background-color:var(--soft-green);}
    10% {background-color:rgb(171, 55, 55); border: 2px dotted red;}
    90% {background-color:rgb(171, 55, 55); border: 2px dotted red;}
    100% {background-color:var(--soft-green);}
}

@keyframes revealLocation{
    0% {border: 2px dotted grey;}
    10% {border: 2px dotted red;}
    90% {border: 2px dotted red;}
    100% {border: 2px dotted grey;}
}

@keyframes fadebackground {
   from {background-color: white;}
   to {background-color: var(--soft-green)}
}

*{
    color:var(soft-black);
}