/*
Theme Name: Shiny Counter Theme
Author: Pascal-Oliver Horn	
Author URI: https://nextlevelseo.de
Description: #donotsteal
Version: 1.0
Text Domain: Shiny Counter
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}body{line-height:1}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important}

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&display=swap');

* {
	font-family: 'Open Sans', sans-serif;
	line-height: 1.7;
	color: white;
	box-sizing: border-box;
}

html,
body,
#background {
	height: 100%;
	width: 100%;
	overflow: hidden;
	color: white;
	animation: background .2s ease-in-out;
	animation: background .2s cubic-bezier(0.65, 0.05, 0.36, 1);
}

/* ----- Background ----- */

@keyframes background {
	0% {
		transform: translateX(-130%);
	}
	100% {
		transform: none;
	}
}
#background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	z-index: -9999;
}
#background::before,
#background::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	transform: skewX(-20deg);
	transition: background .2s ease-in-out;
}
#background::before {
	left: 10%;
	width: 80%;
	background: #e23341;
	z-index: 10;
}
#background::after {
	left: 0;
	width: 100%;
	background: #c02933;
}

#background[data-bg='normal']::before {
	background: #67674a;
}
#background[data-bg='fire']::before {
	background: #b62730;
}
#background[data-bg='fighting']::before {
	background: #771d19;
}
#background[data-bg='water']::before {
	background: #415994;
}
#background[data-bg='flying']::before {
	background: #675994;
}
#background[data-bg='grass']::before {
	background: #4a7b31;
}
#background[data-bg='poison']::before {
	background: #632863;
}
#background[data-bg='electric']::before {
	background: #99801d;
}
#background[data-bg='ground']::before {
	background: #8b7741;
}
#background[data-bg='psychic']::before {
	background: #993654;
}
#background[data-bg='rock']::before {
	background: #726322;
}
#background[data-bg='ice']::before {
	background: #5e8686;
}
#background[data-bg='bug']::before {
	background: #677214;
}
#background[data-bg='dragon']::before {
	background: #452299;
}
#background[data-bg='ghost']::before {
	background: #45365e;
}
#background[data-bg='dark']::before {
	background: #45362d;
}
#background[data-bg='steel']::before {
	background: #727280;
}
#background[data-bg='fairy']::before {
	background: #935f6a;
}
#background[data-bg='normal']::after {
	background: #9f9f72;
}
#background[data-bg='fire']::after {
	background: #c3343d;
}
#background[data-bg='fighting']::after {
	background: #b62e26;
}
#background[data-bg='water']::after {
	background: #6389e4;
}
#background[data-bg='flying']::after {
	background: #9f89e4;
}
#background[data-bg='grass']::after {
	background: #72be4c;
}
#background[data-bg='poison']::after {
	background: #983d98;
}
#background[data-bg='electric']::after {
	background: #ebc52e;
}
#background[data-bg='ground']::after {
	background: #d5b663;
}
#background[data-bg='psychic']::after {
	background: #eb5481;
}
#background[data-bg='rock']::after {
	background: #af9835;
}
#background[data-bg='ice']::after {
	background: #90cdcd;
}
#background[data-bg='bug']::after {
	background: #9faf1e;
}
#background[data-bg='dragon']::after {
	background: #6a35eb;
}
#background[data-bg='ghost']::after {
	background: #6a5490;
}
#background[data-bg='dark']::after {
	background: #6a5444;
}
#background[data-bg='steel']::after {
	background: #afafc5;
}
#background[data-bg='fairy']::after {
	background: #e291a3;
}
#background[data-bg2='normal']::after {
	background: #67674a;
}
#background[data-bg2='fire']::after {
	background: #c3343d;
}
#background[data-bg2='fighting']::after {
	background: #771d19;
}
#background[data-bg2='water']::after {
	background: #415994;
}
#background[data-bg2='flying']::after {
	background: #675994;
}
#background[data-bg2='grass']::after {
	background: #4a7b31;
}
#background[data-bg2='poison']::after {
	background: #632863;
}
#background[data-bg2='electric']::after {
	background: #99801d;
}
#background[data-bg2='ground']::after {
	background: #8b7741;
}
#background[data-bg2='psychic']::after {
	background: #993654;
}
#background[data-bg2='rock']::after {
	background: #726322;
}
#background[data-bg2='ice']::after {
	background: #5e8686;
}
#background[data-bg2='bug']::after {
	background: #677214;
}
#background[data-bg2='dragon']::after {
	background: #452299;
}
#background[data-bg2='ghost']::after {
	background: #45365e;
}
#background[data-bg2='dark']::after {
	background: #45362d;
}
#background[data-bg2='steel']::after {
	background: #727280;
}
#background[data-bg2='fairy']::after {
	background: #935f6a;
}

