Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="tron-skyline">
    <div class="skyline">
        <div class="sky">
          <div class="stars"></div>
          <div class="lights">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
          <div class="moon">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
          <div class="planet"></div>
        </div>
        <div class="city">
            <div class="city-back">
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="tip"></span>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="tip"></span>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="tip"></span>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                </div>
            </div>
            <div class="city-middle">
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
            </div>
            <div class="city-front">
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="tip"></span>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
                <div>
                    <span class="windows">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <span class="building-shadow"></span>
                </div>
            </div>
            <div class="city-base"></div>
        </div>
    </div>
    <div class="tron-grid">
        <div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div>
            <h1>Jordi Rué</h1>
            <h2>JordiRue.com</h2>
        </div>
    </div>
</div>
              
            
!

CSS

              
                /*
  Variables
*/

/* Colors */
$tron-white: #f1f1f1;
$tron-black: #010101;

/* Sky */
$sky-1: rgb(255,12,184);
$sky-2: rgb(193,70,161);
$sky-3: rgb(31,42,107);

/* Grid */
$grid-1: rgb(0,104,189);
$grid-2: rgb(0,93,172);
$grid-3: rgb(2,43,96);
$grid-4: rgb(7,26,49);
$grid-line: rgb(41,137,216);
$grid-line-shadow: rgba(41,137,216,.6);

/* Lights */
$light-01: linear-gradient(to bottom,rgba(183,222,237,1) 0%,rgba(33,180,226,1) 15%,rgba(113,206,239,.5) 50%,rgba(183,222,237,.2) 100%);
$light-02: $light-01;
$light-03: linear-gradient(to bottom,rgba(206,4,4,1) 1%,rgba(204,110,110,1) 78%,rgba(204,120,120,1) 100%);
$light-04: linear-gradient(to bottom,rgba(183,222,237,1) 0%,rgba(33,180,226,1) 2%,rgba(33,180,226,.6) 15%,rgba(113,206,239,.3) 50%,rgba(183,222,237,.1) 100%);
$light-05: $light-03;
$light-06: linear-gradient(to bottom,rgba(206,4,4,1) 1%,rgba(204,110,110,.8) 58%,rgba(204,120,120,.2) 100%);
$light-07: linear-gradient(to bottom,rgba(206,4,4,1) 1%,rgba(204,67,67,1) 54%,rgba(204,120,120,1) 70%,rgba(255,61,61,1) 90%,rgba(255,12,184,1) 100%);
$light-08: linear-gradient(to bottom,rgba(206,4,4,1) 1%,rgba(204,110,110,.8) 58%,rgba(204,120,120,.2) 100%);
$light-09: $light-07;
$light-10: linear-gradient(to bottom,rgba(183,222,237,1) 0%,rgba(33,180,226,1) 3%,rgba(33,180,226,.6) 25%,rgba(113,206,239,.2) 70%,rgba(183,222,237,.1) 100%);
$light-11: linear-gradient(to bottom,rgba(206,4,4,1) 1%,rgba(204,110,110,.8) 58%,rgba(204,120,120,.2) 100%);
$light-12: linear-gradient(to bottom,rgba(206,4,4,1) 1%,rgba(204,67,67,1) 54%,rgba(204,120,120,1) 60%,rgba(255,61,61,1) 90%,rgba(255,12,184,1) 100%);
$light-13: $light-07;
$light-14: linear-gradient(to bottom,rgba(183,222,237,1) 0%,rgba(33,180,226,1) 5%,rgba(33,180,226,.4) 15%,rgba(113,206,239,.2) 50%,rgba(183,222,237,.1) 100%);
$light-15: $light-07;
$light-16: linear-gradient(to bottom,rgba(244,227,225,1) 0%,rgba(248,252,42,1) 98%);
$light-17: $light-07;
$light-18: linear-gradient(to right,rgba(248,80,50,1) 0%,rgba(241,111,92,1) 15%,rgba(244,227,225,1) 43%,rgba(240,47,23,1) 65%,rgba(248,252,42,1) 100%);
$light-19: linear-gradient(to bottom,rgba(255,12,184,.1) 0%,rgba(193,70,161,1) 20%,rgba(33,180,226,1) 30%,rgba(33,180,226,.4) 40%,rgba(193,70,161,.2) 50%,rgba(255,12,184,.1) 100%);
$light-20: linear-gradient(to bottom,rgba(255, 12, 184, 1) 0%,rgba(193, 70, 161,1) 20%,rgba(193, 70, 161, .5) 100%);
$light-21: linear-gradient(to right,rgba(248,80,50,1) 0%,rgba(241,111,92,1) 10%,rgba(240,73,0,1) 65%,rgba(252,68,0,1) 100%);
$light-22: linear-gradient(to bottom,rgba(33,180,226,1) 0%,rgba(33,180,226,.4) 90%,rgba(193,70,161,.2) 95%,rgba(255,12,184,.1) 100%);

