/* /////////////////////////////////////////////////////////////////// */
*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "Minecraftia";
  src: url("../fonts/Minecraftia-Regular.ttf") format("truetype");
  font-style: normal; 
  font-weight: normal;
}
/* /////////////////////////////////////////////////////////////////// */
html {
  font: 18px "Minecraftia", Regular;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  /** background-image: url("https://i.ibb.co/bH3JY30/IE1G7Lr.png"); **/
  background-image: url(../p/background.gif);
  backdrop-filter: blur(3px);
  background-size: cover;
  background-position: center;
  position: relative;
}


.logo1 {
  display: grid;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10%;
}

/* Minecraft Style Menu */
.mc-menu {
  --btn-size: 30pt;
  display: grid;
  grid-template-columns: var(--btn-size) calc(var(--btn-size) * 10) var(--btn-size);
  grid-template-rows: repeat(3, var(--btn-size)) 16px var(--btn-size);
  grid-template-areas: ". 		first 		." ". 		second 		." ". 		third 		." ".		.					." "lang fourth 		.";
  grid-gap: 8px;
}
.mc-menu .mc-button:nth-child(1) {
  grid-area: first;
}
.mc-menu .mc-button:nth-child(2) {
  grid-area: second;
}
.mc-menu .mc-button:nth-child(3) {
  grid-area: third;
}
.mc-menu .double {
  grid-area: fourth;
}
.mc-menu .double .mc-button:nth-child(1) {
  grid-area: left;
}
.mc-menu .double .mc-button:nth-child(2) {
  grid-area: right;
}
.mc-menu .mc-button:nth-child(5) {
  grid-area: lang;
}
.mc-menu .double {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "left right";
  grid-gap: 8px;
}

/* Minecraft Style Button */
.mc-button {
  height: var(--btn-size);
  width: calc(var(--btn-size) * 10);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  /** background: #999 url("https://i.ibb.co/rb2TWXL/bgbtn.png") center/cover; **/
  background: #999 url(../p/mc-button.png);
  image-rendering: pixelated;
  border: 2px solid #000;
  /* Mouse over */
  /* Button title */
  /* Others */
}
.mc-button:hover .title {
  background-color: rgba(100, 100, 255, 0.45);
  text-shadow: 2px 2px #202013CC;
  color: #FFFFA0;
}
.mc-button:active .title {
  box-shadow: inset -2px -4px #0004, inset 2px 2px #FFF5;
}
.mc-button .title {
  width: 100%;
  height: 100%;
  padding-bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #DDD;
  text-shadow: 2px 2px #000A;
  box-shadow: inset -2px -4px #0006, inset 2px 2px #FFF7;
}
.mc-button.full {
  width: 100%;
  height: 100%;
}
.mc-button.lang img {
  width: 26px;
  height: 26px;
}
.mc-button.lang .title {
  padding-bottom: 0;
}

footer {
  position: absolute;
  bottom: 0;
  text-align: center;
}