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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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="zx-spectrum">

    <div class="zx-spectrum-top">
      <div class="logos">
        <div class="sinclair-logo">sinclair</div>
        <div class="model-name">ZX Spectrum</div>
      </div>
    </div>

    <div class="zx-spectrum-border top"></div>

    <div class="zx-spectrum-keyboard">
      <div class="keyboard-container">
        <div class="keyboard-row keyboard-row-1">

          <div class="key-container">
            <div class="first label color-blue">BLUE</div>
            <div class="second label">EDIT</div>
            <div class="key">
              <div class="primary">1</div>
              <div class="secondary">
                <div class="symbol symbol-1"></div>
              </div>
              <div class="tertiary">!</div>
            </div>
            <div class="last label">DEF FN</div>
          </div>

          <div class="key-container">
            <div class="first label color-red">RED</div>
            <div class="second label">CAPS LOCK</div>
            <div class="key">
              <div class="primary">2</div>
              <div class="secondary">
                <div class="symbol symbol-2"></div>
              </div>
              <div class="tertiary">@</div>
            </div>
            <div class="last label">FN</div>
          </div>

          <div class="key-container">
            <div class="first label color-magenta">MAGENTA</div>
            <div class="second label">TRUE VIDEO</div>
            <div class="key">
              <div class="primary">3</div>
              <div class="secondary">
                <div class="symbol symbol-3"></div>
              </div>
              <div class="tertiary">#</div>
            </div>
            <div class="last label">LINE</div>
          </div>

          <div class="key-container">
            <div class="first label">GREEN</div>
            <div class="second label">INV.VIDEO</div>
            <div class="key">
              <div class="primary">4</div>
              <div class="secondary">
                <div class="symbol symbol-4"></div>
              </div>
              <div class="tertiary">$</div>
            </div>
            <div class="last label">OPEN #</div>
          </div>

          <div class="key-container">
            <div class="first label color-cyan">CYAN</div>
            <div class="second label arrow">⇦</div>
            <div class="key">
              <div class="primary">5</div>
              <div class="secondary">
                <div class="symbol symbol-5"></div>
              </div>
              <div class="tertiary">%</div>
            </div>
            <div class="last label">CLOSE #</div>
          </div>

          <div class="key-container">
            <div class="first label color-yellow">YELLOW</div>
            <div class="second label arrow arrow-vertical">⇩</div>
            <div class="key">
              <div class="primary">6</div>
              <div class="secondary">
                <div class="symbol symbol-6"></div>
              </div>
              <div class="tertiary">&</div>
            </div>
            <div class="last label">MOVE</div>
          </div>

          <div class="key-container">
            <div class="first label color-white">WHITE</div>
            <div class="second label arrow arrow-vertical">⇧</div>
            <div class="key">
              <div class="primary">7</div>
              <div class="secondary">
                <div class="symbol symbol-7"></div>
              </div>
              <div class="tertiary">'</div>
            </div>
            <div class="last label">ERASE</div>
          </div>

          <div class="key-container">
            <div class="first label arrow">⇨</div>
            <div class="key">
              <div class="primary">8</div>
              <div class="secondary">
                <div class="symbol symbol-8"></div>
              </div>
              <div class="tertiary">(</div>
            </div>
            <div class="last label">POINT</div>
          </div>

          <div class="key-container">
            <div class="first label color-white">GRAPHICS</div>
            <div class="key">
              <div class="primary">9</div>
              <div class="secondary"></div>
              <div class="tertiary">)</div>
            </div>
            <div class="last label">CAT</div>
          </div>

          <div class="key-container">
            <div class="first label inverted-color">BLACK</div>
            <div class="second label">DELETE</div>
            <div class="key">
              <div class="primary">0</div>
              <div class="secondary"></div>
              <div class="tertiary">_</div>
            </div>
            <div class="last label">FORMAT</div>
          </div>

        </div>
        <div class="keyboard-row keyboard-row-2">

          <div class="key-container">
            <div class="first label">SIN</div>
            <div class="key">
              <div class="primary">Q</div>
              <div class="secondary">&lt;=</div>
              <div class="tertiary">PLOT</div>
            </div>
            <div class="last label">ASN</div>
          </div>

          <div class="key-container">
            <div class="first label">COS</div>
            <div class="key">
              <div class="primary">W</div>
              <div class="secondary">&lt;&gt;</div>
              <div class="tertiary">DRAW</div>
            </div>
            <div class="last label">ACS</div>
          </div>

          <div class="key-container">
            <div class="first label">TAN</div>
            <div class="key">
              <div class="primary">E</div>
              <div class="secondary">&gt;=</div>
              <div class="tertiary">REM</div>
            </div>
            <div class="last label">ATN</div>
          </div>

          <div class="key-container">
            <div class="first label">INT</div>
            <div class="key">
              <div class="primary">R</div>
              <div class="secondary">&lt;</div>
              <div class="tertiary">RUN</div>
            </div>
            <div class="last label">VERIFY</div>
          </div>

          <div class="key-container">
            <div class="first label">RND</div>
            <div class="key">
              <div class="primary">T</div>
              <div class="secondary">&lt;</div>
              <div class="tertiary">RAND</div>
            </div>
            <div class="last label">MERGE</div>
          </div>

          <div class="key-container">
            <div class="first label">STR $</div>
            <div class="key">
              <div class="primary">Y</div>
              <div class="secondary">AND</div>
              <div class="tertiary">RETURN</div>
            </div>
            <div class="last label">[</div>
          </div>

          <div class="key-container">
            <div class="first label">CHR $</div>
            <div class="key">
              <div class="primary">U</div>
              <div class="secondary">OR</div>
              <div class="tertiary">IF</div>
            </div>
            <div class="last label">]</div>
          </div>

          <div class="key-container">
            <div class="first label">CODE</div>
            <div class="key">
              <div class="primary">I</div>
              <div class="secondary">AT</div>
              <div class="tertiary">INPUT</div>
            </div>
            <div class="last label">IN</div>
          </div>

          <div class="key-container">
            <div class="first label">PEEK</div>
            <div class="key">
              <div class="primary">O</div>
              <div class="secondary big">;</div>
              <div class="tertiary">POKE</div>
            </div>
            <div class="last label">OUT</div>
          </div>

          <div class="key-container">
            <div class="first label">TAB</div>
            <div class="key">
              <div class="primary">P</div>
              <div class="secondary big">"</div>
              <div class="tertiary">PRINT</div>
            </div>
            <div class="last label">©</div>
          </div>

        </div>
        <div class="keyboard-row keyboard-row-3">

          <div class="key-container">
            <div class="first label">READ</div>
            <div class="key">
              <div class="primary">A</div>
              <div class="secondary">STOP</div>
              <div class="tertiary">NEW</div>
            </div>
            <div class="last label big">~</div>
          </div>

          <div class="key-container">
            <div class="first label">RESTORE</div>
            <div class="key">
              <div class="primary">S</div>
              <div class="secondary">NOT</div>
              <div class="tertiary">SAVE</div>
            </div>
            <div class="last label">|</div>
          </div>

          <div class="key-container">
            <div class="first label">DATA</div>
            <div class="key">
              <div class="primary">D</div>
              <div class="secondary">STEP</div>
              <div class="tertiary">DIM</div>
            </div>
            <div class="last label">\</div>
          </div>

          <div class="key-container">
            <div class="first label">SGN</div>
            <div class="key">
              <div class="primary">F</div>
              <div class="secondary">TO</div>
              <div class="tertiary">FOR</div>
            </div>
            <div class="last label">{</div>
          </div>

          <div class="key-container">
            <div class="first label">ABS</div>
            <div class="key">
              <div class="primary">G</div>
              <div class="secondary">THEN</div>
              <div class="tertiary">GOTO</div>
            </div>
            <div class="last label">}</div>
          </div>

          <div class="key-container">
            <div class="first label">SQR</div>
            <div class="key">
              <div class="primary">H</div>
              <div class="secondary big">↑</div>
              <div class="tertiary">GOSUB</div>
            </div>
            <div class="last label">CIRCLE</div>
          </div>

          <div class="key-container">
            <div class="first label">VAL</div>
            <div class="key">
              <div class="primary">J</div>
              <div class="secondary big">-</div>
              <div class="tertiary">LOAD</div>
            </div>
            <div class="last label">VAL $</div>
          </div>

          <div class="key-container">
            <div class="first label">LEN</div>
            <div class="key">
              <div class="primary">K</div>
              <div class="secondary big">+</div>
              <div class="tertiary">LIST</div>
            </div>
            <div class="last label">SCREEN $</div>
          </div>

          <div class="key-container">
            <div class="first label">USR</div>
            <div class="key">
              <div class="primary">L</div>
              <div class="secondary big">=</div>
              <div class="tertiary">LET</div>
            </div>
            <div class="last label">ATTR</div>
          </div>

          <div class="key-container">
            <div class="without-label key">ENTER</div>
          </div>

        </div>
        <div class="keyboard-row keyboard-row-4">

          <div class="key-container">
            <div class="key double without-label large">
              <span>CAPS</span>
              <span>SHIFT</span>
            </div>
          </div>

          <div class="key-container">
            <div class="first label">LN</div>
            <div class="key">
              <div class="primary">Z</div>
              <div class="secondary big">:</div>
              <div class="tertiary">COPY</div>
            </div>
            <div class="last label">BLEEP</div>
          </div>

          <div class="key-container">
            <div class="first label">EXP</div>
            <div class="key">
              <div class="primary">X</div>
              <div class="secondary big">£</div>
              <div class="tertiary">CLEAR</div>
            </div>
            <div class="last label">INK</div>
          </div>

          <div class="key-container">
            <div class="first label">L PRINT</div>
            <div class="key">
              <div class="primary">C</div>
              <div class="secondary big">?</div>
              <div class="tertiary">CONT</div>
            </div>
            <div class="last label">PAPER</div>
          </div>

          <div class="key-container">
            <div class="first label">L LIST</div>
            <div class="key">
              <div class="primary">V</div>
              <div class="secondary big">/</div>
              <div class="tertiary">CLS</div>
            </div>
            <div class="last label">FLASH</div>
          </div>

          <div class="key-container">
            <div class="first label">BIN</div>
            <div class="key">
              <div class="primary">B</div>
              <div class="secondary big">*</div>
              <div class="tertiary">BORDER</div>
            </div>
            <div class="last label">BRIGHT</div>
          </div>

          <div class="key-container">
            <div class="first label">IN KEY $</div>
            <div class="key">
              <div class="primary">N</div>
              <div class="secondary big">,</div>
              <div class="tertiary">NEXT</div>
            </div>
            <div class="last label">OVER</div>
          </div>

          <div class="key-container">
            <div class="first label">PI</div>
            <div class="key">
              <div class="primary">M</div>
              <div class="secondary big">.</div>
              <div class="tertiary">PAUSE</div>
            </div>
            <div class="last label">INVERSE</div>
          </div>

          <div class="key-container">
            <div class="key double without-label">
              <span class="color-red">SYMBOL</span>
              <span class="color-red">SHIFT</span>
            </div>
          </div>

          <div class="key-container">
            <div class="key double without-label large-xl">
              <span>BREAK</span>
              <span class="big">SPACE</span>
            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="zx-spectrum-border bottom"></div>

  </div>