/* Houses */
$house-bg: linear-gradient(to bottom, $grid-3 0%,$grid-2 100%);
$house-bg-rooftop: linear-gradient(to bottom, $grid-3 0%,$grid-2 20%,$grid-2 100%);
$house-border: solid 1px rgba(255,255,255,.1);
$house-shadow: rgba(5,116,210,0.2);
$box-shadow-left-1: 10px 0 0 $grid-3;
$box-shadow-left-2: 5px 0 0 $grid-3;
$box-shadow-right-1: -10px 0 0 $grid-3;
$box-shadow-right-2: -5px 0 0 $grid-3;
$tip-light: rgb(248,252,42);
$base-1: rgb(115,193,242);
$base-2: rgb(189,224,247);

/* Moon */
$moon-shadow: rgb(190,255,255);
$mon-hole-1: rgb(69,93,143);
$mon-hole-2: rgb(141,190,210);
$mon-hole-3: rgb(143,185,202);
$mon-hole-4: rgb(52,79,135);

/* Planet */
$planet-1: rgb(172,48,0);
$planet-2: rgb(116,32,0);
$planet-3: rgb(54,14,0);
$planet-4: rgb(215,58,0);
$planet-5: rgb(87,24,0);
$planet-6: rgb(255,110,60);

/* Windows lights */
$window-color-1: rgb(30,180,226);
$window-color-2: rgb(180,230,250);
$window-color-3: rgb(255,250,0);
$win-light-01: linear-gradient(to bottom, $window-color-1, $window-color-1 5%,transparent 5%,transparent 10%, $window-color-1 10%);
$win-light-02: linear-gradient(to right, $window-color-1, $window-color-1 5%,transparent 5%,transparent 15%, $window-color-1 15%);
$win-light-03: linear-gradient(to right, $window-color-2, $window-color-1 5%,transparent 5%,transparent 15%, $window-color-2 15%);
$win-light-04: linear-gradient(to top, $window-color-1, $window-color-1 5%,transparent 5%,transparent 15%, $window-color-1 15%, $window-color-1 25%,transparent 25%,transparent 35%, $window-color-2 35%);
$win-light-05: linear-gradient(to bottom, $window-color-1, $window-color-1 3%,transparent 3%,transparent 9%, $window-color-2 9%, $window-color-2 15%,transparent 15%,transparent 21%, $window-color-2 21%, $window-color-2 25%,transparent 25%);


/*
  Mixins
*/

@mixin rooftop-before($w,$h,$mtop,$mleft,$bshadow) {
  &:before {
    content: '';
    width: $w;
    height: $h;
    margin-top: $mtop;
    margin-left: $mleft;
    background: $house-bg-rooftop;
    border-top: solid 1px rgba(255,255,255,.4);
    border-right: $house-border;
    border-bottom: $house-border;
    border-left: $house-border;
    box-shadow: $bshadow;
    position: absolute;
    display: block;
    z-index: -1;
  }
}

@mixin rooftop-after($w,$h,$mtop,$mleft,$bshadow) {
  &:after {
    content: '';
    width: $w;
    height: $h;
    margin-top: $mtop;
    margin-left: $mleft;
    background: $house-bg-rooftop;
    border-top: solid 1px rgba(255,255,255,.4);
    border-right: $house-border;
    border-bottom: $house-border;
    border-left: $house-border;
    box-shadow: $bshadow;
    position: absolute;
    display: block;
    z-index: -2;
  }
}

@mixin tip($tipt,$tipl) {
  width: 8%;
  height: 100%;
  background: $tip-light;
  position: absolute;
  top: $tipt;
  left: $tipl;
  filter: blur(.1rem);
  z-index: -2;
}

