
$size:5em;
$thickness:0.1em;
$left:5em;

html, body, #root {
  margin: 0;
  width:100%;
  min-width: 500px;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  *display:flex;
  *flexDirection:column;
  background: deepskyblue;
}

body, h1, h2, h3 {
  font-weight: 300
}

a {
  color: white;
  text-decoration: none;

  &:hover {
    color: #5aadbb;
  }
}

.divination{
  text-align: center;
}

.coins
{
	width:50%;
	display:flex;
	flexDirection:row;
	margin-left:auto;
	margin-right:auto;
	margin-top:3em;
	margin-bottom:3em;
}

.coin{
	border-radius:50%;
	width:$size;
	height:$size;
	margin-left:auto;
	margin-right:auto;
	*margin-top:5em;
	position:relative;
	transition:all 6s;
  transform-style:preserve-3d;
  transform-origin:50% 50% -#{$thickness/2};
	*-webkit-transform-style:preserve-3d;
	*-webkit-transform-origin:50% 50% -#{$thickness/2};
	*animation: spin 0.1s linear infinite;

		@keyframes spin{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}
}

.head{
	position:absolute;
	height:$size;
	width:$size;
	background-image:url(http://7x00f7.com1.z0.glb.clouddn.com/head2.png);
	background-position:50% 50%;
	background-size:contain;
}

.tail{
	position:absolute;
	height:$size;
	width:$size;
	background-image:url(http://7x00f7.com1.z0.glb.clouddn.com/tail2.png);
	background-position:50% 50%;
	background-size:contain;
	transform:translateZ(-$thickness);
}

$guaBgColor:white;
$guaYinColor:red;
$guaYangColor:blue;

.gua-diagram {
  width:10em;
  height:15em;
  background-color: $guaBgColor;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  margin-bottom: 2em;
}

.gua-diagram-body {
  width:100%;
  height:90%;
}

$barHeight:8%;
.gua-line {
  margin: $barHeight;
  height: $barHeight;
  display: flex;
  flexDirection: column;
}

$guaChangeWidth:10%;

.gua-bar {
  height: 100%;
  width: #{100-$guaChangeWidth};
}

.gua-space-yin {
  background-color: $guaBgColor;
  height:100%;
  width:30%;
  margin-left: auto;
  margin-right: auto;
}

.gua-space-yang {
  @extend .gua-space-yin;
  display: none;
}

.gua-bar-yin {
  @extend .gua-bar;
  background-color: $guaYinColor;
}

.gua-bar-yang {
  @extend .gua-bar;
  background-color: $guaYangColor;
}

.gua-change {
  width: $guaChangeWidth;
  height: 100%;
  vertical-align: center;
}

.gua-change-none {
  @extend .gua-change;
  background-color: $guaBgColor;
}

.gua-change-yang {
  @extend .gua-change;
  *background-color: yellow;
}

.gua-change-yin {
  @extend .gua-change;
  *background-color: green;
}

.guide {
  text-align: left;
  margin: 4em;
}

.gua-result {
  border: 2px black solid;
  max-width: 20em;
  margin-left: auto;
  margin-right: auto;
}