@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 */
}


/* ---------------------------
   Theme variables (defaults = grape)
   --------------------------- */
:root {
  /* checkerboard background (grape default) */
  --bg-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%);
  --bg-size: 25px 25px;
  --bg-position: 0 0, 12.5px 12.5px;
  --bg-color: #ae12c9;

  /* page text */
  --page-text-color: #f3edae;

  /* panel colors (header/nav/main/footer) */
  --panel-bg: #000;
  --panel-text: #FFF;
  --panel-border: #FDC0FF;

  /* links */
  --link-color: #FFFFFF;
  --link-hover: #ae12c9;

  /* entry card */
  --entry-bg: #757373;
}

 
 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;
	
}
/*************************************/

/* ---------------------------
   Theme classes (override variables per theme)
   --------------------------- */

/* Grape (explicit) */
body.theme-grape {
  --bg-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%);
  --bg-color: #ae12c9;
  --page-text-color: #f3edae;
  --panel-bg: #000;
  --panel-text: #FFF;
  --panel-border: #FDC0FF;
  --link-color: #FFFFFF;
  --link-hover: #ae12c9;
  --entry-bg: #757373;
}

/* Mint */
body.theme-mint {
  --bg-image: linear-gradient(45deg, #ADFFC3 25%, transparent 25%, transparent 75%, #ADFFC3 75%, #ADFFC3 100%),
                linear-gradient(45deg, #ADFFC3 25%, transparent 25%, transparent 75%, #ADFFC3 75%, #ADFFC3 100%);
  --bg-color: #46B47F;
  --panel-border: #E8FAEA;
  --link-color: #FFFFFF;
  --link-hover: #46B47F;
  --entry-bg: #757373;
  --page-text-color: #0b2b1a;
}

/* Banana */
body.theme-banana {
  --bg-image: linear-gradient(45deg, #FEE528 25%, transparent 25%, transparent 75%, #FEE528 75%, #FEE528 100%),
                linear-gradient(45deg, #FEE528 25%, transparent 25%, transparent 75%, #FEE528 75%, #FEE528 100%);
  --bg-color: #EFB923;
  --panel-border: #DAA520;
  --link-color: #FFFFFF;
  --link-hover: #EFB923;
  --entry-bg: #757373;
  --page-text-color: #3a2a00;
}

/* Strawberry */
body.theme-strawberry {
  --bg-image: linear-gradient(45deg, #FC5A8D 25%, transparent 25%, transparent 75%, #FC5A8D 75%, #FC5A8D 100%),
                linear-gradient(45deg, #FC5A8D 25%, transparent 25%, transparent 75%, #FC5A8D 75%, #FC5A8D 100%);
  --bg-color: #FCBFD0;
  --panel-border: #FCD2DC;
  --link-color: #FFFFFF;
  --link-hover: #FCBFD0;
  --entry-bg: #757373;
  --page-text-color: #3a0a1a;
}

/* Peanut */
body.theme-peanut {
  --bg-image: linear-gradient(45deg, #BF7000 25%, transparent 25%, transparent 75%, #BF7000 75%, #BF7000 100%),
                linear-gradient(45deg, #BF7000 25%, transparent 25%, transparent 75%, #BF7000 75%, #BF7000 100%);
  --bg-color: #E7941E;
  --panel-border: #FEC161;
  --link-color: #FFFFFF;
  --link-hover: #E7941E;
  --entry-bg: #757373;
  --page-text-color: #2f1a00;
}

/* Vanilla */
body.theme-vanilla {
  --bg-image: linear-gradient(45deg, #F9EAD3 25%, transparent 25%, transparent 75%, #F9EAD3 75%, #F9EAD3 100%),
                linear-gradient(45deg, #F9EAD3 25%, transparent 25%, transparent 75%, #F9EAD3 75%, #F9EAD3 100%);
  --bg-color: #FFFDD0;
  --panel-border: #FDFAF1;
  --link-color: #FFFFFF;
  --link-hover: #FFFDD0;
  --entry-bg: #757373;
  --page-text-color: #2b2b1a;
}