<div id="numberFive"></div>

#numberFive {
  width: 400px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image:
    linear-gradient(white, white),
    linear-gradient(white, white),
    linear-gradient(white, white),
    linear-gradient(white, white),
    linear-gradient(45deg, white 25%, rgba(0, 0, 0, 0) 25%),
    linear-gradient(-43deg, white 20%, rgba(0, 0, 0, 0) 20%),
    linear-gradient(-135deg, white 26%, rgba(0, 0, 0, 0) 26%),
    linear-gradient(140deg, rgba(0, 0, 0, 0) 25%, rgb(203, 203, 203) 25%, rgb(183, 183, 183) 80%, rgba(0, 0, 0, 0) 80%),
    linear-gradient(135deg, rgba(0, 0, 0, 0) 30.5%, rgb(203, 203, 203) 30.5%, lightgrey 81.4%, rgb(93, 93, 93) 81.4%, rgb(123, 123, 123) 97%, black 97%),
    linear-gradient(-135deg, rgba(0, 0, 0, 0) 25.5%, black 25.5%, black),
    linear-gradient(45deg, rgb(53, 53, 53), darkgrey),
    linear-gradient(135deg, rgba(0, 0, 0, 0) 25%, rgb(233, 233, 233) 25%, rgb(203, 203, 203)),
    linear-gradient(45deg, rgb(53, 53, 53), darkgrey),
    linear-gradient(140deg, rgb(53, 53, 53), rgb(123, 123, 123) 28%, rgb(183, 183, 183) 28%, rgb(123, 123, 123) 65.5%, rgb(203, 203, 203) 65.5%, lightgrey);
  background-size: 60px 200px, 250px 70px, 230px 60px, 60px 240px, 200px 200px, 200px 200px, 200px 200px, 180px 250px, 175px 200px, 135px 190px, 170px 115px, 200px 200px, 500px 100px, 250px 300px;
  background-position: 170px 10px, 170px 160px, 0px 240px, 170px 250px, 0px 300px, 200px 300px, 200px 230px, 50px 10px, 55px 300px, 170px 330px, 0px 300px, 300px 0px, 0px 0px, 150px 210px;
  background-repeat: no-repeat;
  background-color: black;
}

/**
 * Based on work by http://heystudio.es
 * 
 * https://heystudio.es/archivos/portfolio/nfl-issue-typography
 *
 * https://heystudio.es/wp-content/uploads/2018/04/Espn%C2%A9hey05.jpg
 *
 */