html
  background: #049372                       
  
body
  position: relative
  width: 600px
  margin: 0 auto

.skew
  position: absolute
 
.skewFaceTop
  transform: rotate(-45deg) skew(15deg, 15deg)
 
.skewFaceLeft
  transform: rotate(15deg) skew(15deg, 15deg)

.skewFaceRight
  transform: rotate(-15deg) skew(-15deg, -15deg)  
  
.base
  position: relative
  top: 220px
  width: 250px
  height: 250px
 
.info
  opacity: 0
  background: white
  border: 1px solid #eee
  border-radius: 5px
  padding: 1em
  width: 180px
  font-size: 14px
  color: #444
  position: fixed
  top: 50px
  right: 35%
  transition: opacity .3s ease-in-out

.reactor,
.reactor-2
  &:hover
    cursor: pointer
  &:hover > .info
    opacity: 1
    display: block
  &:hover > .chimneyBase
    background: darken(#D2D7D3, 45%)  
  &:hover > .trapezoid
    border-bottom: 60px solid darken(#D2D7D3, 45%)   
  
.reactor
  position: absolute
  left: 25%
  top: 5%
  z-index: 30

.reactor-2
  position: absolute
  left: -5%
  top: 20%
  z-index: 30

.smokeColumn
  z-index: 20
  height: 150px
  top: -130px
  left: -45px

.smokeColumn2
  z-index: 20
  height: 150px
  top: -210px
  left: 110px

.cloud1,
.cloud2,
.cloud3,
.cloud4,
.cloud5,
.cloud6,
.cloud7,
.cloud8
  background: white
  position: absolute
  border-radius: 50%
  opacity: 0
 
.cloud1
  width: 25px
  height: 25px
  animation: cloud 5s infinite
    
.cloud2
  width: 15px
  height: 15px
  animation: cloud 5s infinite
  animation-delay: 2s
.cloud3
  width: 20px
  height: 20px
  animation: cloud 5s infinite
  animation-delay: 3s
.cloud4
  width: 10px 
  height: 10px
  animation: cloud 5s infinite
  animation-delay: 4s
.cloud5
  width: 22px
  height: 22px
  animation: cloud 6.5s infinite
    
.cloud6
  width: 15px
  height: 15px
  animation: cloud 6.5s infinite
  animation-delay: 3s
.cloud7
  width: 20px
  height: 20px
  animation: cloud 6.5s infinite
  animation-delay: 3.5s
.cloud8
  width: 10px 
  height: 10px
  animation: cloud 6.5s infinite
  animation-delay: 2.5s
.ground
  background: darken(#3FC380, 30%)
  width: 250px
  height: 250px
  display: block
  top: 0
  left: 0

.chimney
  width: 46px
  height: 46px
  border-radius: 50%
  background: #BFBFBF 
  z-index: 12
  top: -38px
  left: 22px

.chimneyHole
  width: 35px
  height: 35px
  border-radius: 50%
  z-index: 13
  background: #444
  top: -33px
  left: 28px

.chimneyBase,
.trapezoid
  transition: all .3s ease-in-out

.reactor,
.reactor-2
  .chimneyBase
    width: 90px
    height: 90px
    border-radius: 50%
    background: darken(#D2D7D3, 38%)    
    z-index: 10
    
.reactor-2
  .chimneyBase
    background: darken(#D2D7D3, 30%)
 
.reactor,
.reactor-2
  .trapezoid
    border-bottom: 60px solid darken(#D2D7D3, 38%)  
    border-left: 30px solid transparent
    border-right: 30px solid transparent
    height: 0
    width: 50px  
    z-index: 11
    top: -24px
    left: -10px
    
.reactor-2 
  .trapezoid
    border-bottom: 60px solid darken(#D2D7D3, 30%)
   
.groundfaceLeft  
  background: #FDE3A7   
  width: 250px
  height: 15px
  top: 190px
  left: -112px
  
.groundfaceRight
  background: #F4B350   
  width: 250px
  height: 15px
  top: 190px
  right: -112px 
 
.tree
  position: absolute
  z-index: 10
.road
  width: 250px
  height: 25px
  top: 150px
  right: -65px

.roadAsphalt
  background: #888
  width: 250px
  height: 25px
  
.roadMark
  width: 250px
  height: 2px
  z-index: 2
  background: #F7CA18 
  top: 11px
 
.roadEntry
  width: 25px
  height: 15px
  background: #888
  top: 151px
  right: 75px
  z-index: 10

.parking
  width: 200px
  height: 170px
  background: #D2D7D3    
  top: 17px
  left: -6px
  border-bottom: 1px solid #999
  border-right: 1px solid #999
  border-left: 1px solid #999
 
.parkingSpaces
  top: 110px
  left: 60px
  td
    border: 1px solid white
    color: white
    font-size: 9px
    font-weight: bold
    text-align: center
 
.mountains
  position: absolute
  top: -35px
  left: -78px  
  z-index: 2

.mountain,
.mountain-2,
.mountain-3
  position: absolute
   
.mountain
  width: 0
  height: 0
  border-left: 50px solid transparent
  border-right: 50px solid transparent
  border-bottom: 150px solid darken(#1E824C, 15%) 
    
.mountain-2
  width: 0
  height: 0
  border-left: 31px solid transparent
  border-right: 31px solid transparent
  border-bottom: 90px solid darken(#1E824C, 15%)
  left: 90px
  top: 50px
 
    
.mountain-3
  width: 0
  height: 0
  border-left: 38px solid transparent
  border-right: 38px solid transparent
  border-bottom: 110px solid darken(#1E824C, 15%)
  left: 150px
  top: 50px

.pike
  width: 0
  height: 0
  border-left: 10px solid transparent
  border-right: 10px solid transparent
  border-bottom: 29px solid white 
  position: relative
  left: -10px
  top: 1px

.sky
  width: 250px
  height: 200px
  background: #34495E
  position: absolute
  z-index: 1
  top: -143px
  left: -112px
  
// Animations

@keyframes cloud
  0%
    opacity: 0
    bottom: 0
  40%
    opacity: 1
  60%
    opacity: 1
  80%
    opacity: 0
  100%
    opacity: 0
    bottom: 100%