/* CSS ver 1.0 */
/* whatchu doin' snooping in my styles??? */
/* I write everything one keystroke at a time like it's 2003 */

* { box-sizing: border-box; }

html{
	cursor: help;
}

::selection {
  background-color: rbga(0,0,0,1);
  color: #cc0033;
}

.inconsolata-<uniquifier> {
  font-family: "Inconsolata", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

body{
  	background: #000000 url("../img/spacespacespace.gif") repeat fixed;
		color:#ffffff;
  	font-family: "Inconsolata", monospace;
}

audio{
	position:absolute;
	top:-50px;
}

/* wow this is lazy, but it's what I used to do */
.left{
	width:49%;
	float: left;
}

.right{
	width:49%;
	float: right;
}

.centered{
	width:50%;
	margin:auto;
}

.info{
	width:80%;
	border:1px solid white;
	background: rgba(0,0,0,0.7);
	margin:auto;
	padding:30px;
	margin-bottom:50px;
}

table{
	border:1px solid #cc0033;
	width:100%;
}

td{
	border:1px solid #cc0033;
	padding:10px;
	width:33%;
}

td img{
	width:100%;
	height:auto;
}

.gifs, .gifs td{
	border:none;
}

.img-container{
	border-radius:10px;
}

.img-container img{
	width:100%;
	height:auto;
	padding: 20px;
}

.img-container img:hover{
	opacity:0.8;
	cursor:wait;
}

.framed_purple {
  background: #000000 url("../img/purpleglitter.gif") repeat fixed;
}

.framed_gold {
  background: #000000 url("../img/goldglitter.gif") repeat fixed;
}

.framed_silver {
  background: #000000 url("../img/silverglitter.gif") repeat fixed;
}

.framed_teal {
  background: #000000 url("../img/tealglitter.gif") repeat fixed;
}

.framed_holo {
  background: #000000 url("../img/hologlitter.gif") repeat fixed;
}

.framed_black {
  background: #000000 url("../img/blackglitter.gif") repeat fixed;
}

.framed_drip {
  background: #000000 url("../img/dir/drip.gif") repeat fixed;
}

.framed_rose {
  background: #000000 url("../img/dir/rosebg.gif") repeat fixed;
}

/* ABOUT */

.about{
  	background: #000000 url("../img/spacebg.gif") repeat fixed;
}

.aboutme{
	text-align:center;
}

.aboutme h1{
	border:1px dotted #cc0033;
	margin:0px 0px 0px 0px;
	padding:28px 0px 28px 0px;
}

/* END ABOUT */

/* ASTRO */

.astro{
  	background: #000000 url("../img/twinkle.gif") repeat fixed;
}

.rose{
	margin-left:30px !important;
}

/* END ASTRO */

/* DIR */

.DIR{
  	background: #000000 url("../img/stagelights.gif") repeat fixed;
}

.stagebg {
  background: #000000 url("../img/dir/stage.gif") repeat fixed;
}

.dir-hearts{
	margin-top:30px;
}

.dir-hearts tr, .dir-hearts td{
	border:none !important;
}

.dir-hearts td{
	width:20%;
}

/* END DIR */

/* JAPAN */

.japan{
  	background: #000000 url("../img/twinkle2.gif") repeat fixed;
}

/* END JAPAN */

/* PETS */

.pets{
  	background: #000000 url("../img/spacespace.gif") repeat fixed;
}

/* END PETS */

/* PHOTO */

.photo{
  	background: #000000 url("../img/twinkle4.gif") repeat fixed;
}

/* ---- grid ---- */

.grid {
	border:1px solid white;
	background: rgba(0,0,0,0.7);
	margin:auto;
	padding:30px;
	margin-bottom:50px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  float: left;
  margin-bottom:10px;
  width:250px;
  height:333px;
  background:rgba(255,255,255,0.1);
  border-radius: 3px;
}

.grid-item:hover{
	opacity:0.5;
	cursor:pointer;
}

.grid-item--width-h{
	width:250px;
	height:187px;
}

.grid-item--biggen-h {
  width: 770px;
  height: 578px;
  z-index: 2; /* above other items */
  overflow: auto;
}

.grid-item--biggen-v {
  width: 510px;
  height: 680px;
  z-index: 2; /* above other items */
  overflow: auto;
}

.aqueduct{
	 background-image: url("../img/photo/aqueduct.png");
	 background-size:cover;
}

.awaysted{
	 background-image: url("../img/photo/awaysted.png");
	 background-size:cover;
}

.fish{
	 background-image: url("../img/photo/fish.png");
	 background-size:cover;
}

.kaki{
	 background-image: url("../img/photo/kaki.png");
	 background-size:cover;
}

.keepout{
	 background-image: url("../img/photo/keepout.png");
	 background-size:cover;
}

.kite{
	 background-image: url("../img/photo/kite.png");
	 background-size:cover;
}

.momiji{
	 background-image: url("../img/photo/momiji.png");
	 background-size:cover;
}

.neko{
	 background-image: url("../img/photo/neko.png");
	 background-size:cover;
}

.neko2{
	 background-image: url("../img/photo/neko2.png");
	 background-size:cover;
}

.sun{
	 background-image: url("../img/photo/sun.png");
	 background-size:cover;
}

.tea{
	 background-image: url("../img/photo/tea.png");
	 background-size:cover;
}

.towerface{
	 background-image: url("../img/photo/towerface.png");
	 background-size:cover;
}

.towerside{
	 background-image: url("../img/photo/towerside.png");
	 background-size:cover;
}

.towersun{
	 background-image: url("../img/photo/towersun.png");
	 background-size:cover;
}

.uji{
	 background-image: url("../img/photo/uji.png");
	 background-size:cover;
}

.ume{
	 background-image: url("../img/photo/ume.png");
	 background-size:cover;
}

.ume2{
	 background-image: url("../img/photo/ume2.png");
	 background-size:cover;
}

.wheel{
	 background-image: url("../img/photo/wheel.png");
	 background-size:cover;
}


/* END PHOTO */

/* PSYCH */

.psych{
  	background: #000000 url("../img/purplenebula.gif") repeat fixed;
}

.clusterfuck{
	height:258px;
}

.clusterfuck img{
	float:left;
}

.clusterfuck .pad{
	padding:0px 10px 0px 10px;
}

/* END PSYCH */

/* SONIC */

.sonic{
  	background: #000000 url("../img/twinkle3.gif") repeat fixed;
}

.sonic{ 
		cursor:url('../img/sonic/s-continue.gif'), auto !important;
}

/* END SONIC */

.gifholder{
	text-align: center;
}

.info .gifholder img{
	width:100%;
}

.topnav{
	text-align: center;
	margin-top:30px;
}

.topnav ul{
	list-style: none;
	margin:0px auto;
	padding:0px;
	height:35px;
	width:55%;
}

.topnav .button{
	float:left;
	margin:0px 10px 0px 10px;
}

.topnav .button img{
	height:35px;
	width:auto;
}

.topnav .button a, .topnav .button a:hover{
	border-bottom:none !important;
	transition: 0.5s ease;
}

.audiocontrols{
	position:fixed;
	top:0px;
	left:0px;
}

.mutebutton:hover{
	opacity:0.5;
	cursor:not-allowed;
}

.playbutton:hover{
	opacity:0.5;
	cursor:pointer;
}

#confetti:hover, #confetti2:hover, #confetti3:hover, #confetti4:hover, #confetti5:hover{
	opacity:0.5;
	cursor:crosshair;
}

