/* k r a m e r */
:root{
	--text-primary: lightgrey; 
	--snake-green: rgb(0, 153, 51); 
	--armor-orange: rgb(222, 134, 27);
	--bird-yellow: rgb(187, 174, 0);
	--bug-green: rgb(84, 185, 72); 
	--climb-brown: rgb(143, 86, 59); 
	--diag-green: rgb(42, 187, 29);
	--dive-blue: rgb(158, 158, 238);
	--fish-blue: rgb(75, 93, 203);
	--gaze-yellow: rgb(250, 250, 210); 
	--health-pink: rgb(212, 83, 162); 
	--item-green: rgb(55, 148, 110);
	--lovely-purple: rgb(112, 51, 168); 
	--magic-blue: rgb(0, 153, 204); 
	--money-green: rgb(69,104,35); 
	--monster-red: rgb(170, 33, 33);
	--npc-purple: rgb(169, 106, 234);
	--strength-red: rgb(212, 53, 53);
	--xp-gold: rgb(214, 180, 26); 
	font-size: 14px;
}

#carrot{
	position: fixed;
	bottom: 0;
	right: 0;
	margin: .5rem .5rem;
}

::-webkit-scrollbar{display: none;}

body{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: rgb(0,0,0);
	font-family: 'Source Code Pro', monospace;
	/* font-size: 14px; */
	scroll-behavior: smooth;
}

.actLog{
	position: fixed;
	right: 0;
	bottom: 0;
	width: max-content;
	height: 5rem;
	border: solid 2px whitesmoke;
	border-radius: 11px;
	overflow-y: scroll;
	padding-top: .4em 0;
	scrollbar-width: none;
	scroll-behavior: smooth;
	padding: .25em;
}

.logText{
	font-size: .85rem;
	margin: 0;
}
.logI{
	vertical-align: -30%;
}
#xplog{
	color: var(--xp-gold);
}

.overlayBack{
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(56,222,70,.1);
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1; 
}

/* exit & help button animation */
#exitButt{
	transition: transform 1.2s; 
}
#exitButt:hover{
	transform: rotate(270deg); 
}

#helpButt{
	transition: transform 1.2s;
	width: 1.69em;
}
#helpButt:hover{
	transform: rotate(30deg); 
}
#helpButt:focus{
	outline: 1.69px dotted var(--snake-green);
	-moz-outline-radius: 4px;
}

/* sytle for help menu */
.helpMenu{
background-color: black;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 50vw;
height: auto;
position: relative;
padding: 3%;
margin: auto auto auto auto; 
box-shadow: 4px 6px var(--snake-green);	
border: solid;
border-color: white;
border-radius: 8px;
}

.helpTable{
	position: relative;
	border: .3em solid darkgray;
	border-collapse: collapse;
	font-size: .9em;
	width: 35%;
	text-align: center;

}

/* style for item cards */
.itemInfo{
	background-color: rgb(0,0,0);
	display: block;	
	width: 12vw;
	height: auto;
	margin: auto auto auto auto; 
	border: solid;
	border-color: var(--text-primary);
	font-family: 'Source Code Pro', monospace;
	z-index: 1;
}
.itemO{
	display: block;
	align-content: center;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3%; 
	margin-bottom: 2%;
	text-align: center;
}
#itxt{
	text-decoration: underline;
	font-size: 14px;
	text-decoration-color: white;
	color: var(--text-primary);
	margin-left: 3%;
	margin-right: 3%;
}
#mB{
	color: var(--magic-blue);
}
#sB{
	color: var(--strength-red); 
}
#aB{
	color: var(--armor-orange);
}
#aC{
	color: var(--snake-green); 
}
#qty,#uses{
	color: var(--text-primary);
}
#itxt2{
	color: var(--text-primary);
	font-size: 12px;
	border: solid;
	border-width: thin;
	padding: 2%;
	margin: auto 5% 5% 5%; 
	line-height: 1.4;
}

/* talking overlay */
.dialogBox{
	position: relative;
	display: flex;
	flex-direction: column;
	border: 2px solid var(--diag-green);
	width: 23vw;
	border-radius: 10px;
	min-height: 10vh;
	background-color: black;
	margin: auto auto auto auto;
	text-align: center;
	color: var(--text-primary);
}
#cName{
	margin: .5em;
	font-size: 1.125em;
}
#cfText{
	font-size: .85em;
	margin: .5em;
	text-align: center;
}
#characterpicture{
	width: 10em;
	height: 10em;
	padding: .5em;
	align-self: center;
}
.dialogAct{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin: .5em;
}
.diagOpt{
	display: none;
}

