@font-face{font-family:Minecraft;src:url('/assets/fonts/minecraft.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Rubik;font-style:italic;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-cyrillic-ext-italic.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Rubik;font-style:italic;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-cyrillic-italic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Rubik;font-style:italic;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-latin-ext-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Rubik;font-style:italic;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-latin-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Rubik;font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-arabic-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:Rubik;font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-cyrillic-ext-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Rubik;font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-cyrillic-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Rubik;font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-latin-ext-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Rubik;font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/rubik-latin-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-cyrillic-ext-italic.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-cyrillic-italic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-latin-ext-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-latin-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-cyrillic-ext-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-cyrillic-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-latin-ext-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-latin-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

body {
  margin: 0;
  padding: 0;
}

main {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111030;
  background: linear-gradient(150deg, hsl(275, 50%, 10%) 0%, hsl(275, 50%, 8%) 50%, hsl(275, 50%, 9%) 100%);
}

.container {
  font-family: 'Minecraft';
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 100dvh;
  width: 100%;
}

.mcbutton-backend {
  font-family: 'Minecraft';
  font-size: 30px;
  pointer-events: all;
  position: relative;
  z-index: 5;
  text-decoration: none;
}

.mcbutton-back {
  background-color: #1d4d13;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.mcbutton {
  width: 365px;
  height: 80px;
  background-color: #1e1e1f;
  color: white;
  font-weight: 100;
  letter-spacing: 1px;
  border: 6px solid #1e1e1f;
  border-top: 14px solid #1e1e1f;
  user-select: none;
  pointer-events: none;
}

.mcbutton-front {
  background-color: #3c8527;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  box-shadow:
  inset 0 6px #639d52,
  inset 6px 0 #639d52,
  inset 0 -6px #4f913c,
  inset -6px 0 #4f913c;
  cursor: pointer;
  pointer-events: none;
}

@media (hover: hover) {
  .mcbutton-front:hover {
    background-color: #377926;
    margin-bottom: 16px;
    pointer-events: all;
    box-shadow:
    inset 0 6px #6ea55e,
    inset 6px 0 #6ea55e,
    inset 0 -6px #549443,
    inset -6px 0 #549443;
  }
}

.mcbutton-front.active {
  background-color: #265e1b;
  margin-bottom: 0;
  box-shadow:
  inset 0 6px #75946f,
  inset 6px 0 #75946f,
  inset 0 -6px #5b7e54,
  inset -6px 0 #5b7e54;
}

.mcbutton-back:hover {
  background-color: #1d4d13;
}

.mcbutton-backend.active {
  padding-top: 8px;
}

.mcbutton.active {
  border-top: 6px solid #1e1e1f;
}

@media (max-width: 460px) {
  .mcbutton-wrapper {
    transform: scale(0.85);
  }
}

@media (max-width: 390px) {
  .mcbutton-wrapper {
    transform: scale(0.73);
  }
}

@media (max-width: 325px) {
  .mcbutton-wrapper {
    transform: scale(0.6);
  }
}

.mcbutton-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  background-color: #C7C7C7;
  position: relative;
  z-index: 3;
  padding: 2rem;
  user-select: none;
  clip-path: polygon(
    6px 0,
    calc(100% - 6px) 0,

    calc(100% - 6px) 6px,
    100% 6px,

    100% calc(100% - 6px),

    calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) 100%,
    6px 100%,

    6px calc(100% - 6px),
    0 calc(100% - 6px),

    0 6px,
    6px 6px
  );
}

.mcbutton-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 6px;
  right: 6px;
  height: 6px;
  background: #FAFBF9;
}

.mcbutton-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 6px;
  right: 6px;
  height: 6px;
  background: #626262;
}

.mcbutton-wrapper .border-left {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 6px;
  background: #FAFBF9;
}

.mcbutton-wrapper .border-right {
  content: '';
  position: absolute;
  right: 0;
  top: 6px;
  bottom: 6px;
  width: 6px;
  background: #626262;
}

header .header-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, border-color 0.2s ease;
}