@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

/** Colors **/
$brahmos-color-1: #efdc4f;
$brahmos-color-2: #323330;

$primary: $brahmos-color-2;
// $primary-invert: #efdc4f;
$primary-light: white;
$text: $brahmos-color-2;
$link: #2060c3;
$menu-item-active-background-color: $brahmos-color-1;
$menu-item-active-color: $brahmos-color-2;
$family-sans-serif: 'Nunito', sans-serif;
// $background: #02030e;

@import '../node_modules/bulma/bulma.sass';

.app-container {
  min-height: 100vh;

  display: flex;
  flex-direction: column;

  .hero-body {
    display: flex;
    align-items: center;
    padding: 1.5rem;
  }

  .star-btn {
    vertical-align: middle;
    margin-left: 2rem;
  }

  .brahmos-logo,
  .github-logo {
    transition: all ease 400ms;
  }

  .brahmos-logo {
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    position: absolute;
  }

  .github-logo {
    width: 60px;
    height: 60px;
    left: 50%;
    top: 150%;
    transform: translate(-50%, -50%);
    position: absolute;
  }

  .logo {
    margin-right: 1rem;
    min-width: 100px;
    height: 100px;
    border-radius: 50%;
    background: $brahmos-color-1;
    overflow: hidden;
    position: relative;
    cursor: pointer;

    &:hover {
      .brahmos-logo {
        top: -100%;
      }
      .github-logo {
        top: 50%;
      }
    }
  }

  .body {
    display: flex;
    flex: 1;
  }

  .menu-list a:not(.is-active) {
    border-bottom: 1px solid $border;
  }

  .small-width {
    width: 300px;
  }

  .control-wrap {
    display: flex;
    align-items: center;
  }

  .example-container {
    padding-bottom: 100px;
    position: relative;
  }

  .react-credit {
    background: white;
    position: fixed;
    padding: 1rem 0.75rem;
    border-top: 1px solid $border;
    bottom: 0;
    left: 25%;
    width: 75%;
  }
}