@mixin stars($stop,$sleft) {
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 6px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 3px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 6px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 6px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 6px),
    radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.5) 1px, transparent 1px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 3px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 3px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 6px),
    radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 6px),
    radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 6px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 3px),
    radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 3px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 3px),
    radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 3px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,1) 1px, transparent 3px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 3px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,1) 1px, transparent 6px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.4) 1px, transparent 5px),
    radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,.3) 1px, transparent 4px),
    radial-gradient(white, rgba(255,255,255,1) 1px, transparent 5px);
  background-size:
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px;
  background-position:
    5% 30%,
    11% 41%,
    16% 12%,
    3% 9%,
    7% 54%,
    15% 35%,
    18% 48%,
    10% 87%,
    26% 33%,
    9% 19%,
    15% 35%,
    21% 11%,
    2% 48%,
    33% 63%,
    54% 18%,
    15% 23%,
    26% 62%,
    47% 37%,
    18% 78%,
    27% 69%,
    20% 5%,
    31% 38%,
    22% 62%,
    51% 39%,
    32% 12%,
    25% 52%,
    56% 30%,
    27% 17%,
    45% 27%,
    29% 19%,
    50% 30%,
    35% 11%,
    12% 22%,
    43% 13%,
    34% 54%,
    85% 25%,
    36% 16%,
    68% 17%,
    41% 18%,
    29% 19%,
    37% 46%,
    31% 21%,
    48% 27%,
    42% 34%,
    54% 4%,
    45% 51%,
    26% 38%,
    13% 4%,
    44% 32%,
    47% 9%,
    30% 10%,
    58% 6%,
    52% 32%,
    63% 6%,
    50% 14%,
    59% 44%,
    56% 16%,
    57% 40%,
    58% 58%,
    59% 19%,
    60% 0,
    61% 1%,
    62% 32%,
    63% 23%,
    64% 44%,
    65% 85%,
    66% 36%,
    67% 73%,
    68% 42%,
    69% 9%,
    70% 10%,
    71% 76%,
    72% 36%,
    73% 63%,
    74% 64%,
    75% 88%,
    74% 16%,
    76% 97%,
    78% 18%,
    79% 29%,
    80% 5%,
    81% 65%,
    82% 32%,
    83% 28%,
    84% 62%,
    85% 35%,
    86% 6%,
    81% 13%,
    88% 51%,
    89% 19%,
    90% 0,
    91% 41%,
    92% 60%,
    93% 23%,
    94% 54%,
    95% 75%,
    96% 61%,
    97% 70%,
    98% 82%,
    99% 29%;
  background-repeat: no-repeat; 
  position: absolute;
  top: $stop;
  left: $sleft;
}

@mixin moon($mw,$mh,$mtop,$mleft,$mopac) {
  width: $mw;
  height: $mh;
  border-radius: 50%;
  transition: transform 0.2s ease-in-out;
  position: absolute;
  top: $mtop;
  left: $mleft;
  opacity: $mopac;

  &:after {
    content: '';
    width: 101%;
    height: 101%;
    border-radius: 50%;
    position: absolute;
    top: -1%;
    left: 3%;
    z-index: -1;
    filter: blur(.4rem);
    opacity: .8;
  }
}

@mixin planet($mw,$mh,$mtop,$mleft,$mopac) {
  width: $mw;
  height: $mh;
  border-radius: 50%;
  transition: transform 0.2s ease-in-out;
  position: absolute;
  top: $mtop;
  left: $mleft;
  opacity: $mopac;

  &:after {
    content: '';
    width: 101%;
    height: 101%;
    border-radius: 50%;
    position: absolute;
    top: -1%;
    left: 3%;
    z-index: -1;
    filter: blur(.4rem);
    opacity: .8;
  }
}

@mixin windows($windir,$winh) {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: $windir;
  position: absolute;

  span {
    height: $winh;
    border-top: solid 1px rgba(255,255,255,.2);
    border-right: solid 1px rgba(255,255,255,.2);
    border-bottom: solid 1px rgba(7,26,49,.2);
    border-left: solid 1px rgba(7,26,49,.2);
    flex: 1;
  }
}

@mixin windows-grid($win) {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 5%;

  span {
    width: 10%;
    height: 10%;
    border-top: solid 1px rgba(7, 26, 49,.1);
    border-right: solid 1px rgba(255, 255, 255,.1);
    border-bottom: solid 1px rgba(255, 255, 255,.1);
    border-left: solid 1px rgba(7, 26, 49,.1);
    flex: 1 1 $win;
    display: block;
  }
}

*,
::before,
::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

