@import url("https://fonts.googleapis.com/css?family=Poetsen+One");
html:has(.cent) {
  background-image:url('banner.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.cent {
  color:white;
  padding:50px;
  background:rgb(0,0,0,0.8);
  height:fit-content;
}
.cent hr {
  border:grey solid 1px;
}
.cent h1 {
  font-weight: 900;
  font-family: "Poetsen One", Arial, Helvetica, sans-serif;
  font-size: 40px;
}
/*cent*/
body {
  font-family: Arial, Helvetica, sans-serif;
  user-select:none;
  background-size: 10vh 10vh;
  overflow:hidden;
  background-image:
    linear-gradient(to right, aliceblue 0.4vh, transparent 1px),
    linear-gradient(to bottom, aliceblue 0.4vh, transparent 1px);
  transition:0.1s;
}
.baby:not(#baby), body {
  transition:0.1s;
}
.cantsee { /*stuff*/
  box-shadow: inset 0 0 50vh 25vh #333;
}
#score {
  background:transparent;
  position:fixed;
  top:0;
  left:0;
}
#baby, #score, .inv, .bottom {
  z-index:1000;
}
#baby {
  position:fixed;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}
.baby .spear,  .baby .name {
  position:absolute;
}
.baby .name {
  transform:translateY(-100%) !important;
}
.baby {
  font-size:3vh;
  width:fit-content;
}
.baby img {
  height:15vh;
  width:auto;
  transition:0.3s;
}
.baby .name {
  width:15vh !important;
  text-align: center;
}
.f .spear {
  transform: rotate(90deg) translateY(-12vh);
}
.bottom {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  display:block;
  float:right;
  height:20px;
  text-align:center;
}
.bottom #slider {
  display:block;
  background:lightgreen;
  height:20px;
  transition:0.3s;
}
.inv {
  float:right;
}
.select {
  box-shadow: 0 0 0 3px black;
}
.inv img {
  height:8vh;
  width:auto;
}
.cent {
  text-align: center;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  max-height: 100vh;
  overflow:auto;
}
button {
  padding:10px 40px;
  cursor:pointer;
  margin:2px;
  border:skyblue 1px solid;
  background:#3c7dc3;
  border-radius: 111px;
  backdrop-filter: blur(1px);
  color:white;
}
button:hover {
  background:#eeeeee;
  border-color:white;
  color:black;
}
img {
  pointer-events: none;
}
.spear {
  transform: rotate(90deg) translateY(-7vh);
  float:right;
}
.health {
  position: absolute;
  content:"";
  display:block;
  height:10px;
  width:15vh;
  border-radius: 111px;
  background:grey;
}
.health span {
  border-radius: inherit;
  height:10px;
  display:block;
  background:lightgreen;
}