html {
  height: 100%;
  width: 100%;
  overflow:hidden;
  background-size:100px;
  /*image-rendering:pixelated;*/
image-rendering: crisp-edges;
  font-family:fonto;
  color:white;
}
body{
  height: 100%;
  width: 100%;
  background-image:url('terrain/grass.png');
  background-size:100px;
}
.obj{
  position:absolute;
}
#player{
  width:30px;
  position:absolute;
}

.flipped{
  perspective: 1000px;
  transform: rotateY(180deg);
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.unflipped{
  perspective: 1000px;
  transform: rotateY(0deg);
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
#team{
  width:100px;
  z-index:100000;
  /*height:100px;*/
  position:fixed;
  top:100px;
  left:0px;
  background-color:#474747;
  border:white 5px solid;
  text-align:center;
  font-size:30px;
  overflow-x:hidden;
  overflow-y:scroll;
  height:60%;
}
.member{
  border:white 5px solid;
  width:80px;
  border-radius:100%;
  margin:auto;
}
@font-face{
  src:url('font.ttf');
  font-family:fonto;
}
@font-face{
  src:url('strange.ttf');
  font-family:strange;
}
button{
  background-color:#544545;
  color:white;
  font-family:fonto;
  font-size:30px;
}
hr{
  size:5px;
  color:white;
}
#koins{
  position:fixed;
  top:5%;
  left:50%;
  color:white;
  font-size:100px;
  z-index:100000;
}
#savvy{
  margin-top:10px;
  background-color:#5ba4a0;
  color:white;
  font-family:fonto;
  font-size:40px;
}
#koin{
  position:fixed;
  top:5%;
  left:45%;
  width:50px;
  z-index:100000;
}
.minikoin{
  width:10px;
}
.drop{
  height:21px;
  overflow:hidden;
}
.drop:hover{
  height:fit-content;
}
.delete{
  background-color:#ba4f4f;
}
#popup{
  padding:5px;
  border:white 5px solid;
  font-size:40px;
  width:30%;
  height:20%;
  position:fixed;
  left:35%;
  top:40%;
  background-color:black;
  z-index:100000000;
  visibility:hidden;
}
input{
  font-family:fonto;
  font-size:20px;
}
#starter{
  padding:5px;
  border:white 5px solid;
  font-size:40px;
  width:400px;
  height:220px;
  position:fixed;
  left:35%;
  top:40%;
  background-color:black;
  z-index:100000000;
  visibility:hidden;
}
#ruininfo{
  padding:5px;
  border:white 5px solid;
  font-size:40px;
  width:400px;
  height:520px;
  overflow-y:scroll;
  position:fixed;
  left:15%;
  top:20%;
  background-color:black;
  z-index:10000;
  visibility:hidden;
}
.pick{
  width:100px;
}
#loading{
  width:100%;
  height:100%;
  background-color:black;
  z-index:100000000;
  position:fixed;
  top:0px;
  left:0px;
  text-align:center;
  font-size:50px;
  background-size:cover;
  background-image:url('title.png');
}
#logo{
  width:50%;
}
#shadebox{
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  background-color:black;
  filter:opacity(0%);
  pointer-events:none;
  z-index:15000;
}
@keyframes pulse{
  from{filter:brightness(100%); drop-shadow(0px 0px 0px white);}
  to{filter:brightness(150%) drop-shadow(0px 0px 30px grey);}
}
.pulsing{
  position:absolute;
  animation-name: pulse;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-duration: 5s;
}
#cubits > *{
  display:inline-block;
}

