:root{
	--contentWidth:800px;
	--sidebarWidth:calc((100% - var(--contentWidth)) / 2);
	--sidebarImageWidth: 180px;
	--footerHeight:30px;
	--border: 2px solid black;
	
	--primaryColour:hsl(120,100%,60%);
	--secondaryColour:hsl(120,100%,5%);
	
	--verticalMargin:20px;
}

::selection{
	color:var(--secondaryColour);
	background:var(--primaryColour);
}

html{
	scroll-behavior: smooth;
	
}

html.effects .sidebar,
html.effects #maincolumn,
html.effects header,
html.effects footer{
	filter:drop-shadow(0px 0px 5px var(--primaryColour));
}

a:visited,a:link{
	color:unset;
}

.desktoponly{
	display:unset;
}

.mobileonly{
	display:none !important;
}

body{
	color: var(--primaryColour);
	font-family:console;
	margin:0px;
	overflow-x:hidden;
	position:relative;
	min-height:calc(100vh - var(--footerHeight));
	padding-bottom: var(--footerHeight);
	font-size:20px;
	background: var(--secondaryColour);
}

html.effects, html.effects label{
	cursor: url("cursor-default-green.png") 5.5 4.5, auto;
}



#metacontent{
	margin-top:50px;
	margin-bottom:50px;
}

#content.comicview #metacontent{
	display:none;
}

#content:not(.comicview) #panels{
	display:none;
}

img{
	filter:none;
}

html.effects body::after {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.3;
  background: url("longscanline.gif"),repeating-linear-gradient(0deg, black 0px, white 2px, black 4px);
  background-size: 100% 100%, auto;
  background-blend-mode: screen, normal;
}

html.effects .defacementcontainor img{
	opacity:0.75;
}

@font-face {
	font-family: console;
	src: url("Modenine-2OPd.ttf") format("truetype");
}

#maincolumn{
	width:var(--contentWidth);
	margin:auto;
	mix-blend-mode: screen;
}

/* #content div{
	border:var(--border);
	padding:10px;
	display: inline-block;
} */

#recentActivityButton {
  display: block;
  margin-top: var(--verticalMargin);
  margin-bottom: var(--verticalMargin);
}

#content{
	width:100%;
	margin:auto;
	margin-bottom:var(--footerHeight);
	text-align:center;
}

#content :is(img,iframe){
	max-width:100%;
	display:block;
	margin:auto;
	//margin-top: 50px;
	//margin-bottom: 50px;
	//border: var(--border);
	//border-color: var(--primaryColour);
	//background: var(--primaryColour);
	//filter: drop-shadow(0px 0px 5px var(--primaryColour));
}

#content iframe{
	border:none;
	width: 100%;
	max-width:800px;
}

header{
	width: var(--contentWidth);
	margin:auto;
}

header img{
	margin-top:20px;
	width:100%;
}

footer{
	margin-top: 100px;
	text-align: center;
	position: absolute;
	width: 100%;
	max-width: unset;
	bottom: 0;
	margin-bottom: 5px;
	opacity: 0.5;

}

footer:hover{
	opacity: 1;
}

.sidebar{
	width:var(--sidebarWidth);
	position:fixed;
	top:0;
	height:100dvh;
	display:flex;
	justify-content: space-evenly;
	align-items: center;
	flex-direction: column;
}

.sidebar a{
	display:block;
	margin-top:5px;
	margin-bottom:5px
}

.sidebar.right{
	right:0px;
}

.sidebar.left{
	left:0px;
}

.sidebar>div{
	width:calc(100% - 90px);
	max-width:480px;
	position:relative;
	border: var(--border);
	border-color: var(--primaryColour);
	padding:5px;
}

/* .sidebar.right a{
	width:var(--sidebarImageWidth);
	max-width:calc(90% - 10px);
	display: block;
	margin: auto;
} */

a,.clickable{
	cursor:pointer;
	text-decoration: none;
	font-weight:bold;
}

html.effects :is(a,.clickable,[type="radio"], label){
	cursor:url("cursor-pointer-green.png") 13 3, auto;
}



html.effects :is([type="text"]){
	cursor: url("cursor-text-green.png") 16 16, auto;
}

a.disabled{
	cursor:not-allowed;
}

html.effects a.disabled{
	cursor: url("cursor-disabled-green.png") 16 16, auto;
}

:is(.sidebar,#content,#metadatamodetoggle) a::before{
	content:">";
}

:is(.sidebar,#content,#metadatamodetoggle) a::after{
	content:"<";
}

