* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
}

// COLORS

$color-black: #000;
$color-white: #fff;
$color-dark: #262626;
$color-lightest: #333;
$color-red: #ef0d33;
$color-grey: #bfbfbf;

@mixin desktop {
  @media (min-width: (1025px)) {
    @content;
  }
}

@mixin mobile {
  @media (max-width: (1024px)) {
    @content;
  }
}

@function vw($value, $base: 1920) {
  @return $value / $base * 100vw;
}

@function vmin($value, $base: 320) {
  @return $value / $base * 100vmin;
}

@function vh($value, $base: 937) {
  @return $value / $base * 100vh;
}


.main__menu {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  padding: vh(90) vh(200);
  padding-bottom: 0;
  width: 100%;
  height: 100vh;
  background-color: #111517;
  transition: all 0.8s ease-in-out;

  .container {
    align-items: center;
    justify-content: flex-end;
    width: vh(1300);
    height: 100%;

    @include mobile {
      justify-content: center;
    }
  }

  nav {
    ul {
      list-style-type: none;

      li {
        a {
          position: relative;
          display: inline-block;
          overflow: hidden;
          font-size: vh(80);
          color: $color-white;
          opacity: 0;
          transform: translateY(-10px);
          transition: all 0.6s;

          span {
            position: absolute;
            left: 0;
            display: block;
            overflow: hidden;
            width: 0;
            height: 100%;
            font-size: vh(80);
            background-color: #111517;
            backface-visibility: hidden;
            transition: width .3s;

            &::before {
              content: attr(data-text);
              position: absolute;
              right: 0;
              display: block;
              width: 100%;
              color: $color-red;
              backface-visibility: hidden;
            }
          }

          &:hover {
            span {
              width: 100%;
              transition: width 0.3s;
            }
          }
        }

        .opens {
          opacity: 1;
          transform: translateY(0);
          transition: all 0.6s;
        }
      }

      @include mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
  }

  @include mobile {
    padding-top: vmin(50);
  }
}