<p>neon<br/>lights</p>
<p>neon<br/>lights</p>
<p>neon<br/>lights</p>

<a class="author" href="https://itsmenatalie.com" target="_blank">Created by ItsMeNatalie</a>
body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  overflow: hidden;

  p {
    font-family: "Monoton", cursive;
    font-size: 150px;
    text-transform: uppercase;
    text-align: center;
    
    &:nth-child(1) {
      position: absolute;
      color: navajowhite;
      top: 30%;
      left: 50%;
      transform: translate(calc(-50% - 3px), calc(-50% - 5px));
      text-shadow: 1px 1px 2px black, 0 0 20px navajowhite, 0 0 5px #222;
    }

    &:nth-child(2) {
      position: absolute;
      color: palevioletred;
      mix-blend-mode: darken;
      top: 30%;
      left: 50%;
      transform: translate(calc(-50% - 6px), calc(-50% - 3px));
    }

    &:nth-child(3) {
      position: absolute;
      color: darkturquoise;
      mix-blend-mode: color-burn;
      top: 30%;
      left: 50%;
      transform: translate(calc(-50% - 9px), calc(-50% - 1px));
    }
  }

  a {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    position: absolute;
    left: calc(50% - 96px);
    bottom: 0;
    font-style: italic;
    font-size: 12px;
    color: #212121;
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.