@charset "UTF-8";
body {
  margin: 0;
  font-family: 'Tahoma', sans-serif;
}

#world {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #fcc6ff;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFCC6FF', endColorstr='#FFBCE1FF');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjYzZmZiIvPjxzdG9wIG9mZnNldD0iOTklIiBzdG9wLWNvbG9yPSIjYmNlMWZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fcc6ff), color-stop(99%, #bce1ff));
  background-image: -moz-linear-gradient(top, #fcc6ff 0%, #bce1ff 99%);
  background-image: -webkit-linear-gradient(top, #fcc6ff 0%, #bce1ff 99%);
  background-image: linear-gradient(to bottom, #fcc6ff 0%, #bce1ff 99%);
  -moz-transition: background-image 5s ease-in-out;
  -o-transition: background-image 5s ease-in-out;
  -webkit-transition: background-image 5s ease-in-out;
  transition: background-image 5s ease-in-out;
  display: -webkit-flex;
  display: flex;
  display: -ms-flexbox;
  -webkit-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -ms-align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-justify-content: center;
  text-align: center;
}
#world:before {
  position: absolute;
  top: 0px;
  left: 0px;
  content: '';
  width: 100%;
  height: 100%;
  opacity: 1;
  -moz-transition: opacity 3s ease-in-out;
  -o-transition: opacity 3s ease-in-out;
  -webkit-transition: opacity 3s ease-in-out;
  transition: opacity 3s ease-in-out;
  background-color: #004691;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF004691', endColorstr='#FF050056');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNDY5MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA1MDA1NiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #004691), color-stop(100%, #050056));
  background-image: -moz-linear-gradient(top, #004691 0%, #050056 100%);
  background-image: -webkit-linear-gradient(top, #004691 0%, #050056 100%);
  background-image: linear-gradient(to bottom, #004691 0%, #050056 100%);
}

h1 {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  color: #88A;
  margin: 1em 0;
}

#sunmoon {
  position: relative;
  display: block;
  top: 120px;
  -moz-transition: -moz-transform 2s ease-in-out;
  -o-transition: -o-transform 2s ease-in-out;
  -webkit-transition: -webkit-transform 2s ease-in-out;
  transition: transform 2s ease-in-out;
  -moz-transform-origin: 0 -60px 50%;
  -ms-transform-origin: 0 -60px 50%;
  -webkit-transform-origin: 0 -60px 50%;
  transform-origin: 0 -60px 50%;
  -moz-transform: rotateZ(0deg);
  -ms-transform: rotateZ(0deg);
  -webkit-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
}
#sunmoon::before, #sunmoon::after {
  display: block;
  border-radius: 60px;
  content: ' ';
  position: absolute;
  background: #FFF;
  width: 120px;
  height: 120px;
}
#sunmoon::before {
  top: -270px;
  left: -30px;
  background: none;
  box-shadow: 30px 30px 0 0 #FFF;
}
#sunmoon::after {
  top: 240px;
}

.sunmoon:checked ~ #world::before {
  opacity: 0;
}

.sunmoon:checked ~ #world #sunmoon {
  -moz-transform: rotateZ(180deg) translateY(-120px);
  -ms-transform: rotateZ(180deg) translateY(-120px);
  -webkit-transform: rotateZ(180deg) translateY(-120px);
  transform: rotateZ(180deg) translateY(-120px);
}

.sunmoon:not(:checked) ~ #world #sunmoon {
  -moz-transform: rotateZ(0deg) translateY(0px);
  -ms-transform: rotateZ(0deg) translateY(0px);
  -webkit-transform: rotateZ(0deg) translateY(0px);
  transform: rotateZ(0deg) translateY(0px);
}

.tower-1:checked ~ #world #towers .tower.north-west {
  opacity: 0.5;
}

#towers {
  -moz-transform: scale(1, 0.7);
  -ms-transform: scale(1, 0.7);
  -webkit-transform: scale(1, 0.7);
  transform: scale(1, 0.7);
  width: 600px;
  height: 360px;
  position: relative;
}

