@charset "UTF-8";
/* CSS Document */

.theme-light {
	--logo:#666;
	--fill:#FFF;
	--text:#000;
	--table: #CCC;
	--selection:#FFF;
	--cover:#999;
	--dark:#666;
	--caption:#999;
	--footer:#999;
	--footerback:#E3E3E3;
	--darker:#333;
	--strong:#000;
	--slider:#666;
	--toggleback:#F3F3F3;
	--grad:linear-gradient(180deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, 0));
	--photoshadowlight: rgb(0,0,0,.3);
	--photoshadow: rgb(0,0,0,.5);
}
.theme-dark {
	--logo:#999;
	--fill:#24282d;
	--text:#EEE;
	--table: #666;
	--selection:#000;
	--cover:#666;
	--dark:#999;
	--caption:#666;
	--footer:#666;
	--footerback:#111;
	--darker:#666;
	--strong:#CCC;
	--slider:#999;
	--toggleback:#333;
	--grad:linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
	--photoshadowlight: rgb(0,0,0,.5);
	--photoshadow: rgb(0,0,0,.8);
}

html, body {
	background-color:var(--fill);
	color: var(--text);
}

nav#headline UL LI,
article#single #content HR {border-color: var(--fill);}
td, tr { border-color: var(--table);}
::selection {background: var(--selection);}
.loader_cover { background-color: var(--selection);}
#svglogo { fill: var(--logo);}
#cover-art.just-opened {background-color: var(--caption);}
#archives h1,
nav.pagenation ul li.current,
header nav li a { color: var(--dark);}
figcaption P { color: var(--text);}
figcaption { color: var(--caption);}
footer small { color: var(--footer);}
.page footer,
.single footer,
.archive footer{background-color: var(--footerback);}
#archives .message{color: var(--dark);}
article#single UL#tag,
article#single UL#tag a,
#archives h1 span::before,
article#single UL::before,
nav#info UL LI time,
article#single .pillar,
article#single .pillar a { color: var(--dark);}
#archives ul#cat-list,
#archives ul#year-list,
#archives ul#tag-list {
	color: var(--dark);
}


#archives ul#cat-list li .current,
#archives ul#cat-list li .current::before{
	color: var(--strong)!important;
}
article.page H2 {border-color: var(--strong);}

#archives ul#tag-list li { border: 1px solid var(--cover); }
#archives ul#tag-list li a { color: var(--cover)!important; }
#archives ul#tag-list .current { color: var(--strong); border-color:var(--strong); }

body.single main::before {background-image: var(--grad);}
body.single main::before {background-image: var(--grad);}

#archives ul.board li .photo{
	box-shadow: 0px 0px 8px 0 var(--photoshadowlight);
}
#archives ul.board li .photo::before,
#archives ul.board li .photo.diagonal::after,
#archives ul.board li .photo.right-both::after,
#archives ul.board li .photo.both-side::after{
	box-shadow: 0px 10px 8px 0 var(--photoshadow);
}
#archives ul.board li .photo:hover {
	box-shadow: 5px 5px 20px 0 var(--photoshadow);
}

/* toggle css */
.toggler {
	text-align: center;
	margin: .5rem 0;
	line-height: 1em;
}

.switch {
	position: relative;
	display: inline-block;
	margin: auto;
	width: 2rem;
	height: 1rem;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--toggleback);
	-webkit-transition: .3s;
	transition: .3s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 1rem;
	width: 1rem;
	left: 0px;
	margin: auto 0;
	-webkit-transition: .3s;
	transition: .3s;
	background-color: var(--slider);
	box-shadow: 0 0px 5px var(--footer);
}

input#slider:checked + .slider {
  background-color: var(--toggleback);
}

input#slider:focus + .slider {
  box-shadow: 0 0 1px var(--toggleback);
}

input#slider:checked + .slider:before {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}

/* Rounded sliders */
.slider.round {
	border-radius: 1em;
}

.slider.round:before {
	border-radius: 50%;
}