@font-face {
  font-family: 'galette';
  src: url('/fonts/galette.otf');
}

@font-face {
  font-family: 'citree';
  src: url('/fonts/Citree\ regular.otf');
}

@font-face {
  font-family: 'pixelari';
  src: url('/fonts/pixelari.ttf');
}

@font-face {
  font-family: 'barcode';
  src: url('/fonts/bar.ttf');
}

@font-face {
  font-family: 'marker';
  src: url('/fonts/marker.ttf');
}

@font-face {
  font-family: 'hand';
  src: url('/fonts/hand.ttf');
}

@font-face {
  font-family: 'James';
  src: url('/fonts/James-regular.otf');
}

html, body {
	position: relative;
	padding: 0;
	margin: 0;
	border: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

nav {
  z-index: 999;
  color:#47ff6f;
  background-color: #210f49;
  background-image: url("../images/sitewide/navgif.gif");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-y: 97%;
  position:absolute;
  padding: 10px;
  height: 100%;
  width: 200px;
  transform: translate(-220px);
  transition: .2s;
  top:-230px;
}

.navlink {
  font-family: James;
  text-align: center;
  text-transform:uppercase;
  margin-top:70px;
  min-width:210px;
}

.navlink img {
  width:210px;
}

.navlink a:hover {
  color: #b3f0f2;
  text-decoration: underline;
}

.dropdown {
  position: relative;
  display: block;
  color: #47ff6f;
  z-index:999;
}

.dropdown-content {
  display: none;
  top: -20px;
  left:210px;
  position: absolute;
  background-color: #3f2676;
  width: 200px;
  z-index:999;
  border:2px solid #47ff6f;
}

.dropdown-content:after,
.dropdown-content:before {
  right: 100%;
  top: 33px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.dropdown-content:after {
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #47ff6f;
  border-width: 10px;
  margin-top: -10px;
}

.dropdown-content:before {
  border-color: rgba(194, 225, 245, 0);
  border-right-color: #47ff6f;
  border-width: 13px;
  margin-top: -13px;
}

.dropdown-content a {
  padding: 10px;
  text-decoration: none;
  display: block;
  color: #4ddf59;
  text-align: center;
  z-index:999;
}

.dropdown-content a:hover {
  background-color: #a88fed;
  color: #000;
}

.dropdown:hover .dropdown-content {
  display: grid;
}

.dropdown:hover {
  cursor: pointer;
}

#openNav {
  z-index:99;
  margin: 0px;
  padding: 0px;
  position:fixed;
  text-align: center;
  left:0px;
  width:50px;
  height:120%;
  background-color: #3f2676;
  transition: .2s;
  border-right:2px solid #47ff6f;
  cursor: pointer;
  top:-0px;
}

#openNav:hover {
  transform: scaleX(1.1);
}

#openNav h1 {
  position: absolute;
  color: #47ff6f;
  transform: rotate(-90deg);       
  font-family: James;
  top:40%;
  left:-10px;
  text-shadow:
  0 0 7px #13db1d57,
  0 0 10px #c8ffd4a2,
  0 0 20px #c5eece71;
}

#openNavBtn {
  display: none;
}

.openNavArrow {
  position:absolute;
  z-index:99;
  top:42%;
  left:55px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 25px 0 25px 25px;
  border-color: transparent transparent transparent #47ff6f;
  opacity: .1;
  transition: .5s;
  visibility: visible;
}

#openNav:hover > .openNavArrow {
  opacity:1;
  transition: .5s;
  transform: translateX(10px);
}

#openNavBtn:checked + label > div {
  left:220px;
  transition: .2s;
}

#openNavBtn:checked + label > nav {
  transform: translate(0px);
}

#openNavBtn:checked + label .openNavArrow {
  visibility: hidden;
}