#cubits{
  position:fixed;
  bottom:10px;
  left:0px;
  width:90px;
  overflow-y:scroll;
  overflow-x:hidden;
  height:40px;
  background-color:#474747;
  border:5px white solid;
  z-index:15000;
  font-size:50px;
}
#enterbutton{
  position:fixed;
  bottom:70px;
  left:110px;
  z-index:10000000;
}
.cubit{
  width:20px;
}
#canvas{
  position:fixed;
  bottom:70px;
  left:0px;
  width:90px;
  height:90px;
  background-color:#474747;
  
  z-index:15000;
  font-size:50px;
}
.cell{
  position:absolute;
  background-color:#474747; 
  width:30px;
  height:30px;
  background-image:url('blank.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  border:white solid 5px;
}
#c1{
  top:0px;
  left:0px;
}
#c2{
  top:0px;
  left:30px;
}
#c3{
  top:0px;
  left:60px;
}
#c4{
  top:30px;
  left:0px;
}
#c5{
  top:30px;
  left:30px;
}
#c6{
  top:30px;
  left:60px;
}
#c7{
  top:60px;
  left:0px;
}
#c8{
  top:60px;
  left:30px;
}
#c9{
  top:60px;
  left:60px;
}
@keyframes fall{
  from {transform:rotate(0deg); filter:grayscale(0) opacity(100%);}
  to {transform:rotate(90deg); filter:grayscale(1) opacity(0%);}
}
@keyframes shake{
  from {transform:rotate(-10deg);}
  to {transform:rotate(10deg);}
}
.falling{
  position:absolute;
  animation-name:fall;
  animation-duration:3s;
  animation-iteration-count:infinite;
}
.shaking{
  position:absolute;
  animation-name:shake;
  animation-duration:1s;
  animation-iteration-count:infinite;
  animation-direction:alternate-reverse;
}
.popup{
  animation-name:slighthover;
  animation-duration:2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}
@keyframes slighthover{
  from {transform:translateY(0px);}
  to {transform:translateY(5px);}
}
#pet{
  width:30px;
  position:absolute;
}
#options{
  width:50px;
  visibility:visible;
  position:fixed;
  z-index:100000;
  bottom:10px;
  right:10px;
}
#drop{
  width:100px;
  visibility:hidden;
  color:white;
  background-color:#2d2d2d;
  border:5px #202020 solid;
  position:fixed;
  z-index:100000;
  bottom:60px;
  right:20px;
  text-align:center;
  font-size:40px;
}
#drop:hover{
  box-shadow:0px 5px 15px black;
  visibility:visible;
}
a {
  color:white;
  text-decoration:none;
}
a:hover {
  color:white;
  text-decoration:underline;
}
@keyframes dezoom{
  from{scale:1;}
  to{scale:0.25;}
}

.zooming{
  position:absolute;
  animation-name:dezoom;
  animation-duration:2.6s;
  animation-iteration-count:infinite;
}
#dtext{
  width:500px;
  height:150px;
  color:white;
  background-color:#2d2d2d;
  border:5px #202020 solid;
  position:fixed;
  z-index:100000;
  bottom:50px;
  right:200px;
  font-size:20px;
  font-family:strange;
  visibility:hidden;
}
#z{
  width:50px;
  bottom:55px;
  right:250px;
  position:fixed;
  z-index:100001;
  visibility:hidden;
}
#di{
  height:132px;
  background-image:url('denizen.gif');
  background-size:cover;
  width:140px;
  position:absolute;
  top:5px;
  left:5px;
  color:white;
  background-color:#2d2d2d;
  border:5px #202020 solid;
}
@keyframes ghost{
  from{filter:opacity(60%);}
  to{filter:opacity(10%);}
}
.haunting{
  position:absolute;
  animation-name:ghost;
  animation-duration:5s;
  animation-iteration-count:infinite;
  animation-direction:alternate-reverse;
}
#evalbox{
  text-align:center;
  position:fixed;
  width:25%;
  height:80%;
  top:10%;
  left:35.5%;
  background-color:#474747;
  border:5px white solid;
  z-index:10000000;
  visibility:hidden;
  overflow-y:scroll;
  overflow-x:hidden;
}
#evalnum{
  height:30px;
  background-color:#474747;
  font-size:30px;
}
.shownc{
  width:50px;
  border:5px white solid;
  border-radius:100%;
  pointer-events:none;
}
.hidec{
  width:50px;
  border:5px white solid;
  border-radius:100%;
  filter:brightness(0%);
  pointer-events:none;
}
#popup2{
  padding:5px;
  border:white 5px solid;
  font-size:40px;
  width:30%;
  height:20%;
  position:fixed;
  left:35%;
  top:40%;
  background-color:black;
  z-index:100000000;
  visibility:hidden;
}

.recipe{
  width:50%;
  margin:auto;
}
.sicon{
  margin-bottom:-5px;
  width:20px;
  height:20px;
  border:5px white solid;
  background-color:#474747;
}