:root {
	--background-color: #111;
	--font-color: #FFF;
	--current-color: #222;
}

html{
	font-size: 14px;
	font-family: Avenir,Helvetica,Arial,sans-serif;
	line-height: 1.2;
	background: var(--background-color);
	color: var(--font-color);
}
body{
	margin: 0;
}
input{
	font: inherit;
	color: inherit;
	background: var(--current-color);
}
input[type=range]{
	width: 70%;
	max-width: 400px;
}
hr{
	border: 0;
	border-top: 1px solid rgba(128,128,128,.2);
	margin: 40px auto 20px;
	width: 50%;
	max-width: 400px;
}
hr.min{
	border-top-color: rgba(128,128,128,.1);
	width: 20%;
}
a{
	color: aqua;
	text-decoration: none;
}
input[type="search"]{
	display: block;
	border: 0;
	margin: 0 auto;
	padding: 1em;
	outline: none;
	width: 100%;
	font-size: 16px;
	line-height: 1;
	text-align: center;
	-webkit-appearance: none;
	appearance: none;
}

input[type="search"]::-webkit-search-cancel-button{
	display: none;
}
input[type="search"]::-webkit-input-placeholder{
    position: relative;
    top: 1px;
}
[data-image-length="0"] input[type="search"]{
	margin: 6em auto 2em;
	width: 60%;
}
.images-box{
	overflow: hidden;
	position: relative;
}
.image-item{
	position: absolute;
}

.image-link{
	display: block;
	color: currentColor;
	background: currentColor;
}
.image-origin-link{
	display: block;
	transition: opacity .3s ease;

	color: var(--font-color);
	/* background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2), rgba(0,0,0,.5), rgba(0,0,0,.8)); */
	
	text-shadow: 1px 1px 0 rgba(0,0,0,.2);
	
	/* padding:20px 6px 4px 6px; */
	padding: 4px 6px;
}

#el[data-simple="true"] .image-origin-link{
	display: none;
}


.image-origin-link span{
	display: block;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 
}
.image-origin-link .link{
	font-size:12px;
	opacity: .5;
}
img{
	display: block;
}
[data-runing="true"]{
	cursor: wait;
}
[data-runing="true"]>*{
	pointer-events: none;
}
[v-cloak]{
	display: none;
}
.page-box{
	display: flex;
	flex-wrap: nowrap;
}
.more-btn,
.page-number{
	/* flex-grow:1; */
	display: block;
	padding: 1em .5em;
	text-align: center;
}
.more-btn{
	cursor: pointer;
	flex-grow: 3;
	background: var(--current-color);
}
.page-number{
	flex-grow: 1;
}
.welcome-box{
	text-align: center;
	padding: 50px 25px 100px;
}
footer{
	
	text-align: center;
	padding: 1em 0 2em;
}

[data-image-length="0"] footer{
	display: none;
}
.checkbox-text-switch{
	cursor: pointer;
}
.checkbox-text-switch span{
	text-decoration: line-through;
}
.checkbox-text-switch input{
	display: none;
}
.checkbox-text-switch input:checked ~ span{
	text-decoration: none;
}

.point{
	margin: 0 .2em;
}




#el[data-animation="true"] input[type="search"]{
	transition: margin .3s ease,width .3s ease;
}

#el[data-animation="true"] .image-item{
	transition: all .3s ease;
}