/*
Theme Name: Mirai Forge
Theme URI: https://miraiforge.eu
Author: Stanislav H
Description: Custom theme for the Mirai Forge brand, designed by Stanislav Grechan. Made in black and white style with minimalist touches.
Version: 1.0
*/
* {
    box-sizing: border-box;
}

:root {
    --index: calc(1vw + 1vh);
    --color-header: #f7f7f7;
    --colro-text: #f7f7f7;
}

@font-face {
    font-family: 'Space Groteska';
    src: url(../mirai-forge/fonts/SpaceGrotesk-VariableFont_wght.woff2);
}

@font-face {
    font-family: 'Bebas Neue';
    src: url(../mirai-forge/fonts/BebasNeue-Regular.woff2);
}

@font-face {
    font-family: 'Poppins';
    src: url(../mirai-forge/fonts/Poppins-Regular.woff2);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Bebas Neue';
    --color-header: #f7f7f7;
}


body, html {
  background-color: #111111;
  scrollbar-width: none;
}



body.lock-scroll {
  overflow: hidden;
  height: 100vh;
}

.toggle-btn {
    display: flex;
    justify-content: flex-end;
}

.burger {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.75em 2em 1.5em 2em;
    background: rgba(255, 242, 242, 0);
    border-radius: 0.25em;
    outline: none;
    height: 20px;
    width: 28px;
    border: none;
    transition: all 250ms ease-out;
    cursor: pointer;
    z-index: 3;
}

.burger:before,
.burger::after {
  content: "";
  width: 40px;
  height: 2px;
  position: absolute;
  background: #f7f7f7;
  transition: all 250ms ease-out;
  will-change: transform;

}

.burger:before {
  transform: translateY(-3px);
}

.burger::after {
  transform: translateY(3px);
}

.active.burger:before {
  transform: translateY(0) rotate(45deg);

}

.active.burger:after {
  transform: translateY(0) rotate(-45deg);
}

.logo {
    z-index: 3;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  background: #111;
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  will-change: transform;
  z-index: 2;
}

@media (max-width: 767px) {
  .hide-mobile {
    display: none;
  }
}