* {
box-sizing: border-box;
}



/* 
 * Screen shape idea from
 * http://www.websitecodetutorials.com/code/css/css-shapes.php 
 */
#o2 {
  color: white;
  font-size: inherit;
  width: 749px;
  height: 551.999984741211px;
  border-radius: 50% / 8%;
  overflow: visible;
  -moz-transform: matrix3d(0.46651498, -0.05182975, 0.00000000, -0.00025720, 
                      0.05849382, 0.74957678, 0.00000000, 0.00014829, 
                      0.00000000, 0.00000000, 1.00000000, 0.00000000, 
                      164.56475803, 135.85117444, 0.00000000, 1.00000000); 
  -moz-transform-origin: 10.000000px 30.000000px 0px;
  
  -webkit-transform: matrix3d(0.46651498, -0.05182975, 0.00000000, -0.00025720, 
                      0.05849382, 0.74957678, 0.00000000, 0.00014829, 
                      0.00000000, 0.00000000, 1.00000000, 0.00000000, 
                      164.56475803, 135.85117444, 0.00000000, 1.00000000); 
  -webkit-transform-origin: 10.000000px 30.000000px 0px;
  
  -o-transform: matrix3d(0.46651498, -0.05182975, 0.00000000, -0.00025720, 
                      0.05849382, 0.74957678, 0.00000000, 0.00014829, 
                      0.00000000, 0.00000000, 1.00000000, 0.00000000, 
                      164.56475803, 135.85117444, 0.00000000, 1.00000000); 
  -o-transform-origin: 10.000000px 30.000000px 0px;
  
  transform: matrix3d(0.46651498, -0.05182975, 0.00000000, -0.00025720, 
                      0.05849382, 0.74957678, 0.00000000, 0.00014829, 
                      0.00000000, 0.00000000, 1.00000000, 0.00000000, 
                      164.56475803, 135.85117444, 0.00000000, 1.00000000); 
  transform-origin: 10.000000px 30.000000px 0px;
}

 #o2:before {
 content: "";
position: absolute;
top: 8%;
bottom: 8%;
right: -2%;
left: -2%;
background: inherit;
border-radius: 2% / 50%;
}


#o2 p {
  position: absolute;
  font-family: "Courier New", "Courier", monospace;
  font-size: 40px;
  line-height: 1;
  top: calc(50% - 180px);
  text-align: center;
  width: 100%;
margin: 0 10px;
}

.container {
  padding: 10px;
}

/* CSS for the grid */
#grid {
  background: url("tv.jpg")  0 0 white no-repeat;
  border: none;
  height: 1600px;
  position: relative;
  overflow: hidden;
  left: 50%;
  margin-left: -512px;
}


  



/*
 * This stylesheet generated by the CSS3 TrueColor Animator v1.0
 * by Zoltan Hawryluk (http://www.useragentman.com). 
 * Latest version of this program is available at
 * https://github.com/zoltan-dulac/css3TrueColorAnimator
 *
 * Generated with the following options: 
 * --input-apng
 * --output=matrix-anim
 * --ms=100
 * --jxr-quality=80
 * --jp2-rate=0.5
 * --webp-quality=20
 * --jpg-qual=50
 * --no-bail
 * --no-apng
 *
 */

	
	html.webp .matrix-anim {
	  background: url('./matrix-anim.webp');
	}
	
	
	html.no-webp.cssanimations .matrix-anim {
	    background: url('./matrix-anim-stitched.jpg') left center;
	    animation: matrix-animplay 3900ms steps( 39) infinite;
	    -webkit-animation: matrix-animplay 3900ms steps( 39) infinite;
	}
	
	
	
	html.no-webp.no-cssanimations .matrix-anim {
	    background: url('./matrix-anim.gif') left center;
	}
	
	@keyframes matrix-animplay {
	  100% { background-position: -15600px; }
	}
	
	@-webkit-keyframes matrix-animplay {
	  100% { background-position: -15600px; }
	}


@media only screen and (max-width: 768px) {
  #grid {
      transform: scale(0.73);
      transform-origin: 0 0;
      left: 0;
      margin-left: 0;
      width: 1024px;
      overflow: visible;
  }
}
	
@media only screen and (max-width: 320px) {
  #grid {
      transform: scale(0.295);
      transform-origin: 0 0;
      left: 0;
      margin-left: 0;
      width: 1024px;
      overflow: visible;
  }
}