.tower {
  width: 60px;
  height: 60px;
  position: absolute;
}
.tower::after, .tower::before {
  content: '';
  display: block;
  position: absolute;
  width: 32px;
  height: 360px;
}
.tower::after {
  left: 30px;
  top: 60px;
  -moz-transform-origin: 0px 0px;
  -ms-transform-origin: 0px 0px;
  -webkit-transform-origin: 0px 0px;
  transform-origin: 0px 0px;
  -moz-transform: skewY(-45deg);
  -ms-transform: skewY(-45deg);
  -webkit-transform: skewY(-45deg);
  transform: skewY(-45deg);
  background: #a6a6bf;
}
.tower::before {
  top: 60px;
  left: -2px;
  -moz-transform-origin: 30px 0px;
  -ms-transform-origin: 30px 0px;
  -webkit-transform-origin: 30px 0px;
  transform-origin: 30px 0px;
  -moz-transform: skewY(45deg);
  -ms-transform: skewY(45deg);
  -webkit-transform: skewY(45deg);
  transform: skewY(45deg);
  background: #666680;
}
.tower.south-west {
  z-index: 3;
  bottom: 0px;
  left: 30px;
}
.tower.south-west::after, .tower.south-west::before {
  height: 300px;
}
.tower.south-west .spire-roof {
  border-bottom: 78px solid #2b336f;
  border-right: 57px solid #808ce6;
  border-left: 12px solid #404da6;
  border-top: 18px solid #aab3ee;
}
.tower.north-west {
  left: 126px;
  top: 14px;
}
.tower.north-west::after, .tower.north-west::before {
  height: 480px;
}
.tower.north-west .spire-roof {
  border-bottom: 78px solid #6f333c;
  border-right: 57px solid #e68c99;
  border-left: 12px solid #a64d59;
  border-top: 18px solid #eeb3bb;
}
.tower.south-east {
  right: 159.96px;
  bottom: 159.96px;
  z-index: 100;
}
.tower.south-east::after, .tower.south-east::before {
  height: 600px;
}
.tower.south-east .spire-roof {
  border-bottom: 78px solid #226f33;
  border-right: 57px solid #73e68c;
  border-left: 12px solid #33a64d;
  border-top: 18px solid #a2eeb3;
}
.tower.north-east {
  right: 34px;
  top: 15px;
}
.tower.north-east .spire-roof {
  border-bottom: 78px solid #33332b;
  border-right: 57px solid #8c8c80;
  border-left: 12px solid #4d4d40;
  border-top: 18px solid #b3b3aa;
}
.tower > .path.spire {
  background: #9494b3;
  z-index: 10;
}
.tower > .path.spire > .path {
  z-index: -1;
}
.tower > .path.spire::before {
  top: -60px;
  left: -120px;
  height: 120px;
  background: #666680;
}
.tower > .path.spire::after {
  width: 120px;
  left: -60px;
  top: -240px;
  background: #a6a6bf;
}
.tower > .path .path, .tower > .path:not(.spire) {
  background: #a3a3a3;
}

.show:checked ~ #world #towers .tower {
  -moz-transition: -moz-transform 1s ease-out, opacity 2s ease-out;
  -o-transition: -o-transform 1s ease-out, opacity 2s ease-out;
  -webkit-transition: -webkit-transform 1s ease-out, opacity 2s ease-out;
  transition: transform 1s ease-out, opacity 2s ease-out;
}
.show:checked ~ .tower-1:checked ~ #world #towers .tower.north-west {
  -moz-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.show:checked ~ .tower-1:not(:checked) ~ #world #towers .tower.north-west {
  -moz-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  -moz-transform: translateY(-126px);
  -ms-transform: translateY(-126px);
  -webkit-transform: translateY(-126px);
  transform: translateY(-126px);
  opacity: 1;
}
.show:checked ~ #world #towers .tower.north-east {
  -moz-transition-delay: 0.45s;
  -o-transition-delay: 0.45s;
  -webkit-transition-delay: 0.45s;
  transition-delay: 0.45s;
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.show:checked ~ #world #towers .tower.south-west {
  -moz-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.show:checked ~ .tower-2:checked ~ #world #towers .tower.south-east {
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.show:checked ~ .tower-2:not(:checked) ~ #world #towers .tower.south-east {
  -moz-transform: translateY(255px);
  -ms-transform: translateY(255px);
  -webkit-transform: translateY(255px);
  transform: translateY(255px);
  opacity: 1;
}
.show:checked ~ #world #towers .tower .path {
  opacity: 1;
}

.show:not(:checked) ~ #world #towers .tower {
  -moz-transition: -moz-transform 1s ease-in, opacity 0.75s ease-in;
  -o-transition: -o-transform 1s ease-in, opacity 0.75s ease-in;
  -webkit-transition: -webkit-transform 1s ease-in, opacity 0.75s ease-in;
  transition: transform 1s ease-in, opacity 0.75s ease-in;
}
.show:not(:checked) ~ #world #towers .tower.north-west {
  -moz-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  -moz-transform: translateY(360px);
  -ms-transform: translateY(360px);
  -webkit-transform: translateY(360px);
  transform: translateY(360px);
  opacity: 0;
}
.show:not(:checked) ~ #world #towers .tower.north-east {
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  -moz-transform: translateY(360px);
  -ms-transform: translateY(360px);
  -webkit-transform: translateY(360px);
  transform: translateY(360px);
  opacity: 0;
}
.show:not(:checked) ~ #world #towers .tower.south-west {
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
  -moz-transform: translateY(360px);
  -ms-transform: translateY(360px);
  -webkit-transform: translateY(360px);
  transform: translateY(360px);
  opacity: 0;
}
.show:not(:checked) ~ #world #towers .tower.south-east {
  -moz-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
  -moz-transform: translateY(360px);
  -ms-transform: translateY(360px);
  -webkit-transform: translateY(360px);
  transform: translateY(360px);
  opacity: 0;
}
.show:not(:checked) ~ #world #towers .tower .path {
  opacity: 0;
}

