/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/*
	styles
*/
@font-face {
  font-family: "Silkscreen";
  src:
    local("Silkscreen"),
    url("../fonts/silkscreen/Silkscreen-Regular.ttf") format("truetype");
}
body {
	background: hsl(222, 100%, 3%) url(../img/noise_dark_512.png) repeat;
	color: #4c4c4c;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	
	min-width: 100dvw;
	min-height: 100dvh;

	height: 100%;
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

	/* background-image: url("../img/noise.png"), url("../img/bg2.svg");
	background-blend-mode: soft-light, normal;
	background-position: center;
	background-size: auto, cover; */
}
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
	body {
		min-height: 120dvh;
	}
}
@keyframes think {
	0% {
		opacity: 0;
		filter: blur(1rem);
	}
	100% {
		opacity: 1;
		filter: blur(0rem);
	}
}

#bg {
	position: absolute;
	transform: translate(-50%, -50%);
	object-fit: contain; 
}
/* portait */
@media (max-aspect-ratio: 1) {
  #bg {
	width: auto;
	height: 100%;
  }
}
/* landscape */
@media (min-aspect-ratio: 1) {
  #bg {
	width: 100%;
	height: auto;
  }
}
#thinking {
	font-family: "Silkscreen", cursive, sans-serif;
	animation: think 1s ease-in;
}
@keyframes star1 {
	0%,12%	{opacity: 0;} 
	10% {opacity: 1;}
}
@keyframes star2 {
	0%,10%,14% 	{opacity: 0;} 
	12% {opacity: 1;}
}
@keyframes star3 {
	0%,12%,20%	{opacity: 0;} 
	14% {opacity: 1;}
}
@keyframes star4 {
	0%,14%,30%	{opacity: 0;} 
	16% {opacity: 1;}
}
@keyframes stars_twinkle {
	0%,100% {opacity: 1;}
	50% {opacity: 0.5;}
}
#stars_small,
#stars_big {
	fill: hsl(220, 20%, 98%);
	mix-blend-mode: soft-light;
}
#stars_small {
	animation: stars_twinkle 12s steps(16, start) infinite;
}
#stars_big {
	animation: stars_twinkle 6s steps(16, start) infinite;
}
#star_anim_1,
#star_anim_2,
#star_anim_3,
#star_anim_4 {
	opacity: 0;
}
#star_anim_1 {
	animation: star1 6s steps(6, start) infinite;
}
#star_anim_2 {
	animation: star2 6s steps(4, start) infinite;
}
#star_anim_3 {
	animation: star3 6s steps(4, start) infinite;
}
#star_anim_4 {
	animation: star4 6s steps(6, start) infinite;
}