:is(.sidebar,#content,#metadatamodetoggle) a:not(.blinking):hover::after,
:is(.sidebar,#content,#metadatamodetoggle) a:not(.blinking):hover::before{
	animation-name:slowblink;
	animation-iteration-count: infinite;
	animation-duration: 1s;
    animation-timing-function: step-end;
}

.sidebar img{
	max-width:100%;
}

.navbar{
	width:100%;
	margin:auto;
	margin-top:var(--verticalMargin);
	margin-bottom:var(--verticalMargin);
	display: flex;
	justify-content:space-around;
	position: relative;
	z-index: 1;
}

.navbar a{
	font-size:2em;
	border:var(--border);
	border-color: var(--primaryColour);
	padding:10px
}

#metadatamodetoggle{
	text-align:center;
	border:var(--border);
	border-color: var(--primaryColour);
	padding:5px;
	margin-top: var(--verticalMargin);
	margin-bottom: var(--verticalMargin);
}

.previewlink:hover,
.indexentry:hover{
	transform:translateY(-4px);
	z-index:1;
}

table{
	border-collapse:collapse;
	width:100%;
}

th,td{
	border:var(--border);
	border-color: var(--primaryColour);
	padding:10px;
}



h1,h2,h3{
	text-align:center;
}

h1{
	margin-top:0px;
	margin-bottom:0px;
	font-size:5em;
}

h2{
	font-size:2.5em;
	margin-top: var(--verticalMargin);
	margin-bottom: var(--verticalMargin);
}

h2::before,h2::after,h3::before,h3::after{
	content:"-";
}

.disabled{
	opacity:0.33;
}

#firstAndLast{
  width:100%;
  margin:auto;
  margin-top:50px;
  position:relative;
}

#firstAndLast img{
  width:calc(50% - (50px * 0.5));
  display:inline-block;
}

#firstAndLast a:nth-child(2) img{
  position:absolute;
  right:0;
}

#index a{
	text-align: center;
}

.textcursor, .blinking{
	animation-name:slowblink;
	animation-iteration-count: infinite;
	animation-duration: 1s;
    animation-timing-function: step-end;
}

@keyframes slowblink{
	0% {opacity:0}
	50% {opacity:1}
}

.button{
	cursor: pointer;
}

.defacementcontainor {
  width: 80%;
  aspect-ratio: 1/1;
  overflow:scroll;
  margin:auto;
  border:var(--border);
  border-color:var(--primaryColour);
  position:relative;
  cursor: zoom-out;
}

#content .defacementcontainor img{
  max-width:unset;
  margin:0
}

.defacementcontainor.overview img {
  width: 100%;
}

.defacementcontainor.overview{
  aspect-ratio: unset;
  overflow: hidden;
  cursor: zoom-in;
}

.comicfooter {
  border: var(--border);
  border-color: var(--primaryColour);
  padding: 5px;
  margin-top: var(--verticalMargin);
  margin-bottom: var(--verticalMargin);
}

input[type="text"]{
  background:none;
  color:unset;
  font-family: unset;
  font-size: unset;
  border: var(--border);
  border-color: var(--primaryColour);
  max-width:100%;
}



input[type="text"]:focus{
	outline:1px solid var(--primaryColour);
}

input[type="submit"]{
  background:none;
  color:white;
  border:none;
  color: unset;
  font-family: unset;
  font-size: unset
}

[type="radio"] {
  height: 1em;
  width: 1em;
  appearance: none;
  border: var(--border);
  border-color: var(--primaryColour);
}

[type="radio"]:checked {
  background: var(--primaryColour);
}





/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

*{
	scrollbar-color: var(--primaryColour) var(--secondaryColour);
}

.hidden{
	display:none;
}





@media only screen and (max-width: 1300px) {
	
	:root{
		--contentWidth:100%;
		--sidebarWidth:200px;
		--footerHeight:20px;
	}
	
	.sidebar{
		width:100%;
		margin:auto;
		height:unset;
		position:relative !important;
		top:unset;
		display: flex;
		flex-wrap: wrap;
		justify-content:space-around;
	}
	
	.sidebar div{
		margin-bottom:30px;
		margin-bottom:30px;
	}
	
	.desktoponly{
		display:none !important;
	}

	.mobileonly{
		display:unset;
	}
	
	.sidebar.mobileonly{
		display:flex !important;
	}
	
	body{
		width:100%;
		min-width:590px;
	}
	
	header{
		margin-top:0px;
	}
	
	.navbar{
		margin-top:5%;
		margin-bottom:5%;
	}
	
	.hidden{
		display:none;
	}
}