body {
  background: #FFFFFF;
  margin: 0;
  font-size: 42px;
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  height: 100%;
  animation: bugfix infinite 1s;
  -webkit-animation: bugfix infinite 1s;
}
@keyframes bugfix {
  from { padding: 0; } to { padding: 0; }
}
@-webkit-keyframes bugfix {
  from { padding: 0; } to { padding: 0; }
}
#overlay-button {
  position: absolute;
  right: 20px;
  top: 22px;
  padding: 26px 11px;
  z-index: 5;
  cursor: pointer;
  user-select: none;
}
#overlay-button span {
  height: 6px;
  width: 42px;
  border-radius: 2px;
  background-color: #D5D5D4;
  position: relative;
  display: block;
  transition: all .2s ease-in-out;
}
#overlay-button span:before {
  top: -10px;
  visibility: visible;
}
#overlay-button span:after {
  top: 10px;
}
#overlay-button span:before, #overlay-button span:after {
  height: 6px;
  width: 42px;
  border-radius: 2px;
  background-color: #D5D5D4;
  position: absolute;
  content: "";
  transition: all .2s ease-in-out;
}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
  background: #D5D5D4;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked ~ #overlay {
  visibility: visible;
}
input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
  background: transparent;
}
input[type=checkbox]:checked ~ #overlay-button span:before {
  transform: rotate(45deg) translate(7px, 7px);
  opacity: 1;
}
input[type=checkbox]:checked ~ #overlay-button span:after {
  transform: rotate(-45deg) translate(7px, -7px);
}
#overlay {
  height: 100%;
  width: 100%;
  background: #000000;
  z-index: 2;
  visibility: hidden;
  position: fixed;
}
#overlay.active {
  visibility: visible;
}
#overlay ul {
  display: flex;
  justify-content: top;
  align-items: top;
  flex-direction: column;
  text-align: center;
  height: 100%;
  padding-left: 0;
  list-style-type: none;
}
#overlay ul li {
  padding: 18px;
}
#overlay ul li a {
  color: #D5D5D4;
  text-decoration: none;
  font-size: 56px;
  font-family: Copperplate,Copperplate Gothic Light,fantasy;
}
#overlay ul li a:hover {
  color: #333332;
}
.top { 
    position: fixed; 
	top: 0%;
	left: 0%;
	width: 100%; 
	height: 6%;
	max-height: 103px;
	background-color: rgba(0,0,0,0.8);
	z-index: 101;
    -webkit-backdrop-filter: blur(14px);
}
.topright { 
    position: fixed; 
	top: 0%;
	left: 0%;
	width: 100%; 
	height: 6%;
	max-height: 103px;
	z-index: 102;
}
.bottom { 
    position: absolute; 
	top: 96%;
	left: 0%;
	width: 100%; 
	height: 4%;
	background-color: rgba(0,0,0,0.0);
	z-index: 101;
}
.titlefont { 
    font-size: 68px;
    font-family: Copperplate,Copperplate Gothic Light,fantasy;
	color: #D5D5D4;
}
.smallfont { 
    font-size: 28px;
    font-family: Copperplate,Copperplate Gothic Light,fantasy;
	color: #D5D5D4;
}
h1,h2,h3,h4,h5,h6 {
    margin-bottom: 0px;
    padding-bottom: 0px;
    margin-top: 18px;
    padding-top: 0px;
}
input[type=text] {
    border: 1px solid #D5D5D4;
    font-size: 32px;
    background-color: #1D1D1E;
    width: 80%;
	height: 4%;
	font-family: Copperplate,Copperplate Gothic Light,fantasy;
	color: #D5D5D4;
    background-image: url('http://www.sabermetrics.com/images/searchicon.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    padding-left: 8%;
}
input[type=submit] {
    border: 1px solid #D5D5D4;
    font-size: 32px;
    background-color: #1D1D1E;
    width: 80%;
	height: 4%;
	font-family: Copperplate,Copperplate Gothic Light,fantasy;
	color: #D5D5D4;
    background-size: auto 100%;
    background-repeat: no-repeat;
    padding-left: 8%;
}
.behindtop { 
    position: absolute; 
	top: 0%;
	height: 6%;
    left: 0%;
	width: 100%; 
	background-color: #000000; 
}
.games { 
    position: absolute; 
	top: 10%;
	left: 5%;
	width: 90%;
}