.topnav .button a:hover, .tinybits a:hover{
	opacity: 0.5;
}

.ufo{
	position:absolute;
	bottom:10%;
	left:0%;
	z-index: -1;
}

p{
	line-height:1.4em;
	letter-spacing: 1px;
}

h1, h2, h3{
	text-shadow: 0px 0px 10px rgba(204, 0, 51, 1);
	text-align: center;
	letter-spacing: -2px;
}

h4{
	text-shadow: 0px 0px 10px rgba(204, 0, 51, 1);
	text-align: center;
	letter-spacing: -1px;
}

.info ul {
  list-style: none;
  padding: 0;
}
.info ul li, .info ol li {
  position: relative;
  padding: 5px 0px 5px 15px;
}
.info ul li::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 8px;
  right: 20px;
  width: 10px;
  height: 10px;
  background: url("../img/bullet.gif") no-repeat center;
  background-size: contain;
}

.info ul li ul li::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 10px;
  right: 15px;
  width: 10px;
  height: 10px;
  background: url("../img/bullet2.gif") no-repeat center;
  background-size: contain;
}

.divider{
	background: #ffffff url("../img/divider.gif") repeat;
	width: auto;
	height: 3px;
	margin: 15px 0px;
}

.stopcenter{
	text-align: left !important;
}

