seocahill/ember-fastboot-pwa

.macbook {
  width: 100%;
  margin: 0 auto;
  perspective: 92%;
  perspective-origin: 50% bottom;
  transform-style: preserve-3d;
}
.macbook-lid {
  width: 80%;
  margin: 0 auto;
  transform-origin: 50% bottom;
  transform-style: preserve-3d;
  transition: all 1s;
}
.macbook-lid:before {
  display: block;
  content: '';
  width: 92%;
  margin: 0 auto;
  padding: 2% 3% 0 3%;
  background-color: #D3D1D2;
  border-radius: 10px 10px 0 0;
  transform-origin: 50% bottom;
  transform: rotate3d(1, 0, 0, 90deg);
  transition: all 1s;
}
.macbook-screen {
  position: relative;
  background-color: #353535;
  margin: 0 auto;
  padding: 3%;
  border-radius: 5px 5px 0 0;
  transform-style: preserve-3d;
  transition: all 1s;
}
.macbook-screen:before {
  display: block;
  content: '';
  position: absolute;
  top: 2%;
  left: 49%;
  width: 1%;
  padding-top: 1%;
  background-color: #fff;
}
.macbook-content {
  position: relative;
  overflow: hidden;
  background-color: #323C4D;
  box-shadow: inset 0px 0px 6px #222;
}
.macbook-content .terminal {
  padding: 20px;
  color: lime;
  height: 100%;
  min-height: 100%;
  width: 100%;
  position: absolute;
  background-color: #323C4D;
}
.macbook-content p:nth-child(2) {
  animation: type2 8s steps(60, end);
}
.macbook-content p a {
  color: lime;
  text-decoration: none;
}
.macbook-content span {
  animation: blink 1s infinite;
}
.macbook-content ::selection {
  background: black;
}
.macbook-content:before {
  display: block;
  content: '';
  width: 1px;
  padding-top: 60%;
  float: left;
  background-color: #fff;
}
.macbook-content:after {
  display: block;
  content: '';
  clear: both;
}
.macbook-base {
  width: 100%;
  overflow: hidden;
  background-color: #D3D1D2;
  border-radius: 2px 2px 10px 10px;
}
.macbook-base:before {
  display: block;
  content: '';
  width: 30%;
  margin: 0 auto 1% auto;
  padding-top: 1.5%;
  background: #B0B0B0;
  border-radius: 0 0 10px 10px;
}
.macbook-base:after {
  display: block;
  content: '';
  padding-top: 1%;
  background-color: #B3B3B3;
}

// Old mac

.mac {
  position: fixed;
  top:50%;
  left:53%; 
}
.mac_sreen {
  background: #3f3f41;
  border: 20px solid #c9c0a3;
  width: 180px; 
  height: 130px;
  display:block;
  margin: -125px -100px;
  position: relative;
  &:before {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 50%;
    width: 120px;
    height: 5px;
    background: #d8d1b7;
    margin-left: -60px;
  }
  &:after {
    content: '';
    position: absolute;
    bottom: -90px;
    left: 50%;
    width: 180px;
    height: 65px;
    background: #f1ebdf;
    margin-left: -90px;
  }
}
.mac_tower {
  width: 70px; 
  height: 25px;
  background: #a19378;
  display: block;
  z-index: 2;
  position: absolute;
  bottom: -60px;
  left: -20px;
  &:before {
    content: '';
    width: 40px;
    height: 3px;
    background: #000;
    position: absolute;
    left: -55px;
    top: 11px;
  }
  &:after {
    content: '';
    display: block; 
    width: 30px;
    height: 10px;
    background: #c3b79d;
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    left: -50px;
    top: 8px;
  }
}
.mac_keyboard {
  width: 260px;
  height: 0;
  position: absolute;
  z-index: 4;
  left: 50%; 
  bottom: -75px;
  margin-left: -140px;
  border-top: 5px dashed #d8d1b7;
  box-shadow: 
    0 4px 0 #c9c0a3,
    0 8px 0 #fff,
    0 12px 0 #c9c0a3,
    0 14px 0 #c9c0a3,
    0 16px 0 #c9c0a3;
}
.mac_shadow {
    display: block;
    width: 270px;
    height: 30px;
    background: rgba(135,128,104,0.2);
    position: absolute;
    bottom: -115px;
    left: 50%;
    margin-left: -145px;
    z-index: -1;
    transform: perspective(200px) rotateX(45deg);
  
}

.website-information {
  color: green;
  position: fixed;
  width: 100%;
  bottom: 20%;
}

.website-author {
  color: green;
  position: fixed;
  width: 100%;
  top: 20%;
}