// Styles for drawing a laptop

$screen-border-color: #333
$body-color: #bbb
$trackpad-color: #666
$shadow-color: rgba(0, 0, 0, .5)

.laptop
  width: 50vw
  height: 29vw

  position: absolute
  top: 50%
  left: 50%

  z-index: 50

  transform: translate(-50%, -50%)


  .laptop-screen
    position: relative
    left: 7%
    height: 94%
    width: 86%
    background-color: $screen-border-color
    border-radius: 2vw 2vw 0 0
    padding: 3.5%

    box-shadow: 3px 3px 4px 0 $shadow-color
    z-index: 1

    .laptop-content
      width: 100%
      height: 100%

  .laptop-base
    position: relative
    background-color: $body-color
    height: 6%
    border-radius: 0 0 1vw 1vw

    z-index: 2
    box-shadow: 3px 3px 4px 0 $shadow-color

    .laptop-trackpad
      position: relative
      left: 50%
      background-color: $trackpad-color
      width: 20%
      height: 30%
      border-radius: 0 0 1vw 1vw
      transform: translateX(-50%)

// Styles for drawing a laptop

$screen-border-color: #333
$body-color: #bbb
$trackpad-color: #666
$shadow-color: rgba(0, 0, 0, .5)

$shadow: 3px 3px 4px 0 $shadow-color

.laptop
  width: 50vw
  height: 29vw

  position: absolute
  top: 50%
  left: 50%

  z-index: 50

  transform: translate(-50%, -50%)


  .laptop-screen
    position: relative
    left: 7%
    height: 94%
    width: 86%
    background-color: $screen-border-color
    border-radius: 2vw 2vw 0 0
    padding: 3.5%

    box-shadow: $shadow
    z-index: 1

    .laptop-content
      width: 100%
      height: 100%

  .laptop-base
    position: relative
    background-color: $body-color
    height: 6%
    border-radius: 0 0 1vw 1vw

    z-index: 2
    box-shadow: $shadow

    .laptop-trackpad
      position: relative
      left: 50%
      background-color: $trackpad-color
      width: 20%
      height: 30%
      border-radius: 0 0 1vw 1vw
      transform: translateX(-50%)

Store all shadow aspects in a variable
Store all shadow aspects in a variable
