:root {
   --pixel-size: 2px;
   --grid-cell: calc(var(--pixel-size) * 16);
   --bg: black;
}

@font-face {
   font-family: wild;
   src: url('../resources/font/wild.otf') format('woff');


}

body {
   background-color: black;
   font-family: 'wild' !important;
   user-select: none;
}

canvas {
   border-radius: 5px;
   border: solid #00faff;
}

.Entity {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 0px;
   left: 0px;
}

.scene {
   image-rendering: pixelated;
   cursor: none;
}

.Avatar {}

.full-view {
   width: 100%;
   height: 100%;

}

.full-width {
   width: 100%;
}

.full-height {
   height: 100%;
}

.float-left {
   float: left;
}

.float-right {
   float: right;
}

#loadingtext {
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: 1;
   color: red;
}

.center {
   margin: 0 auto;
   text-align: center;
}

.stand-animation {
   -webkit-animation: stand-animation 2s ease-in-out infinite;
   ;
   animation: stand-animation 2s ease-in-out infinite;
   ;
}


.move-animation {
   -webkit-animation: walk-animation .5s ease-in-out infinite;
   ;
   animation: walk-animation .5s ease-in-out infinite;
   ;
}

@-webkit-keyframes stand-animation {

   from,
   50%,
   to {
      transform: scaleY(1) translate(0, 0);
   }

   25%,
   75% {
      transform: scaleY(.95) translate(0, .9px);
   }
}

@-webkit-keyframes walk-animation {

   from,
   50%,
   to {
      transform: rotate(0deg) translate(0, 0);
   }

   25% {
      transform: rotate(-2deg) translate(0, -1px);
   }

   75% {
      transform: rotate(2deg) translate(0, -1px);
   }
}

.circle-particle {

   width: 1px;
   height: 1px;
   background-color: white;
   filter: brightness(200) drop-shadow(1px 0px 1px white);
   border-radius: 50%;
}



.boulder-shadow {
   border-radius: 50%;
   background: #111111ab;
}


.shot {
   background: yellow;
   width: 8px;
   height: 8px;
   border-radius: 50%;
}

.valign {
   display: flex;
   justify-content: center;
   align-items: center;
}

.TopBar {
   background-color: #048689;
   position: fixed;
   top: .5rem;
   left: calc(50% - 200px);
   width: 400px;
   height: 2rem;
   z-index: 99;
   border: solid #00eff4;
   border-radius: 5px;
}

.TopBar .ui-com {
   height: 1rem;
   margin-right: 3rem;
}

.screen-onhit {
   position: fixed;
   z-Index: 399;
   background: linear-gradient(90deg, rgba(255, 3, 3, 1) 0%, rgba(0, 212, 255, 0) 40%, rgba(249, 0, 0, 1) 100%);
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   transition: opacity 1s;
   opacity: 1;
}

.pick-up-screen {
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 100;
   transition: opacity 1s;
   opacity: 1;
}

.pick-up-screen .middlestripe {
   width: 100%;
   height: 3rem; 
}
.pickup-item-title{
   font-size: 4rem;
   font-weight: bold; 
   text-shadow: 1px 1px white;
   font-family: wild;
   line-height: 5rem;
}
.ribbon {
   position: absolute;
   left: 50%;
   display: block;
   margin: 100px -200px;
   width: 400px;
   height: 60px;
   border: 1px solid #04dade;
   font: normal 30px/60px 'Rye';
   text-align: center; 
   background: #00faff;
   border-radius: 4px;
   box-shadow: 0 0 30px rgba(0,0,0,.15) inset,
                   0 6px 10px rgba(0,0,0,.15);
 }
 
 .ribbon::before,
 .ribbon::after {
   content: '';
   position: absolute;
   z-index: -1;
   left: -70px;
   top: 24px;
   display: block;
   width: 40px;
   height: 0px;
   border: 30px solid #00faff;
   border-right: 20px solid #048284;
   border-bottom-color: #04dade;
   border-left-color: transparent;
   transform: rotate(-5deg);
 }
 
 .ribbon::after {
   left: auto;
   right: -70px;
   border-left: 20px solid #04dade;
   border-right: 30px solid transparent;
   transform: rotate(5deg);
 }
.pickup-sprite {
   image-rendering: pixelated;
   transform: scale(2);
}

.pickup-item-markout{
   width: 64px;
   height: 64px;
   background-color: #00f4f9;
   border-radius: 5px;
   box-shadow: 1px 1px 1px #047577;
   margin-top: -200px;
   transform: scale(1.5);

}

.heart-sprite {
   margin-left: 5px;
}

.btnlink {
   color: #ff0059;
   background: none;
   border: none;
   font-family: wild;
   cursor: pointer;
   text-shadow: 1px 1px #585143;
}

.t2x {

   font-size: 2rem;
}

.t3x {

   font-size: 3rem;
}

.t4x {

   font-size: 4rem;
}

.txshadow {
   text-shadow: 1px 1px #00faff;
}

.titlegame {
   user-select: none;
   color: teal;
   text-shadow: 1px 1px saddlebrown;
   font-size: 5rem;
   transform: scaleY(3) scaleX(1.5);
   margin: 5rem ;
}