/* ----- Basics and Misc ----- */
#wrapper {
	display: grid;
	height: 100%;
	width: 60%;
	margin: 0 auto;
	align-items: center;
	text-transform: uppercase;
	transform: skewX(-20deg);
	grid-template-rows: 1.2fr 3fr .5fr;
}

#header,
#shiny-wrapper,
#shiny-actions,
#footer {
	transform: skewX(20deg);
}

/* ----- Header ----- */
#pagename {
	font-size: 4em;
}

#pagename span {
	display: block;
	font-size: .5em;
}

/* ----- Shiny Mon Auswahl ----- */

#searchMonlist {
	background: rgba(0,0,0,.15);
	padding: .5em 1em;
	font-size: 2em;
	font-weight: bold;
	border: none;
	width: 100%;
	transition: all .4s ease-in-out;
}

#searchMonlist:focus {
	outline: none;
	animation: plop .2s ease-in-out;
}

@keyframes plop {
	0% {
		transform: none;
	}
	25% {
		transform: scale(1.05);
	}
	50% {
		transform: scale(.95);
	}
	100% {
		transform: none;
	}
}

input::placeholder {
	color: rgba(255,255,255,.5);
}

.isset #searchMonlist,
.isset #montosearch {
	display: none;
}

#montosearch > div {
	position: relative;
	background: white;
	padding: .5em 1em;
	font-size: 1.5em;
	margin-top: 1rem;
	overflow: hidden;
	animation: flyin .4s ease-in-out;
}

#montosearch > div::after {
	position: absolute;
	top: .25rem;
	right: .5rem;
	bottom: .25rem;
	padding: 0 1rem;
	content: "Start";
	background: #2cc029;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	cursor: pointer;
	font-size: .75em;
}

@keyframes flyin {
	0% {
		max-height: 0px;
	}
	100% {
		max-height: 100px;
	}
}

#montosearch span {
	color: #222;
}

#montosearch span:nth-child(n+3) {
	display: none;
}

.dex-number::before {
	content: "#";
}

#chosenmon > div {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-areas: "warn warn warn warn" "dex name name name" "type1 total att spa" "def sdf hp spd" "step step step step";
	font-weight: bold;
	grid-gap: 10px;
	align-items: center;
	text-align: left;
}

#chosenmon.two-types > div {
	grid-template-areas: "warn warn warn warn" "dex name name name" "type1 type2 att spa" "def sdf hp spd" "step step step step";
}

#chosenmon .dex-number {
	grid-area: dex;
	font-size: 2.5em;
	text-align: left;
}
#chosenmon .mon-name {
	grid-area: name;
	font-size: 2.5em;
	text-align: left;
}
#chosenmon .mon-type-1 {
	grid-area: type1;
}
#chosenmon .mon-type-2 {
	grid-area: type2;
}
#chosenmon .stats-total {
	grid-area: total;
}
#chosenmon .stats-att {
	grid-area: att;
}
#chosenmon .stats-spa {
	grid-area: spa;
}
#chosenmon .stats-def {
	grid-area: def;
}
#chosenmon .stats-sdf {
	grid-area: sdf;
}
#chosenmon .stats-hp {
	grid-area: hp;
}
#chosenmon .stats-spd {
	grid-area: spd;
}
#chosenmon .egg-steps {
	grid-area: step;
	font-size: 1.35em;
	margin: .5em 0;
}

#chosenmon .egg-steps::before {
	content: url(images/stopwatch.svg);
	filter: invert(1);
	width: 1em;
	height: 1em;
	display: inline-block;
	margin-right: .5em;
}

#chosenmon .breed-locked,
#chosenmon .ditto-only,
#chosenmon .shiny-locked {
	position: relative;
	grid-area: warn;
	background: rgba(0,0,0,.15);
	font-size: 1.35em;
	border-radius: 12px;
	padding: .5em .5em .5em 4em;
	box-sizing: border-box;
}

#chosenmon .breed-locked::before,
#chosenmon .ditto-only::before,
#chosenmon .shiny-locked::before {
	content: ""url(images/warning.svg);
	position: absolute;
	top: 50%;
	left: .35rem;
	width: 3rem;
	filter: invert(1);
	transform: translateY(-50%);
}

/* ----- Clock ----- */

#shiny-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	align-items: center;
	grid-gap: 20px;
	transition: all .2s ease-in-out;
}

#shiny-wrapper.isset {
	grid-template-columns: 1fr;
}

#shiny-wrapper.isset #shiny-options {
	display: none;
}

#shiny-actions {
	font-weight: bold;
	text-align: center;
	margin-top: 3em;
}

#shiny-clocks {
	font-size: 2.5em;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 2em;
}
#shiny-clocks span {
	line-height: 1;
	display: block;
}
#shiny-clock-counter {
	font-size: 2em;
}

