@font-face {
  font-family:DCGS;
  src:url(../font/WarioLand4CHMC.ttf);
}

body {
  min-height: 100vh;
  font-family: DCGS;
  font-size: 16px;
  text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000,1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 5px #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #c31432;
  background: -webkit-linear-gradient(to bottom, #240b36, #c31432);
  background: linear-gradient(to bottom, #240b36, #c31432);
  overflow: hidden;
}
*{image-rendering:pixelated}
*::-moz-selection{color:inherit;background:transparent}
*::selection{color:inherit;background:transparent}
*::-webkit-input-placeholder{color:white}
*:-moz-placeholder{color:white}
*::-moz-placeholder{color:white}
*:-ms-input-placeholder{color:white}

.c-def{cursor: url(../img/cursor-default.gif), auto}
.c-hand{cursor: url(../img/cursor-hand.gif), auto}
.c-drag{cursor: url(../img/cursor-drag.gif), auto}

.title, ul.menu li.active {
  color: transparent;
  background: #f84c70 url(../img/progval.gif);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  display: block;
  text-transform: uppercase;
  text-shadow:none;
}

.stars {
  position: fixed;
  width: 300vw;
  height: 300vh;
  top: 50%;
  left: 50%;
  margin-top: -150vh;
  margin-left: -150vw;
  -webkit-animation: spin 240s linear infinite;
  animation: spin 240s linear infinite;
  background-size: 240px;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI0MCAyNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0MCAyNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IHg9IjEwNiIgeT0iOTAiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI3NCIgeT0iNjMiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIyMyIgeT0iNjYiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSI1MCIgeT0iMTEwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iNjMiIHk9IjEyOCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjQ1IiB5PSIxNDkiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSI5MiIgeT0iMTUxIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iNTgiIHk9IjgiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIxNDciIHk9IjMzIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iOTEiIHk9IjQzIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTY5IiB5PSIyOSIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjE4MiIgeT0iMTkiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIxNjEiIHk9IjU5IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTM4IiB5PSI5NSIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjE5OSIgeT0iNzEiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiLz48cmVjdCB4PSIyMTMiIHk9IjE1MyIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEyOCIgeT0iMTYzIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMjA1IiB5PSIxNzQiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIxNTIiIHk9IjIwMCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjUyIiB5PSIyMTEiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB5PSIxOTEiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIxMTAiIHk9IjE4NCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjwvc3ZnPg==);
}
@-webkit-keyframes spin { from {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
} to {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
} }
@keyframes spin { from {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
} to {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
} }

.bg-dcgs {
  background-color: #540d6e;
}
.b--dcgs {
  border-color: #540d6e;
}
.bg-dark {
  background-color: #1c0627;
}
.stats {
  overflow:hidden;
}
.gamemenu {
  margin-bottom: -1px;
  background-color: #1c0627;
}
.gamemenu .menuitem.current::before {
  content: "";
  position: absolute;
  margin-top: 4px;
  margin-left: -16px;
  width: 16px;
  height: 8px;
  background: #540d6e;
}
.content {
  display: none;
}
.content.current {
  display: flex;
}
progress#experience[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
  height: 16px;
  background: #1c0627 url(../img/progmax.gif) repeat-x bottom left;
}
progress#experience[value]::-moz-progress-bar {
  height: 16px;
  background: #1c0627 url(../img/progval.gif) repeat-x bottom left;
}
small {
  font-size: 16px;
  background: #540d6e url(../img/progmax.gif) repeat-x bottom left;
}
.item {
  border: 4px double #540d6e;
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 20%;
}
.item #tt {
  position: absolute;
  left: 64px;
  padding: 8px 0 0 128px;
  width: 364px;
  height: 112px;
  text-align: left;
  background: linear-gradient(to right, transparent 0%, #000 25%);
  z-index: 99;
}