/* game display */
.gameGrid{
	display: grid;
	width: 90vw;
	height: 90vh;
	padding: 13px; 
	grid-template-areas:
		'head head head'
		'menu1 game menu2';
	column-gap: 5em;
	align-content: center;
	justify-content: center;
	color: var(--text-primary);
}

.head{
	grid-area: head;
	position: relative;
	width: auto;
	height: 5vh;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.menu1{
	grid-area: menu1;
	width: 20vw;
	height: 69vh;
	flex-direction: column;
	align-items: center;
	font-size: 12px;
	opacity: .5;
	transition: opacity cubic-bezier(.49,.56,.1,1.28) 1s;
	text-align: center;
}

.menu1:hover{
	opacity: 1;
}

#playerN{
	margin-top: 1.4em;
}

.playerI{
	text-decoration: underline; 
	text-decoration-color: var(--xp-gold);
	margin: .2em auto .2em auto;
}

.statsC{
	width: 85%;
	height: 75%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-content: center;		
	align-items: center;
	grid-template-columns: 50% 50%;
	text-align: center;
}

.tableI{
	height: 1.6em;
	display: inline-block;
	margin: auto 1.0em auto auto;
	vertical-align: -30%;
}
.tableC{
	display: inline-flex;
}

.statsH{
	color: var(--health-pink)
}
.healthBar{
	height: .2em;
	width: 75%;
	position: relative;
	margin: auto auto auto auto;
	border: solid .1em whitesmoke;
	border-top: none;
	border-right: none;
}
.healthProgress{
	background-color: var(--health-pink);
	height: 100%;
	width: 0%;
}
.statsL{
	
	color: var(--xp-gold);
}
.levelBar{
	height: .2em;
	width: 75%;
	position: relative;
	margin: auto auto auto auto;
	border: solid .1em whitesmoke;
	border-top: none;
	border-right: none;
}
.levelProgress{
	background-color: var(--xp-gold);
	width: 0%;
	max-width: 100%;
	height: 100%;
}
.statsS{
	color: var(--strength-red);
}
.statsM{
	color: var(--magic-blue);
}
.statsA{
	color: var(--armor-orange);
}
.statsSnv{
	color: var(--snake-green);
}
.statsT, tr{
	border-bottom: solid;
	border-collapse: collapse;
	border-width: 1px;
	border-color: rgb(248,248,248);
	color: rgb(230,250,230);
}

.actInd{
	width: 21px;
	height: 21px;
	margin-left: 2px;
	margin-right: 2px;
}

.game{
	grid-area: game;
	width: 60ch;
	display: grid;
	grid-template-rows: min-content max-content 1fr 4em min-content min-content 10em;
	gap: .7em;
	text-align: center;
}
.game p{
	margin: 0;
}
#locN{
	font-size: 1.13em;
	font-weight: bold;
	margin-bottom: .35em;
}
#locF{
	line-height: 1.6;
}

.statussymbols{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
}

#actD{
	display: flex; 
	flex-direction: row; 
	width: 75%; 
	justify-content: space-evenly; 
	align-items: center; 
	margin: auto auto auto auto;
	padding: .125em;
}

#actions{
	display: flex;
	flex-direction: column;
  	justify-content: space-evenly;
	align-items: center; 
	position: relative;
	width: 33%;
	justify-self: center;
	padding: .125em;
}

.classselect{
	text-decoration: underline solid;
}
.classselect:hover{
	color: var(--snake-green);
}

#nbutt{
	position: absolute;
	top: 0;
}
#sbutt{
	position: absolute;
	bottom: 0;
}
#ebutt{
	position: absolute;
	right: 0;
}
#wbutt{
	position: absolute;
	left: 0;
}
#ubutt{
	position: absolute;
	top: 0;
	left: 0;
}
#dbutt{
	position: absolute;
	top: 0;
	right: 0;
}

#inn{
	width: 200px;
	background-color: rgb(50, 55, 50);
	border-radius: 3px;
	border: none;
	padding: 3px;	
	font-family: "Source Code Pro";
}
#inn:focus{
	outline-color: rgb(29,128,65);
	background-color: rgb(125, 180, 148);
}