a{
	color:#cc0033;
	text-decoration: none;
	border-bottom:3px dotted #cc0033;
	transition: 0.5s ease;
}

a:hover{
	color:#000000;
	border-bottom:3px dotted #cc0033;
}

.foot{
	text-align: center;
	margin:0px 0px 70px 0px;
}

.foot .overlay{
	position: relative;
  display: inline-block;
}

.overlay-text{
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Perfectly centers the text */
  padding: 10px 0px 13px 0px;
	font-weight:600;
	text-shadow: 0px 0px 10px rgba(204, 0, 51, 1);
	text-align: center;
	letter-spacing: -1px;
}

.home{
}

.tinybits{
	list-style: none;
}

.tinybits li{
	height:auto;
	display: inline-block;
	margin: 20px 20px;
}

.tinybits li img{
	text-align: center;
}

.tinybits li a, .tinybits li a:hover{
	border-bottom:0px;
}

/* dumping some responsive code here */


@media screen and (max-width: 600px) {

	.mobiletooltip{
		display:block;
	}

	.topnav ul{
		list-style: none;
		padding:0px;
		width:100%;
		height:200px;
	}

	.topnav .button{
		float:left;
		margin:0px 10px 20px 10px;
	}

	.topnav .button img{
		height:44px;
		width:auto;
	}

	.audiocontrols{
		position:fixed;
		top:45%;
		left:0px;
	}

	.audiocontrols img{
		width:44px;
		height:44px;
	}

	.info{
		overflow:scroll;
	}

	.info img{
		width:100%;
		height:auto;
	}

	.gifs td{
		width:100%;
		padding:0px 0px 0px 0px;
	}

	.left, .right, .centered{
		width:100% !important;
		float: none !important;
	}

	.ufo img{
		max-width:350px;
		height: auto;
	}

	.home{
		width:100%;
		margin:0px 0px 0px 0px;
	}

	.home .tinybits{
		padding:0px;
	}

	.home .tinybits li{
		width:100%;
		height:auto;
		display: inline-block;
		margin: 10px 0px 10px 0px;
		text-align:center;
	}

	.home .tinybits li img{
		max-width:350px;
		height:auto;
	}

	.grid-item:hover{
		opacity:1;
		cursor:none;
	}

	/* poof dem photos */
	.grid-item--biggen-h {
	  display:none;
	}

	.grid-item--biggen-v {
	  display:none;
	}

	.foot img{
		max-width:90%;
	}

	.img-container{
		margin:10px 0px 10px 0px;
	}

	.right, .left{
		margin:10px 0px 10px 0px;
	}

	.jar{
		width:100% !important;
		height:100% !important;
	}

}

@media screen and (min-width: 601px) and (max-width: 1024px) {

	.topnav ul{
		list-style: none;
		padding:0px;
		width:80%;
		height:150px;
	}

	.topnav .button{
		float:left;
		margin:0px 10px 20px 10px;
	}

	.topnav .button img{
		height:44px;
		width:auto;
	}

	.audiocontrols{
		position:fixed;
		top:15%;
		left:0px;
	}

	.left img, .right img{
		width:100%;
		height:auto;
	}

	.grid {
		width:100% !important;
		overflow:scroll;
	}


}

@media screen and (min-width: 601px) {

	.mobiletooltip{
		display:none;
	}

}

/* end responsive dump */