@landscape: ~"only screen and (orientation: landscape)";
@portrait: ~"only screen and (orientation: portrait)";
@smartphones: ~"only screen and (max-width: 900px)";
@assetPath: "../assets";

@import "./loading.less";
@import "./splash.less";
@import "./info.less";
@import "./rules.less";

.megamasks-base + .gameUI {
  .megamasks-UI("base", #54d0e6);
}

.megamasks-freespins + .gameUI {
  .megamasks-UI("freespins", #e9d960);
}

.megamasks-UI (@mode: "base", @uiColor) {

  .logo {
    max-width: 80vw;
    max-height: 35vh;
  }

  .loading,
  .loadingBar {
    display: none;
  }

  h1 {
    font-size: 8vh;
    font-weight: 400;
    font-family: "Foo";
    line-height: 0.9;
    background: -webkit-linear-gradient(#ffe554, #ffba00, #ff0000);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;

    @media @portrait {
      font-size: 5.5vh;
    }
  }

  p {
    max-width: 80%;
    font-size: 2.5vh;
    margin-top: 3%;
    text-align: center;
  }

  .settings .INFO{
    .divider {
      width: 90% !important;
      min-height: 70px;
      margin: 0 auto !important;
      background: url("@{assetPath}/textures/settings/divider.png") center
        no-repeat !important;
      background-size: contain !important;
    }
  }


  .settings {
    .content {
      @media @portrait {
        width: 100vw;
      }

      .submenu-header {
        margin-top: 3vh !important;
      }

      font-size: 2vmin;

      @media @smartphones {
        font-size: 2.5vmax;
      }
    }
  }
  .normal-font .section-title{
  font-family: Roboto !important;
  padding: 24px;
  }
  .normal-font .subtitle{
    font-family: Roboto !important;
  padding: 24px;
  }
  .normal-font .section-subtitle{
    font-family: Roboto !important;
  padding: 24px;
  }
  .normal-font .submenu-header{
    font-family: Roboto !important;
  padding: 24px;
  }

  .normal-font {
    h1, h2, h3 {
      font-family: 'Roboto', sans-serif !important;
    }
  }

  .replay-button {
        color: #a3a3a3 !important;
        font: normal normal normal 24px / 1 FontAwesome !important;
  }

  .searchButton {
        color: #a3a3a3 !important;
        font: normal normal normal 24px / 1 FontAwesome !important;
  }
}