@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, #f2d94d 0%, #e2bb2d 5%, #e2bb2d 90%, #e6c943 95%, #7a5f14 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: #212325;
}
.ghost--main {
  background-color: #111111;
  border-top: 15px solid #2c2e31;
  flex: 1 0 100px;
}

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