:root {
	--decisions-bg-color: rgba(0,0,0,0.41176);
	--decision-bg-color: black;
	--decision-color: white;
	--decision-bg-color-hover: white;
	--decision-color-hover: black;
  }

#decisions-wrapper{
	background-color:  var(--decisions-bg-color);
}

#background-wrapper{
	
}
#foreground-wrapper{
	background-image: url("./frame-01.png");
	background-size: 100% 100%;
}

#map-wrapper #map-title{
	font-size: 2rem;
	background-color: black;
	background-image: url("./map.png");
	background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#menu-wrapper{
	padding: 1% 1% 0% 4%;
}
#player-menu{
	background-color: rgba(0, 0, 0, 0.23);
}

.player-menu-button{
	/* background-color: black;
	color: white */;
	background-color: rgba(255,255,255,0.66275);
  	color: black;
}
#inventory, #actions{
	background-color: black;
  	color: white;
}
#inventory:hover{
	box-shadow: inset 0px -4px 0px 0px brown;
}
#actions:hover{
	box-shadow: inset 0px -4px 0px 0px brown;
}

#player-menu-groups{
	
}

/* PLAYER DECISIONS and LOCATIONS */
/* https://getcssscan.com/css-buttons-examples */
.player-decision{
	background-color: black;
	border: 0 solid #E5E7EB;
	box-sizing: border-box;
	color: white;
	display: flex;
	font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-size: 1rem;
	font-weight: 700;
	justify-content: center;
	line-height: 1.75rem;
	padding: .75rem 1.65rem;
	position: relative;
	text-align: center;
	text-decoration: none #000000 solid;
	text-decoration-thickness: auto;
	width: 100%;
	max-width: 460px;
	position: relative;
	cursor: pointer;
	transform: rotate(-2deg);
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
  }
   
  .player-decision:focus {
	outline: 0;
  }
  
  .player-decision:after {
	content: '';
	position: absolute;
	border: 1px solid #000000;
	bottom: 4px;
	left: 4px;
	width: calc(100% - 1px);
	height: calc(100% - 1px);
  }
  
  .player-decision:hover:after {
	bottom: 2px;
	left: 2px;
  }
  
  @media (min-width: 768px) {
	.player-decision {
	  padding: .75rem 3rem;
	  font-size: 1.25rem;
	}
  }
  
   
   /* botoncillos como de papel

    .player-decision {
	background-color: #fff;
	background-image: none;
	background-position: 0 90%;
	background-repeat: repeat no-repeat;
	background-size: 4px 3px;
	border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
	border-style: solid;
	border-width: 2px;
	box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
	box-sizing: border-box;
	color: #41403e;
	cursor: pointer;
	display: inline-block;
	font-family: Neucha, sans-serif;
	font-size: 1rem;
	line-height: 23px;
	outline: none;
	padding: .75rem;
	text-decoration: none;
	transition: all 235ms ease-in-out;
	border-bottom-left-radius: 15px 255px;
	border-bottom-right-radius: 225px 15px;
	border-top-left-radius: 255px 15px;
	border-top-right-radius: 15px 225px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
  }
  
  .player-decision:hover {
	box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
	transform: translate3d(0, 2px, 0);
  }
  
  .player-decision:focus {
	box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
  }
   */

#left-wrapper, #right-wrapper{
	width: 0px;
}
#top-wrapper,  #bottom-wrapper{
	height: 0px;
}

/* change accept button text */
.buttons-accept{
	background-color: white;
	color: black;
}
.buttons-accept:hover{
	background-color: #090;
	color: white;
}

body{
	background: black;
}

#cover-title, #cover-author, #cover-illustrator, #cover-description{
	color: white;
  	text-shadow: 2px 2px 6px black;
}

#text-wrapper #cover-author {
	justify-self: left;
}
#text-wrapper h2 {
	max-width: 45%;
	background-color: #000000a9;
	color: white;
	padding: 8px;
	overflow-y: auto;
}

/* #player-menu{
	background:
	radial-gradient(black 15%, transparent 16%) 0 0,
	radial-gradient(black 15%, transparent 16%) 8px 8px,
	radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
	radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
	background-color:#28282870;
	background-size:16px 16px;
	border: 1px 1px 1px 1px solid;
} */

/* body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
@keyframes gradient {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}
 */