.path {
  -moz-transition: opacity 2s ease-out;
  -o-transition: opacity 2s ease-out;
  -webkit-transition: opacity 2s ease-out;
  transition: opacity 2s ease-out;
  position: absolute;
  top: 0px;
  width: 60px;
  height: 60px;
  box-shadow: inset 0px 0px 0px 15px #989898;
  -moz-transform-origin: 0px 0px 50%;
  -ms-transform-origin: 0px 0px 50%;
  -webkit-transform-origin: 0px 0px 50%;
  transform-origin: 0px 0px 50%;
  -moz-transform: rotateZ(45deg) scale(0.75);
  -ms-transform: rotateZ(45deg) scale(0.75);
  -webkit-transform: rotateZ(45deg) scale(0.75);
  transform: rotateZ(45deg) scale(0.75);
}
.path.south {
  z-index: 1;
}
.path.east {
  z-index: 2;
}
.path.north {
  z-index: 3;
}
.path > .path.north > .path.west::before {
  height: 0;
  width: 0;
  background: none;
  border-right: 0;
  border-bottom: 60px solid transparent;
  border-left: 60px solid #737373;
}
.path.half-blocked-east::after {
  height: 0;
  width: 0;
  background: none;
  border-left: 0;
  border-right: 60px solid transparent;
  border-top: 60px solid #b3b3b3;
}
.path > .north::before {
  background: none;
}
.path > .west::after {
  background: none;
}
.path.to-east::after {
  background: none;
}
.path.to-south::before {
  background: none;
}
.path::after, .path::before {
  content: '';
  display: block;
  position: relative;
  width: 60px;
  height: 60px;
}
.path::after {
  left: 60px;
  top: -60px;
  -moz-transform-origin: 0px 0px;
  -ms-transform-origin: 0px 0px;
  -webkit-transform-origin: 0px 0px;
  transform-origin: 0px 0px;
  -moz-transform: skewY(45deg);
  -ms-transform: skewY(45deg);
  -webkit-transform: skewY(45deg);
  transform: skewY(45deg);
  background: #b3b3b3;
}
.path::before {
  top: 60px;
  -moz-transform-origin: 30px 0px;
  -ms-transform-origin: 30px 0px;
  -webkit-transform-origin: 30px 0px;
  transform-origin: 30px 0px;
  -moz-transform: skewX(45deg);
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
  background: #737373;
}
.path > .path.north {
  -moz-transform: translateY(-60px);
  -ms-transform: translateY(-60px);
  -webkit-transform: translateY(-60px);
  transform: translateY(-60px);
}
.path > .path.east {
  -moz-transform: translateX(60px);
  -ms-transform: translateX(60px);
  -webkit-transform: translateX(60px);
  transform: translateX(60px);
}
.path > .path.south {
  -moz-transform: translateY(60px);
  -ms-transform: translateY(60px);
  -webkit-transform: translateY(60px);
  transform: translateY(60px);
}
.path > .path.west {
  -moz-transform: translateX(-60px);
  -ms-transform: translateX(-60px);
  -webkit-transform: translateX(-60px);
  transform: translateX(-60px);
}

.spire-roof {
  display: block;
  position: absolute;
  top: -132px;
  left: -120px;
  z-index: 200;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  -moz-transform: rotateX(45deg);
  -ms-transform: rotateX(45deg);
  -webkit-transform: rotateX(45deg);
  transform: rotateX(45deg);
}