#shiny-estimate span:last-child {
	font-size: .5em;
}

/* ----- Options ----- */

#shiny-options {
	font-weight: bold;
	font-size: 1.35em;
}
#shiny-wrapper input[type='checkbox'] {
	display: none;
}
#shiny-wrapper .checkbox {
	position: relative;
	padding-left: 3.5rem;
	margin-right: 2rem;
	display: inline-flex;
	align-items: center;
	height: 2.5rem;
	margin-bottom: 1em;
}
#shiny-wrapper .checkbox::before,
#shiny-wrapper .checkbox::after {
	position: absolute;
	left: 0;
	content: "";
	height: 2.5rem;
	width: 2.5rem;
}
#shiny-wrapper .checkbox::before {
	background: rgba(0,0,0,.15);
}
#shiny-wrapper .checkbox::after {
	position: absolute;
	left: 0;
	content: url(images/check-solid.svg);
	filter: invert(1);
}

/* ----- Monlist ----- */
#monlist {
	display: none;
}

/* ----- Buttons -----*/
#shiny-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.shiny-button {
	cursor: pointer;
}

.shiny-button::before {
	content: "";
	width: 250px;
	height: 250px;
	background: white;
	border-radius: 50%;
	margin-bottom: 1em;
	display: block;
}

.shiny-button h3 {
	font-size: 1.35rem;
}
.shiny-button > span {
	font-size: 1rem;
}
.shiny-button .key {
	display: inline-block;
	border-radius: 4px;
	padding: .25em;
	border: 1px solid;
	min-width: 2em;
}

@media (max-width: 959px) {
	#wrapper {
		width: 70%;
		transform: none;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		grid-template-rows: 70px 1fr 0;
	}
	#header, 
	#shiny-wrapper, 
	#shiny-actions, 
	#footer {
		transform: none;
	}
	#background::before {
		left: -10%;
		width: 120%;
	}
	#background::after {
		left: -20%;
		width: 140%;
	}
	#pagename {
		font-size: 1.35em;
		text-align: right;
	}
	#shiny-wrapper {
		grid-template-columns: 1fr;
	}
	#searchMonlist,
	#montosearch > div,
	#shiny-options,
	#chosenmon .egg-steps	{
		font-size: 1rem;
	}
	#chosenmon .mon-name,
	.egg-steps {
		text-align: center;
	}
	#chosenmon .breed-locked,
	#chosenmon .ditto-only,
	#chosenmon .shiny-locked {
		font-size: .8rem;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,.85);
		animation: warning 5s ease-in-out forwards;
		z-index: 10;
	}
	#chosenmon .breed-locked::before,
	#chosenmon .ditto-only::before,
	#chosenmon .shiny-locked::before {
		width: 1.5rem;
	}
	#shiny-wrapper {
		font-size: .7em;
	}
	#shiny-wrapper .checkbox {
		padding-left: 2rem;
		margin-right: 0;
		display: block;
		margin-bottom: .7rem;
		height: auto;
	}
	#shiny-wrapper .checkbox::before,
	#shiny-wrapper .checkbox::after {
		height: 1.5rem;
		width: 1.5rem;
	}
	#chosenmon > div {
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 5px 20px;
		grid-template-areas: "dex name name" "step step step" "warn warn warn";
	}
	#copyright {
		position: fixed;
		bottom: 5px;
		left: 5px;
		width: 70%;
		font-size: .75em;
	}
	.mon-type-1,
	.mon-type-2,
	.stats-total,
	.stats-att,
	.stats-spa,
	.stats-def,
	.stats-sdf,
	.stats-spd,
	.stats-hp,
	.stats-hp,
	.shiny-button > span,
	.shiny-button::before	{
		display: none;
	}
	#shiny-actions {
		font-size: .6em;
		margin-top: 1em;
	}
	#shiny-clocks {
		flex-wrap: wrap;
		margin-bottom: 1em;
	}
	#shiny-clock {
		margin-bottom: 1em;
	}
	.shiny-button {
		background: rgba(0,0,0,.15);
		border-radius: 12px;
		width: 100%;
		margin-bottom: 1em;
		padding: .75em 0;
	}
	.shiny-button h3 {
		font-size: 1.125rem;
	}
	
	.pressed {
		animation: plop .2s ease-in-out;
	}
}
@keyframes warning {
	0%, 95% {
		opacity: 1;
		transform: none;
	}
	100% {
		opacity: 0;
		transform: translateY(100%);
	}
}
@media (min-width: 960px) {
	.counter {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 250px;
		line-height: 250px;
		font-size: 4em;
		color: #222;
	}
	.shiny-button {
		position: relative;
	}
}