:root {
	--controls-width: 320px;
	/* --tp-base-background-color: hsl(230, 7%, 17%); */
  --tp-base-shadow-color: hsla(0, 0%, 0%, 0);
  --tp-base-border-radius: 0;
  /* 
  --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
  --tp-button-background-color: hsla(0, 0%, 80%, 1);
  --tp-button-background-color-active: hsla(0, 0%, 100%, 1);
  --tp-button-background-color-focus: hsla(0, 0%, 95%, 1);
  --tp-button-background-color-hover: hsla(0, 0%, 85%, 1);
  --tp-button-foreground-color: hsla(0, 0%, 0%, 0.8);
  --tp-container-background-color: hsla(0, 0%, 0%, 0.3);
  --tp-container-background-color-active: hsla(0, 0%, 0%, 0.6);
  --tp-container-background-color-focus: hsla(0, 0%, 0%, 0.5);
  --tp-container-background-color-hover: hsla(0, 0%, 0%, 0.4);
  --tp-container-foreground-color: hsla(0, 0%, 100%, 0.5);
  --tp-groove-foreground-color: hsla(0, 0%, 0%, 0.2);
  --tp-input-background-color: hsla(0, 0%, 0%, 0.3);
  --tp-input-background-color-active: hsla(0, 0%, 0%, 0.6);
  --tp-input-background-color-focus: hsla(0, 0%, 0%, 0.5);
  --tp-input-background-color-hover: hsla(0, 0%, 0%, 0.4);
  --tp-input-foreground-color: hsla(0, 0%, 100%, 0.5);
  --tp-label-foreground-color: hsla(0, 0%, 100%, 0.5);
  --tp-monitor-background-color: hsla(0, 0%, 0%, 0.3);
  --tp-monitor-foreground-color: hsla(0, 0%, 100%, 0.3); 
	*/
}

@font-face {
  font-family: 'cryptofont';
  src: url('fonts/cryptofont.eot?r6g6a6');
  src: url('fonts/cryptofont.eot?r6g6a6#iefix') format('embedded-opentype'),
    url('fonts/cryptofont.ttf?r6g6a6') format('truetype'),
    url('fonts/cryptofont.woff?r6g6a6') format('woff'),
    url('fonts/cryptofont.svg?r6g6a6#cryptofont') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

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

html,
body {
	height: 100%;
	margin: 0;
}

body {
	display: flex;
}

#controls {
	width: var(--controls-width);
	flex-shrink: 0;
	height: 100%;
	overflow-y: auto;
	background: hsl(230, 7%, 17%);
}

.view {
	position: relative;
	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background: hsl(240, 5%, 9%);
}

.canvas-container {
	height: 80%;
	width: 80%;
}

#matrix-rain-canvas {
	display: block;
	width: 100%;
	height: 100%;
}