html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
  image-rendering: pixelated;

}

#crosshair{
  align-self: center;
  
}

img {
  image-rendering: -moz-crisp-edges;         /* Firefox */
  image-rendering:   -o-crisp-edges;         /* Opera */
  image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

@font-face {
  font-family: 'minecraft';
  src: url('assets/fonts/minecraft.otf') format('opentype');
}



#topleft_info{
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  margin: 0;
  padding: .5vmin;

  font-size: 3vmin;
  background: rgba(0, 0, 0, 0.5);
}

body, html{
  padding: 0;
  margin: 0;
  background: black;

  overflow: hidden; /* Hide scrollbars */

}

#main_menu{
  width:  100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-image: url("https://preview.redd.it/a-few-screenshots-i-took-while-playing-with-complementary-v0-raztsppudmdd1.png?width=1080&crop=smart&auto=webp&s=980b945a2804212c1ce1b14ff365e251cb716a3e");
  background-size: cover;
  position: absolute;
  top:0;
  left:0;
  transition:opacity 2s ease;
}
#singleplayer_menu{
  width:  100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-image: url("https://preview.redd.it/a-few-screenshots-i-took-while-playing-with-complementary-v0-raztsppudmdd1.png?width=1080&crop=smart&auto=webp&s=980b945a2804212c1ce1b14ff365e251cb716a3e");
  background-size: cover;
  position: absolute;
  top:0;
  left:0;
}
#buttons, #buttons_singleplayer{
  display: flex;
  flex-direction: column;
  width: 80vmin;
  height: 50vmin;

  transition: all 2s ease;
  transform: scale(1);
}
.button{
  display: flex;
  width: 100%;
  height: 8vmin;
  border: none;
  font-size: 4vmin;
  background-repeat: no-repeat;
  background-image: url("assets/textures/gui/button.png");
  background-size: cover;
  margin-top: 2vmin;
  color: white;
  justify-content: center;
  align-items: center;
  text-shadow: .4vmin .4vmin 0px #000000b4;
  transition: all 0.1s ease;
  padding: 0;
}
.button:hover{
  /*background-image: url("assets/textures/gui/button_highlighted.png");*/
  filter: grayscale(1) sepia(1) hue-rotate(200deg) saturate(2); 
  transform: scale(1.02);
}

*{
  font-family: 'minecraft';
  image-rendering: pixelated;
}


#bottom_left_text{
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  color: white;
  margin: .5vmin;
  text-shadow: .3vmin .2vmin 0px #000000b4;
}
#logo{
  width: 70vmin;
  margin: 1vmin;
  transition: all 2s cubic-bezier(0.037, 0.797, 0.261, 0.973);
  transform: scale(10);
}
input{
  width: 100%;
  height: 8vmin;
  border: none;
  font-size: 4vmin;
  background-repeat: no-repeat;
  background-image: url("assets/textures/gui/button_disabled.png");
  background-size: cover;
  margin-top: 2vmin;
  color: white;
  text-align: center;
  align-content:center;
  text-shadow: .5vmin .5vmin 0px #000000b4;
  transition: all 0.5s ease;
  padding: 0;
}

@font-face {
  font-family: 'mojang';
  src: url('assets/fonts/mojangcraft.ttf') format('truetype');
}


#loading_screen{
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #ef303f;
  flex-direction: column;
  color: white;
  align-items: center;
  justify-content: center;
  transition: .5s ease opacity;
}

p#mojang_logo{
  font-family: mojang;
  font-size: 10vmin;
}

div#loading_bar_border{
  border: white 3px solid;
  width: 85vmin;
  height: 3vmin;
  display: flex;
  align-items: center;
}
div#loading_bar{
  background: white;
  width: 0vmin;
  height: 2vmin;
  margin: 0.5vmin;
  transition: .5s ease all;


}
#loading_info{
  font-size: 1vmin;
  align-self: left;
}

#hud{
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#crosshair{
  align-self: center;
  justify-self: center;

}

#hotbar{
  align-self: flex-end;
  display: flex;
}
#hotbar_img{
  height: 5vmin;
}
#hotbar_selector{
  height: 5.3vmin;
  position: absolute;
  transform: translateY(-.2vmin) translateX(4.33vmin);
  transition: transform .1s ease;
}

.centerer{
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}