/* Reset
-------------------------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}
table{border-collapse:separate;border-spacing:0;margin-bottom:1.4em;}
caption,th,td{text-align:left;font-weight:400;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"";}

body
{
	font: normal 100% 'Roboto', Sans-Serif;
	-webkit-text-size-adjust: 100%;
  	-ms-text-size-adjust: 100%;overflow-x:hidden;
	background-color: white;
}
body, html {
	height: 100%;
	display: grid;
}
#ShrimpfestViewModel { /* thing to center */
	margin: auto;
}

@media screen and (min-width: 35.000em) { /*600px*/
	body {font-size: 100%;}
}
@media screen and (min-width: 37.500em) { /*600px*/
	body {font-size: 112.5%;}
}
@media screen and (min-width: 50.000em) { /*800px*/
	body {font-size: 125.0%;}
}
@media screen and (min-width: 64.375em){ /*1030px*/
	body {font-size: 130%;}
}
@media screen and (min-width: 81.000em) { /*1100px*/
	body {font-size: 150%;}
}
@media screen and (min-width: 90.000em) and (min-height:31.250em) { /*1200px X 500px*/
	body {font-size: 175%;}
}

.timeWrap{
	width:75%;
	min-width: 775px;
	max-width: 1200px;
	margin: 0 auto 0 auto;
	padding: 50px 0 10px 0;
	
	text-align: center;
}
#confetti{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
#timer{
	display: block;
	font-size: 5em;
	margin-top: 1rem;
	margin-bottom: 1rem;
	font-weight: bold;
}
#title{
	font-size: 4em;
	display: block;
	font-weight: bold;
}
#caption{
	display: block;
	font-size: 3em;
}

img{width: 250; height: 250px; object-fit: cover;}
a {margin: auto; width:fit-content; display:block;}

@media screen and (max-width: 760px){
	.timeWrap{min-width: 0px;}
	#timer{font-size: 4em;}
	#title{font-size: 3em;}
	#caption{font-size: 2em;}
	img {width: 200px; height: 200px;}
}

/*--- mobile ---*/
@media screen and (max-width: 480px){
	.timeWrap{min-width: 0px;}
	#timer{font-size: 3em;}
	#title{font-size: 2em;}
	#caption{font-size: 1.5em;}
	img {width: 150px; height: 150px;}
}