@import url('https://fonts.cdnfonts.com/css/beans');
body{
    background-color: rgb(50, 50, 50);
	font-family: 'Beans', sans-serif;
	overflow-x: hidden;
}


#main{
    text-align: center;
    color: rgb(200, 200, 200);
}
/*top nav*/
#nav{
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #2b2b2b;
}

#nav li {
	float: left;
}

#nav li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	border-radius: 10px;
	transition: 0.4s;
}

#nav li a:hover {
	background-color: #000000;
}
#thebeanbutton {
	height: auto;
	width: auto;
	max-height: 40px;
	max-width: 200px;
	border-radius: 10px;
	cursor: pointer;
}
/*end top nav*/
#iswhat {
	font-size: 19.25px;
	background: skyblue;
	color: rgb(65, 65, 65);
	min-height: 40vh;
	display: flex;
	align-items: center;
	border-radius: 15px;
	overflow: hidden;
}
#iswhat div {
	display: none;
	position: absolute;
	width: 70%;
	left: 15%;
	text-align: center;
	overflow: hidden;
}
.slide_in_show{
	animation: slideiniswhat 1.2s ease-in-out;
	display: inline !important;
}
#shop, #earn {
	color: #948f8f !important;
	border-bottom: 3px solid #cad9ad;
	text-decoration: none;
	padding: 2px 5px;
	transition: 0.2s;
}
#shop:hover, #earn:hover {
	background: #cad9ad;
}
@keyframes slideiniswhat {
	from {left: 101vw; overflow: hidden;}
	to {left: 15%;}
}
/*modal*/
#popup {
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
	text-align: center;
}
/* Modal Content/Box */
#content {
	background-color: #fefefe;
	margin: 10% auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 80%; /* Could be more or less, depending on screen size */
	animation: op ease 1s;
	position: relative;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 16px white;
}
@keyframes op{
	from{opacity:0;top: 70px;}
	to{opacity:1;top: 0;}
}
#bold {
	font-size: 48px;
	margin: 0;
}
.modal p {
	font-size: 24px;
}
#close {
	border: 2px solid black;
	background-position: 0% 0% !important;
	padding: 10px 20px;
	font-size: 24px;
	border-radius: 8px;
	/*box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
	cursor: pointer;
	transition: 0.5s ease;
	color: whitesmoke;
	background-size: 300% !important;
	background: linear-gradient(45deg, #58d070, #006b15,  #58d070);
}
#close:hover{
	background-position: 150% 0% !important;
}
.hide{
	display: none;
	animation: fade 1s ease;
}
@keyframes fade{
	from{display: block; opacity: 1;}
	to{opacity: 0;}
}
/*end*/