p {
  line-height: 1.5em;
}

body {
  background-color:black;	
}

#logo{
	width:205px;
	height:128px;
	display:inline-block;
	margin:auto;
	padding:10px;

	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	
	transform:translatey(-1px);
	animation: sinewave 2.5s alternate infinite ease-in-out;
}

@keyframes sinewave {
  to { transform: translatey(2px);}
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border:var(--border); 
  border-radius:var(--main-radius); 
}

video {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border:var(--border); 
  border-radius:var(--main-radius);
  background-color: var(--gamebg);
}

.avatar {
	margin:15px;
	padding:0px;
	border:0px;
	float: right;
	text-align:center;
}
.avatar img{
	max-height:92px;
	margin:0px;
	padding:0px;
	border:0px;
}
.avatar span{
	position:relative;
	top:-5px;
}

img.thingy {
	margin:0px;
	padding:0px;
	border:0px;
	margin-top:10px;
	margin-bottom:10px;
	border-radius:0px;
	float: right;
	margin-left: 1em;
}
img.thingyL {
	margin:0px;
	padding:0px;
	border:0px;
	margin-top:10px;
	margin-bottom:10px;
	border-radius:0px;
	float: left;
	margin-left: 1em;
}
img.novmargins {
	margin-top:0px;
	margin-bottom:0px;
}
img.thingyinline {
	margin:3px 5px 3px 5px;
	padding:0px;
	border:0px;
	border-radius:0px;
}

figure {
	margin-block:0px;
	margin-inline:0px;
}

.gamewrapper, .presskit, blockquote, figure{
  background-color: var(--gamebg);
  margin-top: 0.5em;
  margin-bottom: 1em;
  padding-bottom:10px;
  border:var(--border); 
  border-radius:var(--main-radius);
}
.gameimg {
	margin:0px;
	padding:0px;
	width:100%;
	border:0px;
	border-radius:var(--smaller-radius);
	line-height:0em;
}

.gameimg img{
	width:100%;
	margin:0px;
	padding:0px;
	border:0px;
	border-radius:var(--smaller-radius);
}
form{
  background-color: var(--gamebg);
  margin-top: 0.5em;
  margin-bottom: 1em;
  padding-bottom:10px;
  border:var(--border); 
  border-radius:var(--main-radius);
  margin-left:5%;
  margin-right:5%;
  padding: 5px 20px 5px 20px;
}


details {
    background-color: var(--gamebg);
    padding-bottom: 10px;
    border: var(--border);
    border-radius: var(--main-radius);
    padding: 10px;
	margin: 12px 4px 12px 4px;
}

details[open] summary {
    border-bottom: var(--border);
    padding-bottom: 10px;
}
summary {
	cursor:pointer;
}


a:hover .gameimg{
	background-color:white;
	height:auto;
	box-shadow:0 0 30px var(--imghoverglow2);
}
a:hover .gameimg img{
	filter:opacity(90%); /*let the white bg show through to lighten it */
}

.gamecaption {
    width: 94%;
	margin:auto;
}
.gamecaption p {
	margin:0px;
}
h1:has(+h3), h1:has(+h4){
	margin-bottom:0;
}
h1 + h3, h1 + h4{
	margin-top: 7px;
}

blockquote {
	padding:0px 20px 0px 50px;
	margin:0px;
	border-left-width:7px;
	font-style: italic;
}
figure{
	display:inline-block;
	margin-right:10px;
}
figure img{
	max-width:300px;
	max-height:300px;
	border:0;
	margin:0;
	padding:0;
}
figure figcaption{
	margin:0px 10px 0px 10px;
	text-align:center;
}
a:hover figure {
	border-color:var(--linkhover);	
	box-shadow:0 0 30px var(--imghoverglow);
}
.flexgallery figure a img {
	border-top:var(--border); 
	border-bottom:var(--border); 
	border-top-width:2px;
	border-bottom-width:2px;
}
.flexgallery figure a:hover img {
	border-color:var(--linkhover);	
	box-shadow:0 0 30px var(--imghoverglow);
}

