* {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	touch-action: manipulation;
  font-family: serif;
}

body {
  margin: 0;
  background: #000;
}

#title {
  position: absolute;
  z-index: 100;
  padding: 20px;
  background: rgba(255,255,255,0.8);
  _background: rgba(255,255,255,0);
  text-align: center;
}

h1 {
  margin: 10px;
}

#title .second,
#title .third,
#title .fin {
  display: none;
}

h2 {
  margin: 40% 0;
}

#start {
  position: absolute;
  bottom: 20px;
}

#start input {
  font-size: 1.5em;
}

#scrn {
  overflow: hidden;
  background: linear-gradient(deepskyblue, lightcyan 82%, olivedrab 82%, darkolivegreen);
  _transform: scale(2, 2);
}

#container {
  _border: 1px solid blue;
  transform-style: preserve-3d;
  position: relative;
}

#container div {
  position: absolute;
}

#clouds {
  transform-style: preserve-3d;
  color: white;
  _filter: blur(6px);
  _border: 1px red solid;
}

#clouds p {
  position: absolute;
  top: 0;
  text-align: center;
  font-weight: bold;
  margin: 0;
  filter: blur(20px);
  _border: 1px green solid;
}

#ground {
  background: #8A8180;
  border-radius: 50%;
  top: 0;
  _border: 5px solid red;
  _display: none;
}

#tower {
  transform-style: preserve-3d;
  transform-origin: left bottom;
  _border: 1px solid red;
  _background: yellow;
}

#flg {
  background: red;
  color: #fff;
  text-align: center;
  padding: 0;
  font-size: 1em;
  border-left: 1px solid black;
  transform-origin: left;
  display: none;
}

#top {
  border-radius: 50%;
  background: #E6E3DD;
}

#top::after {
  content: "";
  background: black;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  transform: scale(0.55);
  _top: 0;
  _left: 0;
}

#roof {
  background: #000;
  border-radius: 50%;
  border: 0.1px solid #999;
}

#btm {
  background: #000;
  border-radius: 50%;
  display: none;
}

#shadow {
  background: rgba(0,0,0,0.3);
  transform-style: preserve-3d;
  transform-origin: center bottom;
  filter: blur(10px);
}

.panel {
  _position: absolute;
  top: 0;
  _border: 0.1px solid #999;
  color: rgba(0, 0, 0, 0);
  background: url("bg.jpg") no-repeat center / cover;
  backface-visibility: hidden;
  transition: all 0.5s;
}

.panel::before {
  content: "";
  background: black;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.5s;
}

.panel.o1::before {
  opacity: 0.15;
}

.panel.o2::before {
  opacity: 0.3;
}

.panel.o3::before {
  opacity: 0.45;
}

.panel.back {
  background: #111;
  border: #111 solid 1px;
  color: red;
}

.panel.ph {
  border-radius: 2px;
}

.panel.left {
  border-right: none;
}

.panel.right {
  border-left: none;
}

.panel.origin {
  _background: red;
  display: none;
}

.bldg {
  position: absolute;
  top: 0;
  _backface-visibility: hidden;
  border: 0.1px solid black;
  background: orange;
  display: none;
}

.bldg.origin {
  display: none;
}

#ctrl, #info {
  position: fixed;
  top: 0;
}

#ctrl input[type=button] {
  display: block;
  font-size: 1.25em;
  position: absolute;
  opacity: 0.3;
  _display: none;
}

#rotateR {
  right: 0;
}

#info {
  text-align: center;
  padding: 5px;
  display: none;
}

#info span {
  margin: 1em;
  line-height: 2em;
}

#debug {
  font-size: 10px;
}