:root{
	--font-primary: 'Fugaz One', cursive;
	--font-main: 'Roboto', sans-serif;

	--font-secondary: 
}

.font-primary{
	font-family: var(--font-primary);
}

.font-secondary{
	font-family: var(--font-main);
}

body, html{
	box-sizing: border-box;
	background-image: radial-gradient(#006400, #003900);
	height:100%;
	width:100%;
	margin:0;
	position:relative;
	color:white;
	font-family: var(--font-main);
	overflow:scroll;
}

h1, h2{
	font-family: var(--font-primary);
}

.container{
	height:100%;
	width:100%;
	display:flex;
	flex-flow:row nowrap;
	box-sizing:border-box;
}

/* user is asked to turn device when in portrait orientation */

.turnDevice{
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	flex-flow:column nowrap;
	justify-content:center;
	align-items:center;
	background-image:url("../img/pattern5.png");
	background-image: url("../img/pattern5.png"), radial-gradient(#eeeeee, #ffffff);
	color:black;
	font-size:1.3rem;
	z-index:5;
	display:none;
	text-align:center;
}

.turnDevice div {
	padding:20px;
}



/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) {
  
	/* #region 2nd level containers (children of .container) */
	/************************** 2nd level containers */

	sidebar {
		background-image:url("../img/pattern5.png");
		background-image: url("../img/pattern5.png"), linear-gradient(#eeeeee, #ffffff); /* W3C */
		/* text-align:right; */
		width:20%;
		display:flex;
		flex-flow:column nowrap;
		justify-content:flex-start;
		color:black;
		padding:3%;
		box-sizing:border-box;
		position:fixed;
		height:100%;
	}

	/* menu is also a second level container (see menu region) */

	.gameContainer{
		position:relative;
		display:flex;
		flex-flow:column nowrap;
		/* justify-content:space-around; */
		align-items:center;
		width:80%;
		margin-left:20%;
		/* padding:0 2% 0 2%; */
		box-sizing:border-box;
		/* margin-top:20px; */
	}

	/* is displayed when the result popup is shown (disables the game) */
	.gameContainerOverlay{
		position:absolute;
		width:100%;
		height:100%;
		z-index:2;
		background-color: rgba(0, 0, 0, 0.5);
		display:none;
	}

	footer {
		margin:30px;
		color:green;
	}

	/* #endregion */


	/* #region Menu */

	.menu {
		/* background-image: linear-gradient(navy, navy); */
		background-color:#eeeeee;
		position:fixed;
		top:0%;
		left:20%;
		z-index:6;
		width:40%;
		height:100%;
		flex-flow:column nowrap;
		display:none;
		z-index:5;
		box-sizing:border-box;
		color:black;
	}

	/* exit button  */
	.menu button {
		align-self:flex-end;
		font-size:1.5rem;
		border:none;
		background-color:transparent;
		margin:10px;
	}

	.menu button:hover{
		cursor:pointer;
	}

	.menu h2{
		margin-top:5%;
		margin-left:5%;
		color:#999999;
	}

	.menu .content{
		overflow:scroll;
		height:70%;
		padding:5%;
		padding-top:0;
	}

	.menu-winningCombos .content{
		padding:0;
	}

	.menu-winningCombos .content p {
		margin-top:-5%;
	}

	/* winning combos menu */
	.comboContainer {
		padding:5%;
		border-top: 1px solid black;
	}

	.comboContainer h2{
		margin-top:-10px;
	}

	.comboContainer:nth-of-type(2n + 1){
		/* background-color:rgb(96,96,96); */
	}

	.combo{
		display:flex;
		flex-flow:row nowrap;
	}

	.combo-card{
		height:64.8px;
		width:46.4px;
		margin:3px;
		border-radius:2px;
		box-shadow: 2px 2px 3px #000000;
	}



	/* #endregion */

	/* #region Sidebar Nav */
	/************************** Sidebar Nav */

	/* header is the title and icon together */
	.header{
		display:flex;
		flex-flow:row nowrap;
		justify-content:space-between;
	}
	
	
	.title{
		/* text-shadow: 2px 2px 8px #000000; */
		margin-bottom:30px;
		margin-top:30px;
	}

	/* nav-items */
	sidebar > p{
		/* text-transform:uppercase; */
		background-image: linear-gradient(to right, white , transparent);
		padding:3%;
		color:grey;
	}

	sidebar > p:hover{
		color:green;
		cursor: pointer;
	}

	.sidebarNavSelected{
		color:yellow;
	}

	/* menu pops out when nav-item is clicked */
	
	/* #endregion */

	/* #region Game Container */
	/************************** Game Container */

	/* control panel on top of page */
	.controls{
		display:flex;
		width:90%;
		flex-flow:row nowrap;
		justify-content:flex-end;
		margin-top:2%;
	}

	.controls div, .controls button {
		text-align:center;
		padding:0;
		border:1px solid white;
		margin:10px;
		width:100px;
		background-color:transparent;
		color:white;
		border-radius:3px;
		font-family: var(--font-primary);
	}

	.controls p {
		margin:1px;
		padding:1px;
	}

	/* to create the line in the middle of the control box */
	.controls * p:first-child{
		border-bottom:1px solid white;
	}

	/* to push the first control box to the right */
	.controls div:first-child {
		margin-right:auto;
	}

	#btnPeek, #btnSubmit{
		cursor:pointer;
		font-size:1.3rem;
	}


	/* Cards Hand & Deck */

	/* Deck */
	.deckContainer{
		display:flex;
		flex-flow: row wrap;
		align-items:center;
		justify-content:center;
		width:100%;
		margin-top:2%;
	}

	.deckCover{
		transform:rotate(90deg);
		margin-bottom:10%;
		background-image:url('../img/card_faces/card_back_darkBlue.svg');	
	}

	/* Hand */
	.handContainer{
		display:flex;
		flex-flow: column wrap;
		align-items:center;
		justify-content:center;
		width:90%;
	}
	
	.hand{
		width:100%;
		display:flex;
		flex-flow:row nowrap;
		justify-content:space-around;
	}
	
	.card {
		height:162px;
		width:116px;
		background-size: cover;
		position:relative;
		border-radius:5px;
		box-shadow: 2px 2px 4px #000000;
	}

	/* when a card is clicked it moves up  */
	.cardSelected{
		top:-80px;
	}

	.playingCard:hover, .deckCover:hover{
		cursor: pointer;
	}

	/* Result Popup after each hand */


	.discardedPeek{
		background-image: radial-gradient(#FF0000, rgb(206, 20, 20));
		position:absolute;
		max-width:600px;
    	margin:auto;
		z-index:3;
		flex-flow:column nowrap;
		justify-content:center;
		align-items:center;
		border-radius:10px;
		display:none;
		margin-top:10%;
		min-width:200px;
	}

	.discardedCardsContainer{
		margin:10px;
		padding:30px;
		display:flex;
		flex-flow:row wrap;
		overflow:scroll;
		align-items:center;
		justify-content:center;
		max-height:600px;

	}

	.discardedCardsContainer .card{
		margin-right:-30px;
		height:97.2px;
		width:69.6px;
	}


	/* Result Popup after each hand */
	.resultPopup, .gameOverPopup {
		background-image: radial-gradient(#FF0000, rgb(206, 20, 20));
		position:absolute;
    	margin:auto;
		z-index:3;
		padding:20px;
		flex-flow:column nowrap;
		justify-content:center;
		align-items:center;
		font-size:30px;
		color:white;
		border-radius:10px;
		display:none;
		margin-top:20%;
		min-width:200px;
	}

/* buttons are created with innerhtml in js */
	.btn-popup{
		margin:10px;
		background-color:red;
		color:white;
		border:none;
		box-shadow: 1px 1px 3px #000000;
		padding:5px;
		border-radius:2px;
	}

	.btn-popup:hover{
		cursor:pointer;
	}


	/* #endregion */


}

@media screen and (orientation:portrait) { 
	.turnDevice{
		display:flex;
	}
}