figure.bigimg{
	width:100%;
	background-color:transparent;
	border:0;
	border-radius:0;
}
figure.halfimg{
	width:48%;
	background-color:transparent;
	float:left;
	border:0;
	border-radius:0;
	margin-left:1%;
	margin-right:1%;
}
@media only screen and (max-width: 900px) {
	figure.halfimg{
		width:98%;
	}
}
figure.bigimg img, figure.halfimg img{
	width:100%;
	max-width:100%;
	max-height:100%;
	border:var(--border); 
	border-radius:var(--main-radius);
}
figure.bigimg figcaption, figure.halfimg figcaption{
	font-style: italic;	
}
figure.bigimg a img, figure.halfimg a img{
	cursor:zoom-in;
}
figure.bigimg a:hover img, figure.halfimg a:hover img {
	border-color:var(--linkhover);	
	box-shadow:0 0 30px var(--imghoverglow);
}

.flexgallery{
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	justify-content: center;
}
.flexgallery div{
  flex: 0 0 33%;
  text-align: center;
  width:100%;
  margin:auto 0 auto 0;
}
.flexgallery div img{
	max-width:100%;
	max-height:100%;
}

.sideimg {
	border:0;
	float:right;
	max-width:40%;
	max-height:500px;
}

.storebutton{
	display:inline-block;
	margin:6px 0px 0px 10px;
	border:0px;
	border-radius:0px;
	padding:0px;
	float:right;

	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.storebutton img{
	border:0px;
	margin:0px;
	border-radius:0px;
	width:128px;
	height:37px;
}
.topstorebutton{
	float:none;
	margin:0px 5px 0px 5px;
	position:relative;
	top:-10px;
}
.bottomstorebutton{
	float:none;
	margin:0px 5px 0px 5px;
}

li {
	margin-bottom:0.8em;
}

.blogposts {
	margin:0px;
	padding:0px;
}
.blogposts h3 {
	margin-bottom: 0em;
	margin-top: 1em;
}
.blogposts ul {
	margin-top:0.5em;
	margin-bottom:0;
}
.blogposts li {
	font-size:0.85em;
	margin-bottom:0.4em;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.otherstuff {
	margin-top:0px;
	margin-bottom:0px;
	position:relative;
	top:-10px;
}

.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}

.pageheader{
	width:100%;
	border:0;
}
.banner{
	position:relative;
	width:100%;
	margin: 9px 0 0 0;
	border:none;
	border-radius:var(--main-radius);
}
.bannercaption{
  display: block;
  margin: 0 auto 0 auto;
  text-align: center;
}

.indexmain{
	margin:0;
	padding:0;
}

.nolineheight{
	line-height:0;
}

.presskit{
	display:block;
	float:left;
	width:180px;
	margin:3px;
	padding:0px;
}
.presskit img{
	width:100%;
	margin:0;
	padding:0;
	border:0;
	border-radius:var(--smaller-radius);
}
.presscaption{
	text-align:center;
	position:relative;
	top:-4px;
}
.presscaption a{
	text-decoration:none;
}
a:hover .presskit{
	border-color:var(--linkhover);
	box-shadow:0 0 30px var(--imghoverglow2);
}

a {
	color: var(--linkcolor);
	/*text-shadow:1px 1px 2px white;*/
}
a:hover { 
	color: var(--linkhover)/*#cb72c9*/;
	/*text-shadow:1px 1px 3px white, 1px 1px 3px white;*/
}

.lightbox a {
	color: var(--lightboxlinkcolor);
}
.lightbox a:hover { 
	color: var(--lightboxlinkhover)/*#cb72c9*/;
}

.labelheader {
	display: block;
	font-size:1.1em;
	margin-bottom:0.3em;
	margin-top:0.5em;
}

input[type=text]{
	border: var(--border);
	font-size:1.1em;
	font-family: "Atkinson Hyperlegible", sans-serif;
}

input[type="submit"]{
	cursor:pointer;
}

textarea{
	border: var(--border);
	width:100%;
	max-width:100%;
	font-size:1.05em;
	font-family: "Atkinson Hyperlegible", sans-serif;
}

input[type=file]::file-selector-button {
  margin-right: 20px;
  padding: 10px 20px;
  cursor: pointer;
}

.drop-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100px;
  padding: 20px;
  cursor:pointer;
  transition: background .2s ease-in-out, border .2s ease-in-out;
}

.drop-title {
  color: #444;
}

code {
	font-size:0.85em;
	border:var(--border); 
	border-width:1px;
	border-radius:0;
	background-color: var(--codebg);
	padding:3px;
}

/*#CONTAINER is the rectangle that contains everything but the background!*/
#container {
  margin: 0em auto 4em auto;
  width: 90%;
  max-width: 750px;
  text-align: left;
}

#content {
  padding: 10px 5% 20px 5%;
}


