/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}


:root {
	--pixel-bg: lightblue; /* Inner background color */
	--pixel-border: black; /* Inner border color: */
	--pixel-border-2: white; /* Middle border color: */
	--pixel-border-3: var(--pixel-border); /* Outer border color */
	--pixel: .125rem; /* Pixel size */
}

.pixel-border {
	background: var(--pixel-bg);
	box-shadow:
		
	/* Inner Background Color */
		0 calc(var(--pixel) * -3) 0 calc(var(--pixel) * -1) var(--pixel-bg),
		0 calc(var(--pixel) * 3) 0 calc(var(--pixel) * -1) var(--pixel-bg),
		0 calc(var(--pixel) * -6) 0 calc(var(--pixel) * -2) var(--pixel-bg),
		0 calc(var(--pixel) * 6) 0 calc(var(--pixel) * -2) var(--pixel-bg),
		0 calc(var(--pixel) * -9) 0 calc(var(--pixel) * -4) var(--pixel-bg),
		0 calc(var(--pixel) * 9) 0 calc(var(--pixel) * -4) var(--pixel-bg),
		0 calc(var(--pixel) * -12) 0 calc(var(--pixel) * -6) var(--pixel-bg),
		0 calc(var(--pixel) * 12) 0 calc(var(--pixel) * -6) var(--pixel-bg),
		
	/* Pixel Border Layer 1 */
		calc(var(--pixel) * -1) 0 0 0 var(--pixel-border),
		var(--pixel) 0 0 0 var(--pixel-border),
		0 calc(var(--pixel) * -2) 0 0 var(--pixel-border),
		0 calc(var(--pixel) * 2) 0 0 var(--pixel-border),
		0 calc(var(--pixel) * -5) 0 calc(var(--pixel) * -1) var(--pixel-border),
		0 calc(var(--pixel) * 5) 0 calc(var(--pixel) * -1) var(--pixel-border),
		0 calc(var(--pixel) * -7) 0 calc(var(--pixel) * -2) var(--pixel-border),
		0 calc(var(--pixel) * 7) 0 calc(var(--pixel) * -2) var(--pixel-border),
		0 calc(var(--pixel) * -10) 0 calc(var(--pixel) * -4) var(--pixel-border),
		0 calc(var(--pixel) * 10) 0 calc(var(--pixel) * -4) var(--pixel-border),
		0 calc(var(--pixel) * -13) 0 calc(var(--pixel) * -6) var(--pixel-border),
		0 calc(var(--pixel) * 13) 0 calc(var(--pixel) * -6) var(--pixel-border),
		
	/* Pixel Border Layer 2 */
		calc(var(--pixel) * -2) 0 0 0 var(--pixel-border-2),
		calc(var(--pixel) * 2) 0 0 0 var(--pixel-border-2),
		0 calc(var(--pixel) * -1) 0 var(--pixel) var(--pixel-border-2), 
		0 var(--pixel) 0 var(--pixel) var(--pixel-border-2),
		0 calc(var(--pixel) * -4) 0 0 var(--pixel-border-2),
		0 calc(var(--pixel) * 4) 0 0 var(--pixel-border-2),
		0 calc(var(--pixel) * -6) 0 calc(var(--pixel) * -1) var(--pixel-border-2),
		0 calc(var(--pixel) * 6) 0 calc(var(--pixel) * -1) var(--pixel-border-2),
		0 calc(var(--pixel) * -8) 0 calc(var(--pixel) * -2) var(--pixel-border-2),
		0 calc(var(--pixel) * 8) 0 calc(var(--pixel) * -2) var(--pixel-border-2),
		0 calc(var(--pixel) * -11) 0 calc(var(--pixel) * -4) var(--pixel-border-2),
		0 calc(var(--pixel) * 11) 0 calc(var(--pixel) * -4) var(--pixel-border-2),
		0 calc(var(--pixel) * -14) 0 calc(var(--pixel) * -6) var(--pixel-border-2),
		0 calc(var(--pixel) * 14) 0 calc(var(--pixel) * -6) var(--pixel-border-2),
		
	/* Border Layer 3: --pixel-border-3 */
		calc(var(--pixel) * -3) 0 0 0 var(--pixel-border-3),
		calc(var(--pixel) * 3) 0 0 0 var(--pixel-border-3),
		0 0 0 calc(var(--pixel) * 2) var(--pixel-border-3),
		0 calc(var(--pixel) * -3) 0 var(--pixel) var(--pixel-border-3),
		0 calc(var(--pixel) * 3) 0 var(--pixel) var(--pixel-border-3),
		0 calc(var(--pixel) * -5) 0 0 var(--pixel-border-3),
		0 calc(var(--pixel) * 5) 0 0 var(--pixel-border-3),
		0 calc(var(--pixel) * -7) 0 calc(var(--pixel) * -1) var(--pixel-border-3),
		0 calc(var(--pixel) * 7) 0 calc(var(--pixel) * -1) var(--pixel-border-3),
		0 calc(var(--pixel) * -9) 0 calc(var(--pixel) * -2) var(--pixel-border-3), 
		0 calc(var(--pixel) * 9) 0 calc(var(--pixel) * -2) var(--pixel-border-3),
		0 calc(var(--pixel) * -12) 0 calc(var(--pixel) * -4) var(--pixel-border-3), 
		0 calc(var(--pixel) * 12) 0 calc(var(--pixel) * -4) var(--pixel-border-3),
		0 calc(var(--pixel) * -15) 0 calc(var(--pixel) * -6) var(--pixel-border-3), 
		0 calc(var(--pixel) * 15) 0 calc(var(--pixel) * -6) var(--pixel-border-3);
}




section {
  margin: auto;
  padding: 20px;
  width: 100%;
  max-width: 200px; /* Adjust as needed */
}



.pixel-corners {
  border: 2px solid black;
  box-shadow: 
    0 0 2px black,
    0 0 4px black,
    0 0 6px black,
    0 0 8px black;
  padding: 10px;
  background-color: #ffffff;
  max-width: 200px;
}