.menu2{
	grid-area: menu2;
	width: 20vw;
	height: 69vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 12px;
	transition: opacity ease-in 1s;
}

.ewrap{
	padding: 2%;
	background-color: var(--text-primary);
	opacity: .7;
}

.equipment-container{
	display: none;
	justify-content: center;
	width: 95%;
	height: 8%;
	background: black;
	opacity: .9;
	margin-top: 1.4em;
}

.equipment-item{
	width: 32px;
	height: 32px;
	margin: .125em;
}
.equipped-container{
	display: flex;
	align-items: center;
	margin: 0 .5rem;
	height: 100%;
	border-radius: .5rem;
}

#equipped-item{
	border: solid 2px var(--strength-red);
	border-left-color: var(--magic-blue);
	border-bottom-color: var(--magic-blue);
}

#equipped-armor{
	border: solid 2px var(--armor-orange);
}

#healinghorn-container{
	display: flex;
	justify-content: center;
	align-items: center;
}
#healinghorn-container{
	border: solid 2px var(--health-pink);
}
#horn-charges{
	margin: 0 .3rem;
	cursor: default;
}

#healinghorn-container,
#equipped-item,
#equipped-armor{
	opacity: .5;
	transition: opacity cubic-bezier(.49,.56,.1,1.28) 1s;
}

#healinghorn-container:hover,
#equipped-item:hover,
#equipped-armor:hover{
	opacity: 1;
}

.inventory-container{
	max-height: 75%;
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(20%, 1fr));
	grid-template-rows: max-content;
	width: 85%;
	overflow-y: scroll;
	scrollbar-width: none;
	gap: .3rem;
	margin-top: 1rem;
}

.item-container{
	display: flex;
	background: none;
	border: solid 2px var(--text-primary);
	padding: .3rem;
	border-radius: .9em;
	align-items: center;
	justify-content: center;
	opacity: .5;
	transition: opacity cubic-bezier(.98,.61,.27,1.24) .2s, border cubic-bezier(.97,-0.21,.18,.47) .3s
}

.item-container:hover,
.item-container:focus{
	opacity: 1;
	border: solid 2px var(--item-green);
}

.item-image{
	width: 32px;
	height: 32px;
}

.itemButtd{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-bottom: 5%;
}
.itemButts,
.buyButt,
#talkButt,
.navbutt,
.butts,
.diagOpt{
	margin: 0 .8em;
	border: solid 2px rgba(12,12,12,.01);
	border-radius: .8em;
	color: lightgray;
	font-family: 'Source Code Pro', monospace;
	-moz-outline-radius: .7em;
	opacity: .6;

}
.butts:hover,
.butts:focus,
.navbutt:hover,
.navbutt:focus,
.itemButts:hover,
.itemButts:focus,
.buyButt:hover,
.buyButt:focus,
.diagOpt:hover,
.diagOpt:focus,
#cardCloseButt:hover,
#cardCloseButt:focus,
#talkButt:hover,
#talkButt:focus{
	border: solid 2px lightgrey;
	outline: none;
	opacity: 1;
}
.buyButt{
	background-color: var(--money-green); 
}
#dropButt{
	background-color: rgb(212, 53, 53);
}
#cardCloseButt{
	background-color: rgb(212, 53, 53);
}
#equipButt{
	background-color: darkgreen; 
}
#talkButt,
#useButt,
#qButt,
.diagOpt{
	background-color: var(--npc-purple);
}
.navbutt{
	background-color: var(--snake-green);
	display: none;
}
.butts{
	background-color: var(--snake-green);
}

#diagText{
	padding: .5em;
}

.cardD{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	width: 85%;
	height: 20%;
}

.cardI{
	height: 85%;
}

.fightTemplate{
	width: 30vw;
	padding: 2em;
	display: grid;
	grid-template-rows: min-content min-content auto auto min-content min-content;
	background: black;
	margin-left: auto;
	margin-right: auto;
	border: solid 2px var(--text-primary);
	border-radius: 1em;
	color: var(--text-primary);
	text-align: center;
}

.monName{
	font-size: 1.2em;
	margin: 0;
	justify-self: right;
}

.monText{
	font-size: .85em;
	margin: 0;
	padding: .8em 0;
	width: 50ch;
}

.healthContainer{
	height: .4em;
	border: 1px solid whitesmoke;
	border-top: none;
	border-radius: .5em;
}