/*HEADER STYLE*/
#header{
	width:100%;
	margin:0px;
	padding:0px;
}
#header2 {
  background-color: var(--headerbg);
  border:var(--border); 
  border-radius:var(--big-radius);
}
#header2 ul {
  list-style-type: none;
  padding: 0.5em 0;
  margin: 0px;
  margin-left: 20px;
  margin-right: 20px;
}
.homebutton{
	text-align:center;
	width:100%;
	font-size:0.85em;
}
#nextprev .homebutton{
	width: auto;
}
#header2 li, .homebutton, .themeselectbutton {
  display: inline-block;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  padding: 0 5% 10px 5%;
}

#content:has(.clerubg){
	background-image: url('../images/clerudance-right.gif');
	background-position: left 30px bottom 5px;
	background-repeat: no-repeat;	
}
#content:has(.bokibg){
	background-image: url('../images/boki_kick_right.gif');
	background-position: left 30px bottom 5px;
	background-repeat: no-repeat;	
}

#lightboxable{
	margin:0;
	padding:0;
}
#lightboxable-placeholder{
	display:none;
	height:10px;
}
.lightbox{
	margin:auto;
	max-height:100vh;
	overflow-y:auto;
}
.gallery-wrapper {
  position: relative;
  background-color: var(--gamebg);
  margin-top: 0.5em;
  margin-bottom: 1em;
  padding-bottom:10px;
  border:var(--border); 
  border-radius:var(--main-radius);
}

.onlylightbox{
	display:none;
}
.onlylightbox.lightbox{
	display:block;
}

.lightbox .gallery-wrapper{
	margin:auto;
	padding:0px;
	overflow: hidden;
	background-color:transparent;
	position: absolute;
	top: 50%;
	left:50%;
	-ms-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	border:0px;
	border-radius:0;
	width:100%;
}
.sixteennine{
	max-width:175vh; /*16:9*/
}
.fourthree{
	max-width:135vh; /*4:3*/
}

.gallery {
  display: flex;
  gap: 8px;
  padding: 0px 16px 0px 16px;
  margin: 0px;

  list-style: none;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gallery::-webkit-scrollbar {
  display: none;
}

.gallerycaption{
  display: block;
  margin: 10px auto 10px auto;
  text-align: center;
}

.galleryitem {
  flex-shrink: 0;
  width: 95%;
  margin:0 5px 0 5px;
  padding:0;

  scroll-snap-align: center;
}

.gallerycaption{
	display:none;
}

.galleryitem img{
	margin:0;
	padding:0;
	cursor:zoom-in;
	width:calc(100% - 6px);
	height:calc(100% - 6px);
	object-fit:contain;
}
.lightbox .galleryitem img{
	cursor:zoom-out;
	width:100%;
	height:100%;
	max-width:95vw;
	max-height:90vh;
	border:0;
}
.lightbox .galleryitem .gallerycaption{
	display:block;
	color:white;
	font-size:19px;
	width:90%;
	margin:10px 0 15px 0;
	/*text-shadow:0px 0px 25px black, 0px 0px 25px black, 0px 0px 25px black;*/
}
.gallerycaption .subcaption{
	position:relative;
	top:2px;
	font-size:0.85em;
}

.gallerycontent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  font-family: sans-serif;
  font-size: 64px;
  font-weight: bold;
  
  flex-direction:column;

  max-height:100vh;
}

.gallerybutton {
  position: absolute;
  top: 50%;

  width:60px;
  height:60px;
  
  margin:0;
  padding:0;

  font-size:2em;
  text-align: center;
  vertical-align: middle;

  transform: translateY(-45%);
  background-size: cover;
  background-position: center center;
}
.lightbox .gallerybutton{
  transform: translateY(-50%);	
}
.gallerybutton:hover{
	filter:brightness(130%);
	cursor:pointer;
}

.lightbox {
  position: fixed;
  z-index: 1;
  margin:0;
  padding:0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0,0,0,0.65);
}
.lightbox h4{
	display:none;
}
.themeselector{
	position:fixed;
	bottom:0;
	right:0;
	text-align:right;
	
	margin:0;
	padding:0;
	
	pointer-events: none;
}
.themeselectbutton{
	pointer-events: auto;
	margin: 0px 5px 0px 5px;
}
@media only screen and (max-width: 900px) {
	.themeselector{
		position:static;
		text-align:center;
		margin-bottom:15px;
	}
	#container{
		margin-bottom:0px;
	}
}

#cusdis_thread, #cusdis_thread iframe{
	overflow:hidden;
}