body {

    font-family: "Laila";
	font-weight: 600;
	
	font-size: 1em;

	line-height: 1.4em;

	margin:0px;
	padding:0px;

	background-color:#080008;
	background-image: url("boxfront.jpg");	
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-attachment: fixed, fixed;
	background-size: contain, cover;
	
	color: #da0;

}



div{
	float:center;
	text-align: center;
	margin: 2em 0 2em 0;
	box-sizing:border-box;
}

.topmenu {
	margin: 0px;
	padding: 0px;
	width: 100vw;
	height: 140px;
	top: 0px;
	z-index:2;
	background-color:#080008;
	box-shadow: 0 0 10px 0 rgba(.1,.05,0,.8);
}

.logodiv{
	padding: 0px;
	margin: 0px;
	height: 100%;
	width: 23%;
	margin-left: 27%;
	float: left;
}

.logodiv img{
	padding: 0px;
	margin: 0px;
	height: 100%;
	width: auto;
}
.socialdiv{
	padding: 0px;
	margin: 0px;
	height: auto;
	width: 15%;
	margin-right: 27%;
	float: right;
}
.socialdiv div{
	height: 45%;
	margin: 3.5px;
	padding: 0%;
	color:white;
	float: right;
}

.social{
	padding: 0%;
	margin: 0px;
	height: 100%;
	width: 100%;
	float: right;
	object-fit:contain;
}

.content{
}

.main {
	width: 46%;
	margin-left: 27%;
	margin-right: 27%;
	margin-top: 0em;
	padding-top: 2em; /*top menu height*/
}

.logo{
	width:70%;
	height:auto;
	margin-top: 0em;
}


.parchment{
	width: 100%;
	background-image: url("cardtextbg.jpg");
	background-color: #fc9C;
	background-size: 100% 100%;
	box-shadow: -4px -2px 2em black;
	border-radius: 1em;
	border-color: black;
	border-width: 2px;
	padding: 2vw;
	color: #111;
}


.parchment ol{
	margin-left:5%;
	margin-right:5%;
	text-align:left;
}
.parchment ol li{
	margin-bottom:.5em;
	clear:both;
}
.parchment ul{
	margin-left:5%;
	text-align:left;
}


.button {
	font-family: "Laila";
	font-weight: 600;
	font-size: 1em;
	box-shadow: 0 0 3px black;
	background-color: #ba9a;
	border: 2px solid #641;
}

.button:hover {
	background-color: #c85a;
}

.screenshot {
	float: right;
	width: 8vw;
	object-fit: contain;
	clear:right;
}
.h2{
	clear:right;
}


.thumbnailbox{
	
	width: 100%;
	height: auto;
	display: inline-block;
	text-align: center;
}

.thumbnail{
	height: 8em;
	width: auto;
	margin: .5em .2em .5em .2em;
	float: center;
	cursor: pointer;
	box-shadow: -4px -2px 2em black;
	border-radius: .5em;
	border-color: black;
	border-width: 2px;
}


/* The Modal (background) */
.modal {

  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  padding-top: 0; /* Location of the box */
  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.9); /* Black w/ opacity */
  margin: 0;

}

/* Modal Content (image) */
.modal-content {
	top:15vmin;
	margin: auto;
	display: block;
	width: auto;
	max-width: 90%;
	height: auto;
	max-height: 80%;
	border-radius: 10px;
}

/* Caption of Modal Image */
#caption {
	margin: auto;
	display: block;
	width: 85%;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 5vmin;
	position:relative;
}

/* prev/next image "buttons" */
.textButton{
	cursor: pointer;
	margin: 1vmin;
	font-size:10vmin;
	background-color: #000CS;
	color: #E33;
	text-shadow: 0 0 12px #FF2F;
	position:relative;
}


@media all and (max-width: 1350px) {
	.main{
		width:60%;
		margin-left:20%;
		margin-right:20%;
	}
	.logodiv{
		width:15%;
		margin-left:20%;
	}
	.socialdiv{
		width:15%;
		margin-right:20%;
	}
	.logodiv{
	}
}

@media all and (max-width: 1090px) {
	.main{
		width:74%;
		margin-left:13%;
		margin-right:13%;
	}
	.logodiv{
		width:37%;
		
		margin-left:13%;
	}
	.socialdiv{
		width:25%;
		margin-right:13%;
	}
}

@media all and (max-width: 600px) {
	.main{
		width:94%;
		margin-left:3%;
		margin-right:3%;
	}
	.textButton{
		font-size:2em;
	}
	.modal-content {
		max-width: 70%;
		max-height: 70%;
	}
	.logodiv{
		width:47%;
		margin-left:3%;
	}
	.socialdiv{
		width:20%;
		margin-right:3%;
	}
}

@font-face{
    font-family: "Laila";
    src: url('Laila-Regular.ttf');
@font-face{
    font-family: "Laila";
	font-weight: 600;
    src: url('Laila-SemiBold.ttf');
}
}