html,div,dl,dt,dd,ul,ol,li,pre,form,label,fieldset,p,blockquote,input{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;margin:0;padding:0}
html{background:#FFF;color:#333;font:.875em/1.5 "Helvetica Neue",Arial,sans-serif;text-align:center}
body{max-width:40em;margin:0 auto;padding:.5em}

h1{font-weight:700;font-size:2em;margin:0}
h2{font-weight:400;color:#666;font-size:1.25em;font-style:italic;font-family:Georgia,serif;margin:.25em 0 .5em}

p,ul,ol{margin:0 0 1em}
article,section{margin:1em 0}

a,button.text{color:#000;text-decoration:none;border-bottom:1px solid #AAA}
a:hover,button.text:hover{color:#666}

fieldset{border:0;cursor:default;line-height:2;margin:1em 0}
label{white-space:nowrap}
label,select,button{margin-right:1em}
label select,button:last-child{margin:0}
input[type="checkbox"]{vertical-align:baseline;margin-right:.25em}
button,input[type="button"],input[type="submit"]{cursor:pointer}
#controls input[type="submit"]{font-size:1em;padding:.125em .25em}
abbr{cursor:help;border-bottom:1px dotted;text-decoration:none}
.clear{clear:both}
.hidden{visibility:hidden}
.invisible{display:none !important}
.male{color:blue}
.female{color:deeppink}

header{margin:1em 0}

.menu,.menu:before{border:1px solid #000;border-radius:2px}
.menu{padding:.5em 1em;border-bottom-width:2px;position:relative;z-index:10;margin:0 auto}
.menu:before{border-top-width:2px;content:"";display:block;position:absolute;z-index:-1;top:1px;left:1px;right:1px;bottom:1px}

.dropdown{position:relative;display:inline-block}
.dropdown > button:after{content:"";border:.3em solid transparent;border-top-color:currentColor;
	display:inline-block;margin-left:.25em;transform:translateY(0.15em)}
.dropdown .popup{position:absolute;top:calc(100% - 0.25rem);background:#EEE;box-shadow:0 0 .25em currentColor;
	line-height:1.5;text-align:left;display:none;padding:.5em;border-radius:2px;z-index:20}
.dropdown .popup.visible{display:block}
.dropdown > .popup ul{margin:0;padding:0}
.dropdown > .popup li{list-style:none;margin:.25em 0}

.loading:after{position:absolute;top:50%;right:4%;z-index:-2;content:"";width:1em;height:1em;margin:-1em 0 0;
	border-radius:1em;border:.25em solid;border-color:currentColor transparent;
	animation:1.25s linear infinite rotate, .5s ease-out 0s 1 fadeIn}

#history{margin:1em 0 0;display:flex;justify-content:space-between}
button.text{background:transparent;color:inherit;border:0;padding:0}

#results li,#shinies li{display:inline-block;height:3em;padding-top:128px;width:33%;min-width:138px;margin-bottom:1em;position:relative;list-style:none}
#results li{animation:0.5s ease-out 0s 1 fadeIn}
#results .nature{color:#888}.star{color:#F4D04D}
#results li.shiny:before,#results li.shiny:after,#results li.shiny .star:before,#results li.shiny .star:after{
	content:"\2605";position:absolute;top:64px;left:50%;font-size:.75em;opacity:0;pointer-events:none;z-index:100}
#results li.shiny:before      {animation:.6s steps(8) .075s 1 rotateStar, .075s alternate steps(2) infinite shine;font-size:1.5em}
#results li.shiny:after       {animation:.6s steps(8) .150s 1 rotateStar, .075s alternate steps(2) infinite shine}
#results li.shiny .star:before{animation:.6s steps(8) .225s 1 rotateStar, .075s alternate steps(2) infinite shine}
#results li.shiny .star:after {animation:.6s steps(8) .300s 1 rotateStar, .075s alternate steps(2) infinite shine}
#results img,#shinies img{position:absolute;bottom:3em;left:50%;transform:translateX(-50%)}
#results li.imageless{font-weight:700;margin:2em 0;height:auto;padding:0}

#shiny-toggler{margin-bottom:.5em}
#shinies{margin-top:1em}
#shinies li{width:138px}
#shinies .date{color:#888}
#shiny-container button{margin-bottom:1em}
#shiny-toggler.is-showing .is-hiding,#shiny-toggler.is-hiding .is-showing{display:none}

footer{font-size:.875em;padding:3em 0;color:#666;clear:both}

@media screen and (max-width:27em){header{font-size:.75em}}
@media screen and (max-width:21em){header{font-size:.625em}}

@media screen and (prefers-color-scheme: dark) {
	html{background:#222;color:#FFF}
	h2,footer{color:#CCC}
	.menu,.menu:before{border-color:#FFF}
	.dropdown .popup{background:#111}

	a,button.text{color:#DDD;border-bottom-color:#777}
	a:hover,button.text:hover{color:#FFF}

	.male{color:lightblue}
	.female{color:pink}
}

/* Mobile Safari doesn't display this animation smoothly unless I add another CSS declaration. */
@keyframes fadeIn { from {opacity:0} to {opacity:1;color:inherit} }
@keyframes rotate { from {transform:rotate(0deg)} to {transform:rotate(360deg)} }
@keyframes shine {
	from{color:#F8F838;text-shadow:2px 0 #F88008, -2px 0 #F88008, 0 2px #F88008, 0 -2px #F88008}
	to  {color:#F8F8F8;text-shadow:2px 0 #F8F838, -2px 0 #F8F838, 0 2px #F8F838, 0 -2px #F8F838}
}
@keyframes rotateStar {
	from{opacity:1;transform:rotate( .4turn) translate(45px) rotate(-.4turn)}
	to  {opacity:1;transform:rotate(-.5turn) translate(45px) rotate( .5turn)}
}