@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700');


html { 
  height: 100%;
}

body {
  min-height: 100%;
  background-color:#111111;
  font-family: "Roboto Condensed";
  text-transform: uppercase;
  overflow: hidden;  
}

.police-tape {
  background-color: #e2bb2d;
  background: linear-gradient(180deg, lighten(#e2bb2d, 20%) 0%, #e2bb2d 5%, #e2bb2d 90%, lighten(#e2bb2d, 5%) 95%, darken(#e2bb2d, 50%) 100%);
  padding: 0.125em;
  font-size: 3em;
  text-align: center;
  white-space: nowrap;
}

.police-tape--1 {
  transform: rotate(10deg);
  position: absolute;
  top: 40%;
  left: -5%;
  right: -5%;
  z-index: 2;
  margin-top: 0;
}
.police-tape--2 {
  transform: rotate(-8deg);
  position: absolute;
  top: 50%;
  left: -5%;
  right: -5%;
}

.ghost {
  display: flex;
  justify-content: stretch;
  flex-direction: column;
  height: 100vh;
}
.ghost--columns {
  display: flex;
  flex-grow: 1;
  flex-basis: 200px;
  align-content: stretch;
}

.ghost--navbar {
  flex: 0 0 60px;
  background: linear-gradient(0deg, #27292d 0px, #27292d 10px, transparent 10px);
  border-bottom: 2px solid #111111;
}
.ghost--column {
  flex: 1 0 30%;
  border-width: 0px;
  border-style: solid;
  border-color: #27292d;
  border-left-width: 10px;
  background-color: darken(#27292d, 6%);
  @for $i from 1 through 3 {
    &:nth-child(#{$i}) {      
      .code {
        @for $j from 1 through 4 {
          &:nth-child(#{$j}) {
            // $rotation: (5 - random(10)) + deg;
            // transform: translateY(0px) rotate($rotation);      
            $spacing: (random(9) / 2) + 1em;
            margin-left: $spacing;
          }
        }
      }
    }
  }
}
.ghost--main {
  background-color: #111111;
  border-top: 15px solid lighten(#27292d, 4%);
  flex: 1 0 100px;
}

.code {
  display: block;
  width: 100px;
  background-color: #27292d;
  height: 1em;
  margin: 1em;
  
}
.ghost--main .code {
  height: 2em;
  width: 200px;
}