.tron-skyline {
  height: 540px;
  margin-bottom: 50px;
  text-align: center;
  border-bottom: solid 2px $grid-line;
  box-shadow: 0 10px 10px $grid-line-shadow;
  position: relative;
  overflow: hidden;

  /* Central division 
  &:before {
    content: '';
    width: 2px;
    height: 500px;
    background-color: red;
    position: absolute;
    top: 0;
    left: calc(50% - 1px);
    opacity: .3;
    z-index: 10;
  }*/

  .skyline {
    width: 100%;
    height: 62.5%;
    background: linear-gradient(to bottom, $sky-3 40%,$sky-2 92%,$sky-1 100%);
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 1;
    
    @media (min-width: 768px) {
      height: 60%;
    }

    @media (min-width: 992px) {
      height: 58.5%;
    }

    @media (min-width: 1140px) {
      height: 55.5%;
    }
    
    .sky {
      width: 100%;
      height: 300px;
      position: absolute;
      display: flex;
      justify-content: center;
      
      .stars {
        @include stars(0,0);
        
        &:before {
          content: '';
          @include stars(1%,-50%);
        }

        &:after {
          content: '';
          @include stars(12%,52%);
        }
      }
      
      .lights {
        width: 100%;
        max-width: 700px;
        display: flex;
        opacity: .6;

        span:nth-of-type(1) {
          width: 3%;
          height: 80%;
          margin-left: 2%;
          background: $light-01;
          filter: blur(.5rem);
          opacity: .5;
        }
        span:nth-of-type(2){
          width: 1%;
          height: 70%;
          margin-left: 9%;
          background: $light-02;
          filter: blur(.7rem);
          opacity: .5;
        }
        span:nth-of-type(3){
          width: 1%;
          height: 70%;
          background: $light-03;
          filter: blur(.9rem);
          opacity: .4;
        }
        span:nth-of-type(4){
          width: 3%;
          height: 65%;
          margin-left: 2%;
          background: $light-04;
          filter: blur(.4rem);
          opacity: .5;
        }
        span:nth-of-type(5){
          width: 2%;
          height: 70%;
          background: $light-05;
          filter: blur(.9rem);
          opacity: .4;
        }
        span:nth-of-type(6){
          width: 3%;
          height: 50%;
          margin-left: 4%;
          background: $light-06;
          filter: blur(.4rem);
          opacity: .3;
        }
        span:nth-of-type(7){
          width: 1%;
          height: 90%;
          background: $light-07;
          filter: blur(.6rem);
        }
        span:nth-of-type(8){
          width: 2%;
          height: 50%;
          margin-left: 4%;
          background: $light-08;
          filter: blur(.4rem);
          opacity: .3;
        }
        span:nth-of-type(9){
          width: 1%;
          height: 70%;
          background: $light-09;
          filter: blur(.7rem);
        }
        span:nth-of-type(10) {
          width: 3%;
          height: 55%;
          background: $light-10;
          filter: blur(.2rem);
          opacity: .7;
        }
        span:nth-of-type(11) {
          width: 2%;
          height: 50%;
          background: $light-11;
          filter: blur(.6rem);
          opacity: .3;
        }
        span:nth-of-type(12) {
          width: 1%;
          height: 75%;
          background: $light-12;
          filter: blur(.5rem);
        }
        span:nth-of-type(13) {
          width: 1%;
          height: 90%;
          margin-left: 5%;
          background: $light-13;
          filter: blur(.6rem);
        }
        span:nth-of-type(14) {
          width: 3%;
          height: 50%;
          background: $light-14;
          filter: blur(.2rem);
          opacity: .7;
        }
        span:nth-of-type(15) {
          width: 1%;
          height: 90%;
          background: $light-15;
          filter: blur(.6rem);
        }
        span:nth-of-type(16) {
          width: 4%;
          height: 80%;
          background: $light-16;
          filter: blur(.6rem);
          opacity: .6;
        }
        span:nth-of-type(17) {
          width: 1%;
          height: 90%;
          background: $light-17;
          filter: blur(.7rem);
          opacity: .6;
        }
        span:nth-of-type(18) {
          width: 2%;
          height: 80%;
          background: $light-18;
          filter: blur(.3rem);
          opacity: .5;
        }
        span:nth-of-type(19) {
          width: 3%;
          height: 50%;
          background: $light-19;
          filter: blur(.2rem);
          opacity: .7;
        }
        span:nth-of-type(20) {
          width: 7%;
          height: 80%;
          background: $light-20;
          filter: blur(.9rem);
          opacity: .6;
        }
        span:nth-of-type(21) {
          width: 5%;
          height: 80%;
          background: $light-21;
          filter: blur(.7rem);
          opacity: .4;
        }
        span:nth-of-type(22) {
          width: 3%;
          height: 90%;
          background: $light-22;
          filter: blur(.2rem);
          opacity: .2;
        }
      }
      
      .moon {
        @include moon(150px,150px,45%,65%,1);
        background: linear-gradient(to bottom, $sky-3 40%,$sky-2 92%,$sky-1 100%);
        box-shadow: inset -20px 10px 70px 0 $moon-shadow;

        &:after {
          background: $tron-white;
        }

        span {
          box-shadow: inset 6px -2px 0 0px $tron-white;
          filter: blur(.2rem);

          &:after {
            background: $tron-black;
          }
        }

        span:nth-of-type(1) {
          @include moon(22%,22%,25%,30%,.4);
          background: $mon-hole-1;
        }
        span:nth-of-type(2) {
          @include moon(12%,14%,15%,50%,.5);
          background: $mon-hole-2;
        }
        span:nth-of-type(3) {
          @include moon(20%,17%,40%,70%,.5);
          background: $mon-hole-3;
        }
        span:nth-of-type(4) {
          @include moon(9%,8%,75%,45%,.4);
          background: $mon-hole-1;
        }
        span:nth-of-type(5) {
          @include moon(10%,10%,11%,20%,.7);
          background: $mon-hole-4;
        }
        span:nth-of-type(6) {
          @include moon(9%,9%,62%,52%,.5);
          background: $mon-hole-1;
        }
      }
      
      .planet {
        @include moon(30px,30px,8%,14%,1);
        background: linear-gradient(to bottom, $planet-1 40%,$planet-2 62%,$planet-3 100%);
        box-shadow: inset 5px 2px 0 0 $planet-4;

        &:before {
          content: '';
          width: 200%;
          height: 8%;
          background: linear-gradient(to right, $planet-4 20%, $planet-5 70%, $planet-3 100%);
          border-radius: 50%;
          position: absolute;
          top: 50%;
          left: -50%;
          transform: rotateZ(10deg);
          z-index: 1;
        }

        &:after {
          background: $planet-6;
        }
      }
    }

    .city {
      width: 100%;
      max-width: 700px;
      height: 75%;
      position: relative;
      align-self: flex-end;
      
      .city-back,
      .city-middle,
      .city-front {
        width: 100%;
        height: 100%;
        position: absolute;
        display: flex;
        align-items: flex-end;

        div {
          background: $house-bg;
          border: $house-border;
          position: relative;

          .building-shadow {
            width: 100%;
            height: 100%;
            background: $house-shadow;
            position: absolute;
            top: 100%;
            left: 0;
            filter: blur(.3rem);
          }
        }
      }
      
      .city-back {
        top: 0;
        z-index: 1;

        div:nth-of-type(1) {
          width: 7%;
          height: 40%;
          margin-left: 14%;
          box-shadow: $box-shadow-left-2;
          opacity: 0.9;

          @include rooftop-before(80%,100%,-10%,10%,$box-shadow-left-2);
          
          .windows {
            @include windows(row,100%);
          }
        }

        div:nth-of-type(2) {
          width: 4%;
          height: 45%;
          margin-left: 9%;
          box-shadow: $box-shadow-left-1;

          @include rooftop-before(80%,100%,-30%,10%,$box-shadow-left-2);
          
          .windows {
            @include windows-grid(33.33%);

            span:nth-of-type(1) {
              background: $window-color-1;
            }

            span:nth-of-type(8) {
              background: $window-color-1;
            }

            span:nth-of-type(12) {
              background: $window-color-2;
            }
          }
        }

        div:nth-of-type(3) {
          width: 3.5%;
          height: 50%;
          margin-left: .5%;

          @include rooftop-before(70%,100%,-60%,20%,$box-shadow-left-2);
          
          .windows {
            @include windows(row,100%);

            span {
              background: $win-light-05;
            }
          }
        }

        div:nth-of-type(4) {
          width: 3.5%;
          height: 50%;
          box-shadow: $box-shadow-left-2;
          opacity: 0.9;

          @include rooftop-before(70%,100%,-60%,20%,$box-shadow-left-2);
          
          .windows {
            @include windows-grid(50%);

            span:nth-of-type(4) {
              background: $window-color-1;
            }

            span:nth-of-type(6) {
              background: $window-color-1;
            }

            span:nth-of-type(9) {
              background: $window-color-3;
            }
          }
        }

        div:nth-of-type(5) {
          width: 4%;
          height: 70%;
          margin-left: 1%;
          opacity: 0.9;

          @include rooftop-before(80%,100%,-30%,10%,$box-shadow-left-2);

          @include rooftop-after(60%,100%,-70%,20%,$box-shadow-left-2);

          .tip {
            @include tip(-20%,55%);
          }
          
          .windows {
            @include windows-grid(33.33%);

            span:nth-of-type(8) {
              background: $window-color-1;
            }

            span:nth-of-type(14) {
              background: $window-color-1;
            }
          }
        }

        div:nth-of-type(6) {
          width: 5%;
          height: 48%;
          margin-left: .5%;
          opacity: 0.9;

          @include rooftop-before(80%,100%,-40%,15%,0);

          @include rooftop-after(50%,100%,-70%,28%,0);

          .tip {
            @include tip(-30%,52%);
          }
          
          .windows {
            @include windows(row,100%);
          }
        }

        div:nth-of-type(7) {
          width: 6%;
          height: 76%;
          opacity: 0.9;

          @include rooftop-before(60%,80%,100%,26%,$box-shadow-right-2);
          
          .windows {
            @include windows-grid(20%);

            span:nth-of-type(-n+5) {
              background: $window-color-1;
            }

            span:nth-of-type(14) {
              background: $window-color-1;
            }

            span:nth-of-type(23) {
              background: $window-color-2;
            }

            span:nth-of-type(34) {
              background: $window-color-2;
            }
          }
        }

        div:nth-of-type(8) {
          width: 6%;
          height: 46%;
          margin-left: 2%;
          box-shadow: $box-shadow-right-2;
          opacity: 0.9;

          @include rooftop-before(70%,100%,-30%,20%,$box-shadow-right-2);
          
          .windows {
            @include windows(row,100%);

            span:nth-of-type(3) {
              background: $window-color-2;
            }

            span:nth-of-type(5) {
              background: $window-color-2;
            }
          }
        }

        div:nth-of-type(9) {
          width: 6%;
          height: 60%;
          opacity: 0.9;

          @include rooftop-before(60%,100%,-30%,30%,$box-shadow-right-2);
          
          .windows {
            @include windows-grid(33.33%);

            span:nth-of-type(2) {
              background: $window-color-2;
            }

            span:nth-of-type(11) {
              background: $window-color-1;
            }
          }
        }

        div:nth-of-type(10) {
          width: 4%;
          height: 57%;

          @include rooftop-before(80%,100%,-50%,10%,$box-shadow-right-2);
          
          .windows {
            @include windows-grid(33.33%);

            span:nth-of-type(2) {
              background: $window-color-1;
            }

            span:nth-of-type(9) {
              background: $window-color-3;
            }

            span:nth-of-type(18) {
              background: $window-color-1;
            }

            span:nth-of-type(27) {
              background: $window-color-1;
            }
          }
        }

        div:nth-of-type(11) {
          width: 4%;
          height: 30%;
          margin-left: 8%;
          box-shadow: $box-shadow-right-1;

          @include rooftop-before(80%,100%,-30%,-5%,$box-shadow-right-2);

          @include rooftop-after(60%,100%,-70%,5%,$box-shadow-right-2);

          .tip {
            @include tip(-40%,28%);
          }
          
          .windows {
            @include windows(row,100%);
          }
        }

        div:nth-of-type(12) {
          width: 4%;
          height: 25%;
          margin-left: 5%;
          box-shadow: $box-shadow-right-2;

          @include rooftop-before(80%,100%,-30%,10%,$box-shadow-right-2);
          
          .windows {
            @include windows-grid(33.33%);
          }
        }
      }
      
      .city-middle {
        top: 4%;
        z-index: 2;
        
        &:after {
          content: '';
          width: 100%;
          height: 42%;
          background: linear-gradient(to right, transparent 10%,rgba(255,255,255,.5) 50%, transparent 90%);
          position: absolute;
          bottom: 0;
          filter: blur(.5rem);
          z-index: -1;
        }

        div:nth-of-type(1) {
          width: 8%;
          height: 40%;
          margin-left: 40%;
          box-shadow: $box-shadow-left-2;
          
          .windows {
            @include windows-grid(20%);

            span:nth-of-type(6) {
              background: $window-color-1;
            }

            span:nth-of-type(8) {
              background: $window-color-2;
            }

            span:nth-of-type(9) {
              background: $window-color-1;
            }

            span:nth-of-type(15) {
              background: $window-color-2;
            }

            span:nth-of-type(18) {
              background: $window-color-1;
            }

            span:nth-of-type(22) {
              background: $window-color-2;
            }

            span:nth-of-type(25) {
              background: $window-color-1;
            }

            span:nth-of-type(32) {
              background: $window-color-1;
            }

            span:nth-of-type(40) {
              background: $window-color-1;
            }
          }
        }

        div:nth-of-type(2) {
          width: 5%;
          height: 30%;
          margin-left: 14%;
          box-shadow: $box-shadow-right-1;
          top: -1%;
          
          .windows {
            @include windows(column,5%);

            span:nth-of-type(2n) {
              background: $win-light-02;
            }
          }
        }

        div:nth-of-type(3) {
          width: 8%;
          height: 40%;
          box-shadow: $box-shadow-right-2;
          top: 2%;
          
          .windows {
            @include windows-grid(33.33%);

            span:nth-of-type(4) {
              background: $window-color-1;
            }

            span:nth-of-type(18) {
              background: $window-color-2;
            }

            span:nth-of-type(22) {
              background: $window-color-1;
            }

            span:nth-of-type(26) {
              background: $window-color-1;
            }

            span:nth-of-type(27) {
              background: $window-color-1;
            }
          }
        }
      }
      
      .city-front {
        top: 8%;
        z-index: 3;

        div:nth-of-type(1) {
          width: 11%;
          height: 16%;
          box-shadow: $box-shadow-left-1;

          @include rooftop-before(80%,100%,-20%,10%,$box-shadow-left-1);
          
          .windows {
            @include windows(column,5%);

            span:nth-of-type(1) {
              background-color: $window-color-1;
            }
            span:nth-of-type(3) {
              background-color: $window-color-1;
            }
            span:nth-of-type(5) {
              background-color: $window-color-3;
            }
          }
        }

        div:nth-of-type(2) {
          width: 11%;
          height: 30%;
          margin-left: 1%;
          box-shadow: $box-shadow-left-1;

          @include rooftop-before(80%,100%,-10%,10%,$box-shadow-left-2);
          
          .windows {
            @include windows-grid(20%);

            span:nth-of-type(4) {
              background: $window-color-1;
            }

            span:nth-of-type(13) {
              background: $window-color-1;
            }

            span:nth-of-type(14) {
              background: $window-color-2;
            }

            span:nth-of-type(23) {
              background: $window-color-1;
            }

            span:nth-of-type(26) {
              background: $window-color-3;
            }

            span:nth-of-type(37) {
              background: $window-color-1;
            }

            span:nth-of-type(38) {
              background: $window-color-2;
            }

            span:nth-of-type(39) {
              background: $window-color-1;
            }

            span:nth-of-type(40) {
              background: $window-color-3;
            }
          }
        }

        div:nth-of-type(3) {
          width: 4%;
          height: 55%;
          margin-left: 1%;
          box-shadow: $box-shadow-left-2;
          top: -2%;

          @include rooftop-before(80%,100%,-30%,10%,$box-shadow-left-2);

          @include rooftop-after(60%,100%,-70%,20%,$box-shadow-left-2);

          .tip {
            @include tip(-26%,55%);
          }
          
          .windows {
            @include windows-grid(33.33%);

            span:nth-of-type(6) {
              background: $window-color-2;
            }

            span:nth-of-type(7) {
              background: $window-color-1;
            }

            span:nth-of-type(12) {
              background: $window-color-2;
            }

            span:nth-of-type(19) {
              background: $window-color-1;
            }

            span:nth-of-type(25) {
              background: $window-color-1;
            }

            span:nth-of-type(27) {
              background: $window-color-1;
            }
          }
        }

        div:nth-of-type(4) {
          width: 11%;
          height: 30%;
          box-shadow: $box-shadow-left-1;

          @include rooftop-before(80%,100%,-10%,10%,$box-shadow-left-2);
          
          .windows {
            @include windows(row,100%);

            span:nth-of-type(2n) {
              background: $win-light-04;
            }
          }
        }

        div:nth-of-type(5) {
          width: 6%;
          height: 40%;
          margin-left: 10%;
          
          .windows {
            @include windows-grid(25%);

            span:nth-of-type(4) {
              background: $window-color-2;
            }

            span:nth-of-type(13) {
              background: $window-color-3;
            }

            span:nth-of-type(14) {
              background: $window-color-1;
            }

            span:nth-of-type(23) {
              background: $window-color-1;
            }

            span:nth-of-type(26) {
              background: $window-color-1;
            }

            span:nth-of-type(29) {
              background: $window-color-1;
            }

            span:nth-of-type(30) {
              background: $window-color-1;
            }

            span:nth-of-type(31) {
              background: $window-color-2;
            }

            span:nth-of-type(32) {
              background: $window-color-1;
            }
          }
        }

        div:nth-of-type(6) {
          width: 8%;
          height: 18%;
          margin-left: 1%;
          box-shadow: $box-shadow-right-2;
          top: -3%;
          
          .windows {
            @include windows(row,100%);

            span:nth-of-type(1) {
              background-color: $window-color-2;
            }
            span:nth-of-type(5) {
              background-color: $window-color-3;
            }
            span:nth-of-type(6) {
              background-color: $window-color-2;
            }
          }
        }

        div:nth-of-type(7) {
          width: 4%;
          height: 32%;
          margin-left: 13%;
          box-shadow: $box-shadow-right-1;

          @include rooftop-before(80%,100%,-30%,10%,$box-shadow-right-2);
          
          .windows {
            @include windows(column,5%);

            span:nth-of-type(2n) {
              background: $win-light-03;
            }
          }
        }

        div:nth-of-type(8) {
          width: 9%;
          height: 28%;
          top: 0;

          @include rooftop-before(80%,100%,-10%,10%,$box-shadow-right-2);
          
          .windows {
            @include windows(row,100%);

            span {
              background: $win-light-01;
            }
          }
        }

        div:nth-of-type(9) {
          width: 3%;
          height: 18%;
          margin-left: 2%;
          box-shadow: $box-shadow-right-2;
          top: -1%;
          
          .windows {
            @include windows(column,5%);

            span {
              background-color: $window-color-1;
            }
            span:nth-of-type(1),
            span:nth-of-type(5) {
              background-color: $window-color-2;
            }
          }
        }

        div:nth-of-type(10) {
          width: 5%;
          height: 16%;
          
          .windows {
            @include windows-grid(33.33%);

            span:nth-of-type(2) {
              background: $window-color-2;
            }

            span:nth-of-type(6) {
              background: $window-color-2;
            }

            span:nth-of-type(10) {
              background: $window-color-1;
            }

            span:nth-of-type(13) {
              background: $window-color-1;
            }

            span:nth-of-type(14) {
              background: $window-color-1;
            }

            span:nth-of-type(15) {
              background: $window-color-3;
            }
          }
        }
      }
      
      .city-base {
        width: 102%;
        position: absolute;
        bottom: -8%;
        left: -1%;
        border: solid 3px $base-2;
        box-shadow: 0 -4px 7px $base-1;
        filter: blur(.1rem);
        z-index: 3;
      }
    }
  }

  .tron-grid {
    height: 100%;
    background: linear-gradient(to right, $grid-4 0%, $grid-3 30%, $grid-2 48%,$grid-1 50%,$grid-2 52%,$grid-3 70%,$grid-4 100%);
    
    div {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    
    div:nth-of-type(1) {
    z-index: -2;

    span {
      width: 2px;
      height: 1000px;
      background-color: $grid-line;
      position: absolute;
      top: -150px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    span:nth-of-type(1) {
      left: calc((100% / 41) * -13); /* Line position */
      transform: rotateZ(84deg); /* Line inclination */
    }

    span:nth-of-type(2) {
      left: calc((100% / 41) * -10);
      transform: rotateZ(83deg);
    }

    span:nth-of-type(3) {
      left: calc((100% / 41) * -7);
      transform: rotateZ(82deg);
    }

    span:nth-of-type(4) {
      left: calc((100% / 41) * -4);
      transform: rotateZ(81deg);
    }

    span:nth-of-type(5) {
      left: calc((100% / 41) * -1);
      transform: rotateZ(80deg);
    }

    span:nth-of-type(6) {
      left: calc((100% / 41) * 2);
      transform: rotateZ(78deg);
    }

    span:nth-of-type(7) {
      left: calc((100% / 41) * 5);
      transform: rotateZ(75deg);
    }

    span:nth-of-type(8) {
      left: calc((100% / 41) * 9);
      transform: rotateZ(72deg);
    }

    span:nth-of-type(9) {
      left: calc((100% / 41) * 13);
      transform: rotateZ(65deg);
    }

    span:nth-of-type(10) {
      left: calc((100% / 41) * 16);
      transform: rotateZ(45deg);
    }

    span:nth-of-type(11) {
      left: calc((100% / 41) * 19);
      transform: rotateZ(20deg);
    }

    span:nth-of-type(12) {
      left: calc((100% / 41) * 22);
      transform: rotateZ(-20deg);
    }

    span:nth-of-type(13) {
      left: calc((100% / 41) * 25);
      transform: rotateZ(-45deg);
    }

    span:nth-of-type(14) {
      left: calc((100% / 41) * 28);
      transform: rotateZ(-65deg);
    }

    span:nth-of-type(15) {
      left: calc((100% / 41) * 32);
      transform: rotateZ(-72deg);
    }

    span:nth-of-type(16) {
      left: calc((100% / 41) * 36);
      transform: rotateZ(-75deg);
    }

    span:nth-of-type(17) {
      left: calc((100% / 41) * 39);
      transform: rotateZ(-78deg);
    }

    span:nth-of-type(18) {
      left: calc((100% / 41) * 42);
      transform: rotateZ(-80deg);
    }

    span:nth-of-type(19) {
      left: calc((100% / 41) * 45);
      transform: rotateZ(-81deg);
    }

    span:nth-of-type(20) {
      left: calc((100% / 41) * 48);
      transform: rotateZ(-82deg);
    }

    span:nth-of-type(21) {
      left: calc((100% / 41) * 51);
      transform: rotateZ(-83deg);
    }

    span:nth-of-type(22) {
      left: calc((100% / 41) * 54);
      transform: rotateZ(-84deg);
    }
  }
    
    div:nth-of-type(2) {
    z-index: -1;

    span {
      width: 100%;
      height: 2px;
      background-color: $grid-line;
      position: absolute;
      flex: none;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    span:nth-of-type(1) {
      bottom: 8%;
    }

    span:nth-of-type(2) {
      bottom: 15%;
    }

    span:nth-of-type(3) {
      bottom: 21%;
    }

    span:nth-of-type(4) {
      bottom: 26%;
    }

    span:nth-of-type(5) {
      bottom: 30%;
    }

    span:nth-of-type(6) {
      bottom: 33%;
    }

    span:nth-of-type(7) {
      bottom: 35%;
    }

    span:nth-of-type(8) {
      bottom: 36.5%;
    }

    span:nth-of-type(9) {
      bottom: 38%;
    }

    span:nth-of-type(10) {
      bottom: 39.5%;
    }

    span:nth-of-type(11) {
      bottom: 40.8%;
    }

    span:nth-of-type(12) {
      bottom: 42%;
    }

    span:nth-of-type(13) {
      bottom: 42.8%;
    }

    span:nth-of-type(14) {
      bottom: 43.5%;
    }

    span:nth-of-type(15) {
      bottom: 44%;
    }
  }
    
    div:nth-of-type(3) {
      position: absolute;
      bottom: 5px;

      h1,
      h2 {
        font-size: 16px;
        font-weight: 1.2;
        color: $tron-white;
        margin: 0 10px;
        padding: 0 5px;
        background-color: rgba(0,104,189,.3);
        text-shadow: 1px 3px 0 $grid-1;
      }
    }
  }
}

              
            
!

JS

              
                // Tron Skyline
// CSS Draw, only CSS
// Drawing taking the movie Tron as a reference.

// jordirue.com/tron.html


// Inspired by:
// https://codepen.io/ivorjetski/pen/xxGYWQG
// &
// https://codepen.io/slinto/pen/mBCFx
              
            
!
999px

Console