.ph{
	height: 100%;
	background: var(--health-pink);
	border-radius: .5em;
	}

.monHealth{
	height: 100%;
	background: var(--monster-red);
	border-radius: .5em;
}

#monImgC{
	position: relative;
	margin: 3%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--xp-gold);
}
#playerD4{
	display: none;
	height: 30%;
	position: absolute;
	right:	0;
	bottom: 0;
}
#monImg{
	width: 15em;
}
#monD4{
	display: none;
	height: 30%;
	position: absolute;
	left: 0;
	top: 0;
}

.D20{
	padding: .5em;
}

.fightDialog{
	font-size: 1em;
	margin: 1em 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 75px;
}

.playerFightContainer{
	display: grid;
	grid-template-columns: 15ch 1fr;
	grid-template-rows: min-content min-content;
	gap: .5em;
}
.playerContainerName{ 
	margin: 0;
	grid-column: 1/-1;
	justify-self: start;
	font-size: 1.2em;
}
#phc{
	justify-self: start;
	align-self: end;
	width: 100%;
	grid-column: 1/-1;
}
#fightItem{
	height: 64px;
	justify-self: center;
	align-self: center;
	width: 64px;
}

.fightActions{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: .5em;
}

.move-container{
	width: 100%;
	height: 100%;
	border-radius: .9em;
	opacity: .5;
	background: none;
}

.move-container:hover{
	opacity: 1;
}

.move-container:focus{
	opacity: 1;
}

.move-image{
	height: 100%;
}

#strength-move{
	border: solid 2px var(--strength-red);
}

#magic-move{
	border: solid 2px var(--magic-blue);
}

#heal-move{
	border: solid 2px var(--health-pink);
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--text-primary);
	font-family: 'Source Code Pro', monospace; 
}

#run-move{
	border: solid 2px var(--lovely-purple);
}

.shopTemplate{
	position: relative;
	width: 20vw;
	min-height: 30vh;
	border: 2px forestgreen solid;
	border-radius: 1rem;
	background: black;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	color: var(--text-primary);
	position: relative;
	max-height: 50vh;
	padding: .3em;	
	text-align: center;
}

#shopName{
	margin: 1em 0 0 0;
	text-decoration: underline var(--snake-green);
}

#shopDescription{
	margin: .5em 0 .5em 0;
	font-size: .85em;
	text-align: center;
}

.saleC{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.saleI{
	width: 80%;
	display: flex;
	justify-content: center;
	border-radius: .75em;
	margin: 2%;
	min-height: 2.5em;
	max-height: 2.7em;
	align-items: baseline;
}

.forSaleFull{
	flex: 3;
}

.levelUpTemplate{
	height: 25vh;
	width: 15vw;
	background: black;
	border: 2px solid gold;
	border-radius: 1em;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	position: relative;
	display: flex;
	flex-direction: column;
}

#levelUpTitle{
	margin: 0;
	flex: 1;
	color: var(--text-primary);
	text-decoration: underline gold;
}

#pointsAvailP{
	color: var(--text-primary);
	font-size: .9em;
	margin: .2rem 0;
	flex: 1;
}
#pointsAvailN{
	color: gold;
}

#levelUpCC{
	display: flex;
	justify-content: space-around;
	width: 90%;
	flex: 5;
}

.levelStatC{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.levelUpButt{
	width: 1.1em;
	height: 1.1em;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: .5em;
	color: var(--text-primary);
	cursor: pointer;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#levelUpButtPlus{
	background-color: var(--money-green);
}
#levelUpButtMinus{
	background-color: var(--monster-red);
}	

.levelUpV{
	width: 1.2em;
	height: 1.2em;
	text-align: center;
	font-size: 1.2em;
	margin: .3rem 0;
}
#levelUpStr{
	color: var(--strength-red);
}
#levelUpMag{
	color: var(--magic-blue);
}
#levelUpArm{
	color: var(--armor-orange);
}

.levelUpSave{
	margin: .2rem;
	bottom: .5em;
	background: gold;
	color: black;
	border: 2px solid rgba(0,0,0,0);
	border-radius: .8em;
	flex: .5;
	font-family: 'Source Code Pro', monospace; 
}
.levelUpSave:hover{
	border: 2px solid var(--text-primary);
}

#typegameword{
	margin-top: 2em;
}
.gameletter{
	font-size: 1.25em;
}

.activityPicture{
	width: 10em;
	margin-top: .5em;
}