/* html {
cursor:url(https://i.gyazo.com/3632996939fa784159a19b62928084f6.png), auto;
} */

/* .hey{
	border:dashed 1px #200029;
	color: #200029;
	text-shadow:none;
}
.hey td{
	border:dashed 1px #5a5a5a;
	padding:5px;
}
.hey td:nth-child(1) {
background-color:#a08984;
}
.hey td:nth-child(2) {
background-color:grey;
} */

body {
	line-height: 1;
	background-color: black;
	background-image: url(https://i.gyazo.com/3e030046674eadae1a3a0a663653d51a.png);
	text-align: center;
	text-shadow: 1px 1px 6px black;
	font-family: "Times New Roman", Times, serif;
	/* -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg); */
}


.button {
	align:center;
	margin:7.5px;
	outline: grey 1px dashed;
}

.footer {
	color:#5a5a5a;font-size:90%;margin-bottom:0;margin-top:5px;
}

img {
	max-width:100%;
}

.fill {
	width:auto;height:720px; color: #BEAAC6; font-size: 120%;	line-height: 125%; padding: 10px;	background-color: #5a5a5a; overflow-y:scroll;
}


.small{
	margin: 4px 4px 4px 4px;
	opacity: 0.8;
	outline: gray outset 1px;
	width: 130px;
	height:100px;
}

.empty{
	margin: 4px 4px 4px 4px;
	opacity: 0.8;
	outline: gray outset 1px;
	width: 130px;
	height:100px;
}

.small:hover{
	opacity:1;
	transition:.2s;
}


.content{
	color: #BEAAC6;
	font-size: 120%;
	line-height: 125%;
	position: relative;
	float:right;
	margin-right:13%;
	margin-top:10px;
	margin-bottom:10px;
	width: 56%;
	padding: 10px;
	padding-top: 10px;
	background-color: #5a5a5a;
	outline: gray double 3px;
}


.gallery{
	color: #BEAAC6;
	font-size: 120%;
	line-height: 125%;
	position: relative;
	text-align:center;
	margin: auto;
	width: 800px;
	padding: 40px;
	margin-top:20px;
	margin-bottom:20px;
	background-color: black;
	outline: #3D234B double 3px;
}

.writing {
	color: #BEAAC6;
	font-size: 120%;
	line-height: 1.5;
	position: relative;
	text-align:left;
	margin: -10px auto 0 auto;
	width: 800px;
	padding: 40px;
	background-color: black;
	height:100%;
	top:0;
	filter:drop-shadow(0px 0px 5px black);
}
.note {
	background-color:#323640;
	border-radius:3px;
	padding:10px;
	font-size:95%;
}

th {
	font-size:100%;
	text-align:right;
}

th span {
	color:#634D69;
}

.gallery h2{
	margin:0;
}


.viewing{
	max-width:100%;
	width:800px;
}


.speak{
	font-size:100%; font-style:italic; font-weight:bold; text-align:left;margin:auto 0 auto 0;color:#200029; text-shadow:none; border-bottom:dashed 1px #3D234B;
}


.shout{
	font-size:115%; font-style:italic; font-weight:bold; text-align:left;margin:auto 0 auto 0;color:#200029; text-shadow:none; border-bottom:dashed 1px #3D234B;
}

th a{
	font-weight:500;
	color:gray;
}



/* unvisited link */
a {
 color: pink;
 text-shadow: 0 0 10px grey;
 text-decoration:underline;
}


/* mouse over link */
a:hover {
 color: purple;
 text-shadow: 0 0 10px grey;
 text-decoration:underline;
 transition:.2s;
}

.huh a{
	color: gray;
	font-style:italic;
  text-shadow: 0 0 10px black;
}


/* smaller screen/phone (this is wonky) */

@media only screen and (max-width: 900px), (pointer:coarse) {
  .side {
    display:none;
  }
	.empty{
		display:none;
	}
	table {
		max-width:100%;
		height:auto;
		overflow:none;
	}
	img {
		height: auto;
	}
	th {
		text-align:center;
	}
	.fill {
		height:auto;
		overflow-y:auto;
	}
	.small {
		max-width:18%;
		min-width:100px;
	}
.gallery {
	max-width:95%;
	padding:15px;
}


@media (pointer:coarse) {
	body {
		font-size:200%
	}
	.small {
		width: 260px;
		height:200px;
	}
}