<div class="created">
  <span>Created by</span>
  <a href="https://manz.dev/"><h2>Manz.dev</h2></a>
  <p>on <a href="https://twitch.tv/ManzDev">Twitch</a> / <a href="https://youtu.be/Qfq-cmqPdz4">Youtube</a></p>
</div>
              
            
!

CSS

              
                @use postcss-nested;

:root {
  --spectrum-width: 760px;
  --spectrum-height: 495px;
  --spectrum-bgcolor: #353539;
}

@font-face {
  font-family: "Sinclair logo";
  src:
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/sinclair-logo.woff2") format("woff2"),
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/sinclair-logo.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Technoid";
  src:
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/technoid.woff2") format("woff2"),
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/technoid.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Alte Haas Grotesk";
  src:
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/alte-haas-grotesk-bold.woff2") format("woff2"),
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/alte-haas-grotesk-bold.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "PLZ";
  src:
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/plz.woff2") format("woff2"),
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/plz.woff") format("woff");
  font-display: swap;
}

body {
  background: #44a;
}

.zx-spectrum {
  width: var(--spectrum-width);
  height: var(--spectrum-height);
  margin: 3em auto;
  background: var(--spectrum-bgcolor);
  border-top: 2px solid #3e3e41;
  border-radius: 25px 25px 5px 5px;
  overflow: hidden;
  position: relative;
  box-shadow: -10px 10px 20px #0008;

  & .zx-spectrum-top {
    height: 170px;
    background: linear-gradient(to right,
        #1F1F21 0,
        #4D4B50 1%,
        #323136 2.5% 97%,
        #4D4B50cc 99%,
        #1F1F21 100%);
    position: relative;

    & .logos {
      padding-left: 30px;
    }

    & .sinclair-logo {
      padding-top: 5px;
      font-family: "Sinclair logo";
      font-size: 90px;
      letter-spacing: 0.5px;
      color: #3B3A3F;
      text-shadow:
        0 -1px 1px #6c6b6d,
        1px 3px 3px #161617;
      line-height: 50%;
    }

    & .model-name {
      font-family: Montserrat, sans-serif;
      font-size: 22px;
      letter-spacing: -1px;
      text-shadow: 1px 2px 0 #111;
      color: #fff;
    }

    &::after {
      content: "";
      display: block;
      background: #272729;
      background: linear-gradient(to right,
          #1F1F21 0,
          #2e2e2f 1%,
          #272729 2.5% 97%,
          #2e2e2f 99%,
          #1F1F21 100%);
      width: 100%;
      height: 40px;
      position: absolute;
      bottom: 0;
      border-radius: 25px 25px 0 0;
    }

  }

  & .zx-spectrum-border {
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, #38373C, #2E2E32, #252427);

    &.top {
      border-radius: 25px 25px 0 0;
      height: 30px;
      background: linear-gradient(to bottom, #38373C 2%, #2E2E32 13%, #252427 25%);
      transform: translateY(-18px);

      &::after,
      &::before {
        content: "";
        display: block;
        width: 20px;
        height: 30px;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 0 25px 0 0;
        background: radial-gradient(ellipse 70px 50px at -8px 24px, #252427 33%, #2E2E32 40%, #38373C 65%);
      }

      &::before {
        background: radial-gradient(ellipse 50px 50px at 20px 25px, #252427 36%, #2E2E32 40%, #38373C 50%);
        border-radius: 25px 0 0 0;
        right: auto;
        left: 0;
      }
    }

    &.bottom {
      height: 15px;
      transform: scaleY(0.6) translateY(5px);
      border-radius: 1px 1px 3px 3px;
      position: absolute;
      bottom: 0;
      background:
        linear-gradient(to bottom,
          #fff3 1px,
          transparent 4px 12px,
          #0006 12px),
        linear-gradient(to right,
          #4D4B50 0.5%,
          #2c2b2f 1% 99.5%,
          #1F1F21 100%);
      box-shadow: 0 -2px 4px #0006;
    }
  }

  & .zx-spectrum-keyboard {
    height: 330px;
    border-radius: 25px 25px 5px 5px;
    background: #272729;
    background:
      linear-gradient(to right, transparent 96%, #0002 98%, #fff2 99%),
      linear-gradient(113deg,
        transparent 0 715px,
        #EA5A48 716px 727px,
        #E0C92B 728px 738px,
        #66AE43 738px 750px,
        #70B9E6 750px 762px,
        transparent 762px),
      linear-gradient(to right,
        #1F1F21 0,
        #4D4B50 1%,
        #323136 2.5% 97%,
        #4D4B50cc 99%,
        #1F1F21 100%);
    transform: translateY(-40px);
    display: flex;
    justify-content: center;
    align-items: flex-start;

    & .keyboard-container {
      width: 694px;
      height: 290px;
      margin-top: 8px;

      &>.keyboard-row {
        width: 100%;
        display: flex;
        align-items: flex-end;
        gap: 0 18px;
      }

      & .keyboard-row-1 {
        height: 80px;

        & .key {
          display: grid;
          grid-template-areas: "pri sec""pri ter";

          & .primary {
            grid-area: pri;
          }

          & .secondary {
            grid-area: sec;
          }

          & .tertiary {
            grid-area: ter;
          }
        }
      }

      & .keyboard-row-2 {
        height: 70px;
        transform: translateX(30px);

        & .key-container {

          &:is(:nth-child(1), :nth-child(2), :nth-child(3)) .secondary {
            letter-spacing: 2px;
          }

          &:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)) .secondary {
            font-size: 12px;
          }
        }

        & .key {
          display: grid;
          grid-template-rows: 22px 10px;
          grid-template-areas: "pri sec""ter ter";

          & .primary {
            grid-area: pri;
          }

          & .secondary {
            grid-area: sec;
            font-family: Montserrat;
            font-size: 10px;
            text-shadow: 0 1px 1px #0008;
            color: #CF574B;

            &.big {
              font-size: 14px;
            }
          }

          & .tertiary {
            grid-area: ter;
            color: #fff;
            justify-content: flex-end;
            margin-right: 5px;
          }
        }
      }

      & .keyboard-row-3 {
        height: 70px;
        transform: translateX(49px);

        & .key {
          display: grid;
          grid-template-rows: 22px 10px;
          grid-template-areas: "pri sec""ter ter";

          & .primary {
            grid-area: pri;
          }

          & .secondary {
            grid-area: sec;
            font-family: Montserrat;
            font-size: 8px;
            text-shadow: 0 1px 1px #0008;
            color: #CF574B;

            &.big {
              font-size: 12px;
            }
          }

          & .tertiary {
            grid-area: ter;
            color: #fff;
            justify-content: flex-end;
            margin-right: 5px;
          }
        }

        & .last.label.big {
          transform: rotate(25deg) translate(20px, 8px) scale(1.8);
        }
      }

      & .keyboard-row-4 {
        height: 70px;

        & .key {
          display: grid;
          grid-template-rows: 22px 10px;
          grid-template-areas: "pri sec""ter ter";

          & .primary {
            grid-area: pri;
          }

          & .secondary {
            grid-area: sec;
            font-family: Montserrat;
            font-size: 8px;
            text-shadow: 0 1px 1px #0008;
            color: #CF574B;

            &.big {
              font-size: 12px;
            }
          }

          & .tertiary {
            grid-area: ter;
            color: #fff;
            justify-content: flex-end;
            margin-right: 5px;
          }
        }
      }

    }

    & .key-container {

      & .label {
        font-family: Montserrat, sans-serif;
        font-size: 9px;

        &.arrow {
          font-size: 16px;
          color: white;
          line-height: 70%;
          transform: translateY(-3px);

          &.arrow-vertical {
            transform: scaleY(0.6) translateY(-4px);
          }
        }
      }

      & .color-red {
        color: #CF574B;
      }

      & .first {
        color: #6D8326;

        &.color-blue {
          color: #607CBF;
        }

        &.color-red {
          color: #CF574B;
        }

        &.color-magenta {
          color: #983D6A;
        }

        &.color-green {
          color: #6D8326;
        }

        &.color-cyan {
          color: #1AA8DE;
        }

        &.color-yellow {
          color: #FFCF4F;
        }

        &.color-white {
          color: #fff;
        }

        &.inverted-color {
          color: #353438;
          background: #fff;
          display: inline-block;
          padding: 0 5px;
          border-radius: 1px;
        }
      }

      & .second {
        color: #fff;
      }

      & .key {
        width: 48px;
        height: 35px;
        margin-top: 3px;
        margin-bottom: 4px;
        background: #535C61;
        border-radius: 5px;
        box-shadow:
          0 1px 0px #7F878D inset,
          0 -1px 2px #202224 inset,
          -2px 0 1px #676D73 inset,
          1px 0 1px #646B71 inset,
          0 0 1px 2px #100F1055,
          0 1px 3px 5px #100F1033,
          0 3px 3px #111;
        user-select: none;

        & .primary {
          font-family: "PLZ", serif;
          font-size: 22px;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          text-shadow: 0 0 4px #0004;
          transform: translateY(3px);
        }

        & .secondary {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        & .tertiary {
          font-family: Montserrat, sans-serif;
          font-size: 9px;
          color: #CF574B;
          text-shadow: 0 1px 2px #0007;
          display: flex;
          justify-content: center;
          align-items: flex-start;
        }

        &.without-label {
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: Montserrat, sans-serif;
          font-size: 10px;
          color: #fff;
        }

        &.double {
          display: flex;
          flex-direction: column;

          & .big {
            font-size: 14px;
          }
        }

        &.large {
          width: 65px;
        }

        &.large-xl {
          width: 80px;
        }
      }

      & .without-label {
        transform: translateY(-11px);
      }

      & .last {
        color: #CF574B;
      }
    }
  }

}

.symbol {
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 2px;
}

.symbol-1 {
  background:
    linear-gradient(to right, #fff 50%, transparent 50%),
    linear-gradient(to bottom, transparent 50%, #fff 50%);
}

.symbol-2 {
  background:
    linear-gradient(to right, transparent 50%, #fff 50%),
    linear-gradient(to bottom, transparent 50%, #fff 50%);
}

.symbol-3 {
  background:
    linear-gradient(to bottom, transparent 50%, #fff 50%);
}

.symbol-4 {
  background:
    linear-gradient(to right, #fff 50%, transparent 50%),
    linear-gradient(to bottom, #fff 50%, transparent 50%);
}

.symbol-5 {
  background:
    linear-gradient(to right, #fff 50%, transparent 50%);
}

.symbol-6 {
  position: relative;
}

.symbol-6::before {
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  background: #fff;
  position: absolute;
  right: 0;
}

.symbol-6::after {
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
}

.symbol-7 {
  position: relative;
}

.symbol-7::after {
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
}

.symbol-8 {
  background: #fff;
}

.created {
  background: 
    url(https://assets.codepen.io/154065/internal/avatars/users/default.png),
    linear-gradient(to bottom, #884ced, #ec1cce);
  background-size: 75px 75px, cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  height: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 2em;
  
  & span,
  & h2,
  & p,
  & a {
    font-family: Montserrat;
    margin: 0;
  }
  
  & a,
  & p,
  & span {
    color: #fff;    
  }
  
  & h2 {
    font-weight: 700;
    transform: translate(0, -4px);    
  }
  
  & a {
    text-decoration-color: rgba(255,255,255,0.4);
  }
  
  & a:hover {
    color: #e6e82a;
  }
}
              
            
!

JS

              
                /* Look mom, without JS */
              
            
!
999px

Console