.simulator {
  height: 512px;
  overflow: hidden;
}
#room {
  min-width: 1024px;
  height: 100%;
  background: url(../img/wall-dcgs.gif) bottom center;
}
#room #floor {
  position: absolute;
  bottom: 0;
  width: 1016px;
  height: 42px;
  background: #222;
}
.hallway {
  min-width: 384px;
  height: 100%;
  background: url(../img/wall-hallway.gif) bottom center repeat-y;
}
.hallway #floor {
  position: absolute;
  bottom: 0;
  width: 384px;
  height: 86px;
  background: #222;
}
.office {
  min-width: 768px;
  height: 100%;
  background: url(../img/wall-stripes-dark.gif) bottom center;
}
.office #floor {
  position: absolute;
  bottom: 0;
  width: 760px;
  height: 42px;
  background: #222;
}
#catgirl {
  position: absolute;
  bottom: 0;
  margin-left: 256px;
  width: 150px;
  height: 388px;
}
.zombify {
  position: absolute;
  bottom: 0;
  margin-left: 0;
  width: 150px;
  height: 388px;
  background: url(../img/zombify.gif);
}
.dialog {
  position: absolute;
  max-width: 256px;
  bottom: 400px;
  margin-left: 20px;
  padding: 8px;
  color: #000;
  text-shadow: none;
  background: #fff;
  -webkit-box-shadow: 4px 4px 0px 0px #000;
  -moz-box-shadow: 4px 4px 0px 0px #000;
  box-shadow: 4px 4px 0px 0px #000;
}
.bed {
  position: absolute;
  bottom: 22px;
  margin-left: 0px;
  width: 388px;
  height: 152px;
}

.drone {
  position: absolute;
  bottom: 256px;
  margin-left: 480px;
  width: 174px;
  height: 96px;
}
.facemask {
  position: absolute;
  bottom: 294px;
  margin-left: 36px;
  width: 50px;
  height: 28px;
}
.glasses {
  position: absolute;
  bottom: 318px;
  margin-left: 36px;
  width: 50px;
  height: 16px;
}
.hair {
  position: absolute;
  bottom: 286px;
  margin-left: 10px;
  width: 102px;
  height: 92px;
}
.hat {
  position: absolute;
  bottom: 334px;
  margin-left: 18px;
  width: 86px;
  height: 48px;
}
.miniskirt {
  position: absolute;
  bottom: 162px;
  margin-left: 16px;
  width: 90px;
  height: 40px;
}
.shirt {
  position: absolute;
  bottom: 190px;
  margin-left: 14px;
  width: 94px;
  height: 104px;
}
.shorts {
  position: absolute;
  bottom: 118px;
  margin-left: 22px;
  width: 78px;
  height: 76px;
}
.tanktop {
  position: absolute;
  bottom: 200px;
  margin-left: 26px;
  width: 70px;
  height: 90px;
}
.thighhighs {
  position: absolute;
  bottom: 10px;
  margin-left: 30px;
  width: 62px;
  height: 126px;
}
.top {
  position: absolute;
  bottom: 224px;
  margin-left: 32px;
  width: 58px;
  height: 66px;
}
#achievements {
  position: absolute;
  bottom: 20px;
  margin-left: 512px;
  width: 88px;
  height: 88px;
  background: url(../img/trophybox.gif);
}
#wardrobe {
  position: absolute;
  bottom: 22px;
  margin-left: 740px;
  width: 196px;
  height: 362px;
  background: url(../img/wardrobe-default.gif);
}

/*Status bars*/
.statusbars {
  position: absolute;
  top: 0;
  width: 512px;
  margin-left: 512px;
}
.statusbars span {
  position: absolute;
  padding: 0 4px;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}
