@font-face { 
	font-family: "m6x11"; 
	src:
		url("m6x11.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
}


body {
  background-image:url("checkered.png");
  background-size:50%;
  background-repeat: repeat;
  animation: animatedBackground 500s linear infinite;
  font-family: 'm6x11';
  image-rendering: pixelated;
  text-overflow: "";
}


.logo {
	position: relative;
  overflow:hidden;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  display:flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 2px;
  margin-bottom:-65px;
  margin-left:-70px;
  margin-top:-50px;
}

.logo > ul {
  color:white;
  font-family: 'm6x11';
  overflow:hidden;
  font-size:55px;
  white-space: nowrap;
  list-style-type: none;
}

.whole {
  padding:10px;
  border:inset 5px grey;
  border-radius: 15px;
  max-width:800px;
   margin-left: auto;
  margin-right: auto;
  color:white;
  background-color: black;
	display: grid;
    box-sizing: border-box;
}


.header {
  flex-direction: column;
  align-items: center;
	position: relative;
  z-index: 4;
  border-bottom: 2px
}

.header > #navfandom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin:10px;
}

.header > #navfandom > li {
  	padding:10px;
	margin:5px;
	width:30.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  line-height: 22px;
  font-size: 18pt;
  font-weight: bold;
  text-align: center;
  position: relative;
  white-space: nowrap;
  border-radius: 6px;
  color:white;
  background-color: #3bff45;
  box-sizing: border-box;
   text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
   -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.header > #navfandom > li:hover {
    -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.title {
  text-align:left;
  margin:5px;
  font-size:32px;
}


.page-doll {
  z-index:6;
  animation-name:bounce-in-bottom;
	-webkit-animation: bounce-in-bottom 1.1s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
	        animation: bounce-in-bottom 1.1s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
 position:fixed;
 bottom:-1%;
 left:83%;
 pointer-events: none;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

.row > .column {
  padding: 0 8px;
}

.column {
  float: left;
  width: 25%;
}


.footer {
  z-index:5;
  padding-left:5px;
  padding-top:5px;
  width:100%;
  overflow: hidden;
  font-size:13px;
  background-color:#3bff45;
  border:solid 2px black;
  left:0%;
  bottom:0%;
  position:FIXED;
}


button {
  margin-top:10px;
  font-family: "m6x11"; 
    font-size:24px;
    display: flex;
  flex-direction: column;
  align-items: center;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  background-color:#3bff45;
   -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}


button:hover {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.big-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 160px));
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.grid-item {
background: transparent;
  border: none;
  padding: 0.4rem;
  text-align: center;
  max-width: 100%;
  z-index: 1;
  position: relative;
  margin: 0 auto;
  }




@media screen and (max-width: 600px) {
  
  .logo {
	position: fixed;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  display:flex;
  flex-direction: column;
  align-items: center;
  left:-7%;
}

.logo > ul {
  clear:both;
  font-family: 'm6x11';
  font-size:35px;
  list-style-type: none;
  margin-bottom:-1%
}

.logo > ul > li {
  position:relative;
  margin-top:10px;

}


.header > #navfandom > li {
  	padding:5px;
	margin-left:5px;
	width:27%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  line-height: 22px;
  font-weight: bold;
  text-align: center;
  position: relative;
  white-space: nowrap;
  border-radius: 6px;
  color:white;
  background-color: #3bff45;
  box-sizing: border-box;
   text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  
}

.whole {
  color:white;
  background-color: black;
	display: grid;
    box-sizing: border-box;
}

.logo {
	position: relative;
  z-index: 4;
  margin-left:5px;
  margin-bottom:5px;
}

.header > #navbuttons > li > span{
  font-size:13px;
}

.header > #navfandom > li > span{
  font-size:15px;
}

.page-doll {
  display:none;
}

}



@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -10000px 0;
  }
}

.header > #navfandom > li > a {
 color:white;
 text-decoration:none;
}