@font-face {
  font-family: 'KarmicArcade'; /* Choose a name for your font family */
  src: url('fonts/ka1.ttf') format('truetype');
  font-weight: normal; /* Optional: Define font weight */
  font-style: normal; /* Optional: Define font style */
}

@font-face {
  font-family: 'Earthbound'; /* Choose a name for your font family */
  src: url('fonts/OrangeKid.otf') format('opentype');
  font-weight: normal; /* Optional: Define font weight */
  font-style: normal; /* Optional: Define font style */
}
 
 body{
    /*font-family: "Pixelify Sans", sans-serif;*/
	font-family: "Earthbound", sans-serif;
    color: #f3edae;
    background-image:
linear-gradient(45deg, #610b70 25%, transparent 25%,transparent 75%, #610b70 75%, #610b70 100%),
linear-gradient(45deg, #610b70 25%, transparent 25%,transparent 75%, #610b70 75%, #610b70 100%);
    -moz-background-size:25px 25px;
    background-size:25px 25px;
    -webkit-background-size:25px 25px;
    background-position:0 0, 12.5px 12.5px;
  background-color: #ae12c9;
}

header{
  font-size: 1em;
  border-style: double;
  font-family: "KarmicArcade", sans-serif;
  padding-left: 5px;
  color: #FFF;
  background-color: #000;
  border-width: 10px;
  border-color: #FDC0FF;
  border-radius: 10px;
  text-align: center;
}

a{
	color: #FFFFFF;
}
p{
	font-size: 1.5em;
}

.center{
	text-align:center;
}

.thumbnail{
	max-width: 80%;
	
}

#main_menu{
	display: none;
}

#main_menu_mobile{
	list-style-type:none;
	font-family: "KarmicArcade", sans-serif; 
	font-size:30px;
	
}

#sub_menu{
	list-style-type:none;
	font-family: "KarmicArcade", sans-serif; 
	font-size: 25px;
}

#page > main{
	grid-area: main;
	background-color: #000;
	height: 100%;
	
	border-style: double;
  
   padding-left: 5px;
	color: #FFF;
	background-color: #000;
	border-width: 10px;
	border-color: #FDC0FF;
	border-radius: 10px;
	
	/*! margin: 10px; */
}

footer{
	background-color: #000;
	height: 100%;
	
	border-style: double;
  
   padding-left: 5px;
	color: #FFF;
	background-color: #000;
	border-width: 10px;
	border-color: #FDC0FF;
	border-radius: 10px;
	

	
}

/*************************************/		  
/*    Accordion Menu                  */
/*************************************/


button.accordion {
	cursor: pointer;
	padding: 5px;
	width:100%;
	margin-top:10px;
	text-align:center;
	border: none;
	outline: none;
	font-size: 30px;
	transition: 0.4s;
	border-style: double;
	color: #FFF;
	background-color: #000;
	border-width: 10px;
	border-color: #FDC0FF;
	border-radius: 10px;
	font-family: "KarmicArcade", sans-serif;
}

button.accordion.active, button.accordion:hover {
    background-color: #FFF;
	color: #000;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    background-size: 20px 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
	background-color: #000;
	
	
   
}
/*************************************/




/***************************************/
button.accordion_mobile_nav {
    background-color: #dedede;
    color: #444;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 15px;
	font-weight: 700;
	color:#990001;
    transition: 0.4s;
	border-bottom: 1px solid #fff;
	position: relative;
	top: -70px;
}

button.accordion_mobile_nav.active, button.accordion_mobile_nav:hover {
    background-color: #ddd;
}

button.accordion_mobile_nav:after {
    content: 'Menu';
    color: #777;
    font-weight: bold;
    float: center;
    margin-left: 5px;
}

button.accordion_mobile_nav.active:after {
    content: "Menu";
}

div.panel_mobile_nav {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
	
}
/*************************************/