progress.status[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  height: 16px;
  width: 100%;
  background: rgba(0,0,0,.8);
}
progress#thirst[value]::-moz-progress-bar {
  background: #357EDD;
}
progress#hunger[value]::-moz-progress-bar {
  background: #FF4136;
}
progress#affection[value]::-moz-progress-bar {
  background: #A463F2;
}
.itemimg {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
#door {
  position: absolute;
  bottom: 86px;
  margin-left: 128px;
  width: 128px;
  height: 256px;
  background: url(../img/door-default.gif);
}
#desk {
  position: absolute;
  bottom: 22px;
  margin-left: 128px;
  width: 320px;
  height: 160px;
  background: url(../img/desk.gif);
}
.laptop {
  position: absolute;
  bottom: 180px;
  margin-left: 190px;
  width: 176px;
  height: 106px;
  background: url(../img/laptop.gif);
}
#nyawei {
  position: absolute;
  bottom: 182px;
  margin-left: 390px;
  width: 28px;
  height: 58px;
  background: url(../img/nyawei.gif);
  background-size: contain;
}
.rip {
  position: absolute;
  bottom: 20px;
  margin-left: 128px;
  width: 182px;
  height: 102px;
  background: url(../img/rip.gif);
}
.upg {
  border-color: #540d6e;
}
.popup {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 640px;
  height: 512px;
  border-color: #540d6e;
  overflow-y: auto;
  overflow-x: hidden;
}
.notify {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 512px;
  height: 128px;
  border-color: #540d6e;
}

/* Catnip Farm */
.land {
  width: 150%;
  height: 100%;
  background: url(../img/grass.gif) top left;
}
.crops {
  position: absolute;
  margin-left: 128px;
  bottom: 0;
  width: 768px;
  height: 384px;
  background: url(../img/dirt.gif) top left;
}
.catnip {
  width: 128px;
  height: 128px;
}
.catnip.ready {
  background: url(../img/catnip.gif);
}
/* Morphing Lab */
.lab {
  min-width: 100%;
  height: 100%;
  background: url(../img/wall-bricks-light.gif) bottom center;
}
.lab #floor {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 42px;
  background: #222;
}
.morphingback {
  position: absolute;
  bottom: 0;
  margin-left: 200px;
  width: 236px;
  height: 436px;
  background: url(../img/morphing-back.gif);
}
.morphingfront {
  position: absolute;
  bottom: 0;
  margin-left: 200px;
  width: 236px;
  height: 436px;
  background: url(../img/morphing-front.png);
}
.custom-input {
  margin: 4px;
  width: 256px;
  padding: 8px;
  color: #fff;
  background-color: #540d6e;
  border: 0;
}
.custom-select {
  position: absolute;
  margin-top: 128px;
  margin-left: 312px;
  width: 256px;
  font-family: DCGS;
}
.custom-select select {
  display: none;
}
.select-selected {
  background-color: #540d6e;
}
.select-selected:after {
  position: absolute;
  content: "";
  top: 16px;
  right: 8px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 8px;
}
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}
.select-items {
  position: absolute;
  background-color: #540d6e;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

#bed-purple{background-image:url(../img/bed-purple.gif)}
#drone-bat{background-image:url(../img/drone-bat.gif)}
#facemask-samurai{background-image:url(../img/facemask-samurai.gif)}
#glasses-purpletint{background-image:url(../img/glasses-purpletint.gif)}
#hair-white{background-image:url(../img/hair-white.gif)}
#hat-redcap{background-image:url(../img/hat-redcap.gif)}
#miniskirt-white{background-image:url(../img/miniskirt-white.gif)}
#shirt-mars{background-image:url(../img/shirt-mars.gif)}
#shirt-tesla{background-image:url(../img/shirt-tesla.gif)}
#shorts-denim{background-image:url(../img/shorts-denim.gif)}
#tanktop-black{background-image:url(../img/tanktop-black.gif)}
#thighhighs-rainbow{background-image:url(../img/thighhighs-rainbow.gif)}
#top-pink{background-image:url(../img/top-pink.gif)}

#map {
  z-index: 8;
}