body{
	background-color: white;
	margin: auto;
	font-family: "Montserrat", "Open Sans", "Helvetica Neue", "Helvetica", "sans-serif";

}

.square{
	width: 15%;
	background: #e79f95;
	color: #e79f95;
	padding-top: 5%;
	padding-bottom:5%;
	padding-left: 10px;
	pading-right: 10px;
	float:left;
	margin:0.4%;
	border-radius: 10%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	opacity: 0.5;
	text-align: right;
}

.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
    text-align: center;
	background: ghostwhite;
	color: #e79f95;
	padding-top:3%;
	padding-bottom:3%;
	padding-left:7%;
	padding-right:7%;
    border-radius: 2%;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 0 1.5px 5px 0 rgba(0,0,0,0.69);
	
}

.tool{
	background-image: url("Images/tools.webp");
	background-size: cover;
	background-position: center; 
}
.trap{
	background-image: url("Images/traps.webp");
	background-size: cover;
	background-position: center; 
}
.weapon{
	background-image: url("Images/weapons.webp");
    background-size: cover;
	background-position: center; 
}


.enabled{
    color:#e79f95;
    background-color: ghostwhite;
    border: 0px solid ghostwhite;   
    opacity: 0.9;
}

.disabled{
    color:gret;
    background-color: grey;
    border: 0px solid grey; 
    opacity: 0.2;
}

#stripe{
	color: ghostwhite;
	background:rgba(117,117,117,1);
	padding-top: 0.9%;
	padding-bottom: 0.1%;
	height: 50px;
	text-align: center;
	font-family: Arial;
	font-size: large;
}

#container{
	margin: 10px auto ;
	align-content: center;
}

.lucka{
	font-weight: 600; 
	font-size: 10px;
}

h1{
	color: rgba(117,117,117,1);
	text-align: center;
	background: white;
	margin: 0;
	font-weight: 600;
	font-size: 50px;
	font-family:  "Montserrat", "Open Sans", "Helvetica Neue", "Helvetica", "sans-serif";
	line-height: 1.3;
	padding: 10px 0;
}

#message{
	display: inline-block;
	width: 40%;
}

.modal {
	display: none; 
	position: fixed; 
	z-index: 1;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 100%; 
	height: 100%; 
	overflow: auto;
	border: 0;
  }
  
  .modal-content {
	background-color: white;
	font-family: Arial;
	color: black;
	margin: 0% auto; 
	text-align: center;
	font-size: medium;
	width: 506px; 
  }

  .modal-header {
	padding: 0;
  }

  
  .close {
	color: black;
	float: right;
	font-size: 28px;
	font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
  }

  @keyframes animatetop {
	from {top: -300px; opacity: 0}
	to {top: 0; opacity: 1}
  }