@import "../../../node_modules/normalize.css/normalize.css";
@import "../../../node_modules/bulma/css/bulma.css";
@import "../../components/command-palette/command-palette.scss";
@import "../../components/static-command-palette/static-command-palette.scss";
@import "../../components/theme-customizer/theme-customizer.scss";

body {
  margin-left: 200px;
}

.hide {
  display: none !important;
}

.sidebar {
  background: #222222;
  width: 180px;
  padding: 30px 0;
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;

  &__title {
    font-size: 30px;
    color: white;
    padding-left: 16px;
  }

  &__nav {
    margin-top: 30px;
    display: flex;
    flex-direction: column;

    &-link {
      text-decoration: none;
      color: white !important;
      padding: 16px;
      font-size: 16px;

      &.is-active,
      &:hover {
        border-left: 4px solid white;
      }

      img {
        height: 20px;
        margin-right: 10px;
        vertical-align: bottom;
      }
    }
  }

  .sidebar__footer {
    position: absolute;
    bottom: 15px;
    left: 16px;
    right: 16px;

    &-links {
      margin: 0 10px 0 0;

      img {
        height: 20px;
      }
    }
  }
}

.main-content {
  margin-top: 25px;
  margin-left: 80px;
  margin-right: 80px;
  min-width: 500px;
}

#page-theme {
  display: flex;
}

#page-about {
  .cLauncher-header {
    background: #222222;

    &__banner {
      max-height: 200px;
      display: block;
      margin: 0 auto;
    }
  }
}

#reset-theme {
  background: hotpink;
  color: white;
}

.author-message-container {
  margin-top: 60px;
  max-width: 400px;

  .author-avatar {
    border-radius: 50%;
    margin-right: 10px;
  }

  .author-message {
    padding-top: 10px;
    margin-left: 10px;
    font-size: 14px;
  }
}
