@dotdist: 12px;

@viewport {
   width: device-width;
   user-zoom:fixed;
}

body {
    margin: 0;
    background: #0a0a0a;
    font-family: Arial, serif;
    overflow:hidden;
}

[data-container=panel] {
	background-color: rgba(8, 8, 8, 0.68);
	border: solid 1px #252525;
	box-shadow: 0 2px 1px #000000;
	padding: 6px;
	float:left;
	box-sizing: border-box;
	height:100%;
	width:100%;
	overflow: hidden;
}

[data-container=panelContainer] {
	float: left;
  width: 100%;
  height: 100%;
  /*padding: 4px;*/
	padding: 0.2vw;
  box-sizing: border-box;
}

[data-container=split] {
	box-sizing: border-box;
/*	display: flex;
	flex-direction: column;*/
	height:100%;
	width:100%;
	float: left;
}

[data-container=cycler] {
	width:100%;
	float:left;
	height:100%;
	box-sizing: border-box;
	//display:none;
}

[data-container=cycleContainer]:extend([data-container=cycler]) {
	display:none;

}

[data-container=noscript]:extend([data-container=panel]) {
	color: white;
	text-shadow: black 10px 0px 0px;
	font-size: 40pt;
}

[data-container=main] {
	height:100%;
	width:100%;
	position:absolute;

	box-sizing: border-box;
    padding: 0.2vw;
    background:
      radial-gradient(black 15%, transparent 15%) 0 0,
      radial-gradient(black 15%, transparent 15%) @dotdist @dotdist,
      radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
      radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) @dotdist @dotdist+1,
      #171717;
    background-size: @dotdist*2 @dotdist*2;
}