<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
  <title>Pixel Link</title>
</head>

<body>
  <div class="pixel-container">
    <div class="pixel"></div>
  </div>
</body>

</html>
$tunic: rgb(75, 159, 2);
$outline: black;
$white: white;
$hair: rgb(249, 199, 34);
$eyes: rgb(0, 136, 255);
$skin: rgb(198, 170, 109);
$shoes: rgb(130, 53, 53);

.pixel-container {
    width: 25em;
    height: 25em;
  }

.pixel {
    width: 1em;
    height: 1em;
    background-color: $white;
    box-shadow: 
                8em 1em $outline
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.