@charset "UTF-8";

:root
{
  --text: #0071bc;
  --link: #00b1ff;
  --subtle: #aaa;
  --bg: #ffffff;
  
  --playdate-yellow: #ffc833; /
}

@supports (color: color(display-p3 1 1 1 / 1))
{
	:root
	{
		--playdate-yellow: color(display-p3 1 0.784 0.2);
	}
}

*,
*:before,
*:after
{
  box-sizing: border-box;
}

html
{
  font-size: 1vw;
}

body
{
  font-size: 2.4rem;
}

body.playdate
{
	/* background-color: var(--playdate-yellow); */
}

html
{
  margin: 0;
  padding: 0;
  position: relative;
}

body
{
  margin: 0;
  padding: 0 5rem;
  color: var(--text);
  background: var(--bg);
  font-family: 'roobert', sans-serif;
}

main,
footer
{
  margin: 5rem auto;
  max-width: 90rem;
}

main p
{
	text-align: center;
}

a
{
	text-decoration: none;
	color: inherit;
}

/* Videos */

ul.videos,
ul.links
{
	padding: 0;
	margin: 0;
	
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
}
.videos li,
.links li
{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.videos li iframe,
.videos li img
{
	width: 100%;
	aspect-ratio: 1.7777 / 1;
	
	height: auto;
	border-radius: .75rem;
}

.videos .big
{
	grid-column: 1 / span 2;
}

.page-header
{
  display: grid;
  column-gap: 6rem;
}

.page-header h1
{
  grid-column: 1;
  grid-row: 1 / span 2;
  color: transparent;
  position: relative;
  margin: 0;
  width: 40rem;
  height: 24rem;
  place-self: center;
}

header a#panic
{
	text-indent: -9999px;
	color: transparent;
	
	width: 20rem;
	height: 10rem;
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	
	background-image: url('/img/panic-live.svg');
}

ul.links 
{	
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	
	max-width: 60rem;
	margin: 1em auto 2em auto;
}

ul.links li a
{
	display: inline-block;
	background: var(--link);
	color: var(--bg);
	padding: .5em 1.5em;
	border-radius: 1.5em;
}

/* Footer */

footer ul
{
	list-style: none;
	margin: 0;
	padding: 0;
	/* text-align: center; */
	color: var(--subtle);
}

footer ul li
{
	display: inline;
	
	font-size: 80%;
}
footer ul li::after
{
	content: '•';
}
footer ul li:last-child::after
{
	content: '';
	display: none;
}

footer ul li a
{
	text-decoration: none;
	color: var(--subtle);
}

/* Sizes */

@media (min-width: 720px)
{
	ul.videos
	{
  		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1000px)
{
  html
  {
	font-size: 10px;
  }
}