@-moz-keyframes clouds {
  0% {
    -moz-transform: translateX(0px);
    transform: translateX(0px);
  }
  100% {
    -moz-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
@-webkit-keyframes clouds {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  100% {
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
@keyframes clouds {
  0% {
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  100% {
    -moz-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
.clouds {
  position: absolute;
  height: 600px;
  /*content: "♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣";*/
  content: "\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663";
  letter-spacing: -0.15em;
  color: #FFF;
  left: -1000px;
  width: 4000px;
  background: #FFF;
  font-size: 1em;
}
.clouds::after {
  /*content: "♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣";*/
  content: "\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663\2665\2663";
  display: block;
  position: absolute;
  font-size: 1em;
  top: -0.6em;
  left: 0px;
}
.clouds.back {
  -moz-animation: clouds 240s linear 0s infinite;
  -webkit-animation: clouds 240s linear 0s infinite;
  animation: clouds 240s linear 0s infinite;
  z-index: -1;
  background: #DDD;
  top: 180px;
}
.clouds.back::after {
  color: #DDD;
  font-size: 14em;
}
.clouds.middle {
  z-index: 2;
  top: 360px;
  background: #EEE;
  -moz-animation: clouds 180s linear 0s infinite;
  -webkit-animation: clouds 180s linear 0s infinite;
  animation: clouds 180s linear 0s infinite;
}
.clouds.middle::after {
  font-size: 18em;
  color: #EEE;
}
.clouds.front {
  z-index: 100;
  top: 600px;
  background: #FFF;
  -moz-animation: clouds 60s linear 0s infinite;
  -webkit-animation: clouds 60s linear 0s infinite;
  animation: clouds 60s linear 0s infinite;
}
.clouds.front::after {
  font-size: 24em;
  color: #FFF;
}
.clouds::after, .clouds::before {
  letter-spacing: -0.125em;
}

input[type=checkbox] {
  position: absolute;
  z-index: 100;
  margin: 0.25em 60px;
  height: 20px;
  width: 60px;
}
input[type=checkbox] + label {
  position: absolute;
  z-index: 101;
  display: block;
  margin: 0.25em 60px;
  height: 20px;
  width: 60px;
  cursor: pointer;
}
input[type=checkbox] + label::before {
  display: inline-block;
  position: relative;
  pointer-events: none;
  text-indent: 0.25em;
  text-align: center;
  font-size: 20px;
  height: 30px;
  width: 90px;
  line-height: 30px;
  font-family: 'Montserrat', sans-serif;
  background: #777;
  border-radius: 5px;
  -moz-transition: background 0.25s ease-in-out, color 0.5s ease-in-out;
  -o-transition: background 0.25s ease-in-out, color 0.5s ease-in-out;
  -webkit-transition: background 0.25s ease-in-out, color 0.5s ease-in-out;
  transition: background 0.25s ease-in-out, color 0.5s ease-in-out;
  top: -10px;
  left: -10px;
}
@media only screen and (max-width: 800px) {
  input[type=checkbox] + label::before {
    font-size: 26px;
    height: 60px;
    width: 120px;
    line-height: 60px;
  }
}
input[type=checkbox].show {
  top: 100px;
}
@media only screen and (max-width: 800px) {
  input[type=checkbox].show {
    top: 10px;
  }
}
input[type=checkbox].show + label {
  top: 100px;
}
@media only screen and (max-width: 800px) {
  input[type=checkbox].show + label {
    top: 10px;
  }
}
input[type=checkbox].show + label::before {
  content: 'rise';
  background: #dde;
}
input[type=checkbox].show:checked + label::before {
  content: 'fall';
  background: #466;
  color: #222;
}
input[type=checkbox].tower-1 {
  top: 130px;
}
@media only screen and (max-width: 800px) {
  input[type=checkbox].tower-1 {
    top: 70px;
  }
}
input[type=checkbox].tower-1 + label {
  top: 130px;
}
@media only screen and (max-width: 800px) {
  input[type=checkbox].tower-1 + label {
    top: 70px;
  }
}
input[type=checkbox].tower-1 + label::before {
  content: 'up';
  background: #D67;
}
input[type=checkbox].tower-1:checked + label::before {
  content: 'down';
  background: #a64d59;
}
input[type=checkbox].tower-2 {
  top: 160px;
}
@media only screen and (max-width: 800px) {
  input[type=checkbox].tower-2 {
    top: 130px;
  }
}
input[type=checkbox].tower-2 + label {
  top: 160px;
}
@media only screen and (max-width: 800px) {
  input[type=checkbox].tower-2 + label {
    top: 130px;
  }
}
input[type=checkbox].tower-2 + label::before {
  content: 'down';
  background: #665;
}
input[type=checkbox].tower-2:checked + label::before {
  content: 'up';
  background: #4d4d40;
}
input[type=checkbox].sunmoon {
  top: 190px;
}
@media only screen and (max-width: 800px) {
  input[type=checkbox].sunmoon {
    top: 190px;
  }
}
input[type=checkbox].sunmoon + label {
  top: 190px;
}
@media only screen and (max-width: 800px) {
  input[type=checkbox].sunmoon + label {
    top: 190px;
  }
}
input[type=checkbox].sunmoon + label::before {
  content: 'night';
  background: #001C37;
  color: #FFF;
}
input[type=checkbox].sunmoon:checked + label::before {
  content: 'day';
  background: #CC99FF;
  color: #000;
}