@font-face {
    font-family: Starlight;
    src:
      url('https://dl.dropbox.com/s/cfcp07kvx3qut4s/starlight.ttf');
  }
  html {
    min-height: 100%;
    cursor: url('imgs/mooncursor.webp'), auto;
  }
  body {
    background: #e7e2dd;
    background: radial-gradient(circle farthest-corner at center center, #e7e2dd 0%, #a0bad0 100%);
    background: -webkit-radial-gradient(circle farthest-corner at center center, #e7e2dd 0%, #a0bad0 100%);
    background: -moz-radial-gradient(circle farthest-corner at center center, #e7e2dd 0%, #a0bad0 100%);
		font-family: Consolas, basis33, Courier New;
		margin: 0;
  }
  ::selection {
    background-color: #96a0d9;
  }
/* HOME */
	header {
	  font-family: 'Aboreto', display;
		font-size: 40px;
		color: white;
		text-align: left;
		text-shadow: 0 0 6px #cfb2d8, 0 0 3px #000000;
		position: fixed;
		left: 24%;
		width: fit-content;
    top: 7%;
    z-index: 2;
  /* floating txt by scripted @ neocities */
    animation-name: floating;
		animation-duration: 4s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
	}
	@keyframes floating {
		0% {
		transform: translate(0, 0px);
		}
		50% {
		transform: translate(0, 3px);
		}
		100% {
		transform: translate(0, -0px);
		}
  }
	#subtitle {
	  font-family: Aboreto;
	  position: fixed;
	  left: 26%;
	  top: 14%;
		font-variant: small-caps;
    font-size: 18px;
		letter-spacing: 1.2rem;
		color: white;
		text-shadow: 0 0 5px #e1dac3, 1px 2px 2px #4e4779;
		writing-mode: vertical-lr;
		text-orientation: upright;
		z-index: 2;
	/* floating txt by scripted @ neocities */
		animation-name: floating;
		animation-duration: 4s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
	}
	@keyframes floating {
		0% {
		transform: translate(0, 0px);
		}
		50% {
		transform: translate(0, 3px);
		}
		100% {
		transform: translate(0, -0px);
		}
  }
	h1, h2 {
    font-family: Consolas;
    margin: 0;
	}
	a {
	  cursor: url('imgs/mooncursor.webp'), auto;
	}
	a:link {
		color: purple;
		text-decoration: none;
		font-size: 12px;
		font-family: basis33;
	}
	a:hover {
		color: black;
	}
	.main-grid {
	  display: grid;
	  position: absolute;
	  margin: auto;
	  top: 10%;
	  left: 25%;
	  right: 25%;
		grid-template-columns: 10rem 26rem 14rem;
		grid-template-rows: 40px 100px 100px 100px 100px 100px 100px;
  	padding: 1em;
  	align-content: center;
  	width: fit-content;
		background-color: rgba(255, 255, 255, 0.2);
		border-image-slice: 203 166 203 166;
    border-image-width: 100px 75px 100px 75px;
    border-image-repeat: stretch stretch;
    border-image-source: url(imgs/graphics/divframe.png);
    border-image-outset: 5px;
		z-index: 0;
	}
	#banner {
	  grid-column: 1 / span 3;
	  grid-row: 1;
	}
	#banner img {
	  object-fit: fill;
	  width: 800px;
	  height: 40px;
	}
	
	.home {
		grid-column: 2;
		grid-row: 2 / span 7;
		margin-left: 0.5em;
		margin-right: 0.5em;
		background-color: rgba(225, 223, 240, 0.6);
		border: 1px dashed #845ec0;
		padding: 15px;
		overflow-y: auto;
		font-family: Starlight;
	}
	.nav {
		grid-column: 1;
		grid-row: 2 / span 3;
		background-color: rgba(225, 223, 240, 0.6);
		border: 1px dashed #796582;
		text-align: center;
	}
	.nav h3 {
		font-family: Courier New;
	}
	li { 
		list-style-image: url(imgs/graphics/moonlink.gif);
		list-style-position: outside;
		text-align: left;
		margin: 0;
	}
	.gallery {
    z-index: 1;
		grid-column: 3;
		grid-row: 2 / span 4;
		overflow: auto;
		text-align: center;
		padding-top: 10px;
		background-color: rgba(225, 223, 240, 0.6);
		border: 1px dashed #796582;
		white-space: normal;
	}
	.gallery img {
		width: 100px;
	}
	.jerma {
	  grid-column: 3;
	  grid-row: 5 / span 6;
	  overflow: none;
	}
	.jerma img {
	  position: relative;
	  top: 33%;
	  right: 10px;
	  height: 67%;
	  
	}
  .creds {
	  grid-column: 1;
	  grid-row: 7 / span 7;
	  margin-top: 0.5em;
	  background-color: rgba(225, 223, 240, 0.6);
	  border: 1px dashed #845ec0;
	  padding-top: 0.5em;
	  padding-left: 0.5em;
	}
	.creds p {
	  font-size: 12px;
	  font-family: Consolas;
	  margin: 0;
	  text-align: center;
	}
	.creds img {
	  width: auto;
	}
	.creds a {
	  font-size: 14px;
	}
	.tagline {
	  display: block;
	  width: 100%;
	  position: absolute;
	  margin: auto;
	  bottom: 8%;
	  font-family: Consolas;
	  font-size: 11px;
	  text-align: center;
	}
	#botbanner {
    position: absolute;
    display: block;
    width: 100%;
    opacity: 0.3;
    height: 50%;
    bottom: 0;
    z-index: -1;
    filter: brightness(2) sepia(0.7);
	}
/*	.tooltip {
		position: absolute;
	}
	.tooltip title {
		display: none;
		border: 1px solid black;
		background-color: white;
		font-family: Consolas;
		color: blue;
		text-align: center;
	}
	.tooltip:hover title {
	  display: inline-block;
		width: 100px;
		padding: 3px;
		font-size: 12px; 
*/
	}
/*ADD-ONS*/
  /* fixing this later lol
  .musicplaya {
	  position: absolute;
	  top: 58%;
	  left: 10%;
	}*/