@import "custom/variables";

.navbar-brand {
  img {
    margin-bottom: 1rem;
    margin-right: 0.5rem;
  }
}

.banner-title {
  text-transform: none !important;
  color: white !important;
  font-size: 2rem;
  font-weight: 100 !important;
  filter: drop-shadow(0 0 1px #2b002b) drop-shadow(0 0 2px #11cdef) drop-shadow(0 0 1px #0ce3ac) !important;
  -webkit-filter: drop-shadow(0 0 1px #2b002b) drop-shadow(0 0 2px #11cdef) drop-shadow(0 0 1px #0ce3ac) !important;
}

hr {
  margin: 1rem 0px 1rem 0px;
}

.container hr.line {
  //margin: 1rem -15px 1rem -15px;
  background-color: $gray;
}

.features{
  vertical-align: text-bottom;
}

.feature {
  width: 180px;
  text-align: center;
  margin: 1rem;
  display: inline-block;

  img{

  }

  h3{
    display:block;
  }
}

.section {
  text-align: center;
  margin-top: 1rem;
  color: $secondary;

  h1 {
    color: $white;
    font-size: 2rem;
  }

  h2 {
    color: $secondary;
    font-size: 1.7rem;
  }

  h3 {
    color: $info;
    font-size: 1.2rem;
  }
}

img.img-xs {
  height: 16px;
  width: auto;
  margin-right: 0.2rem;
}

img.img-sm {
  height: 32px;
  width: auto;
  margin-right: 1rem;
}

img.clear {
  width: 16px;
  height: auto;
}

/* terminal */
.term,
.term-mini {
  /*height: 400px;*/
  width: 800px;
  min-width: 300px;
  max-width: 1280px;
  border-radius: 7px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.56);
  background: #000;
  flex-direction: column;
  overflow: hidden;
  display: inline-block;
}

.term-mini {
  width: 98% !important;
  margin: 5px;
  height: 350px;
  overflow-y: scroll;
  overflow: -moz-scrollbars-none; /* firefox */
  -ms-overflow-style: none; /* ie10+ */
}

/* chrome */
.term-mini::-webkit-scrollbar {
  width: 0 !important;
}

@media only screen and (min-width: 992px) {
  .term {
    width: 800px;
  }
}

@media only screen and (max-width: 991px) and (min-width: 768px) {
  .term {
    width: 708px;
  }
}

@media only screen and (max-width: 767px) and (min-width: 600px) {
  .term {
    width: 580px;
  }
}

@media only screen and (max-width: 599px) and (min-width: 415px) {
  .term {
    width: auto;
  }
}

@media only screen and (max-width: 414px) and (min-width: 376px) {
  .term {
    width: auto;
  }
}

@media only screen and (max-width: 375px) {
  .term {
    width: auto;
  }
}

.term-header {
  display: flex;
  padding: 5px;
  background: linear-gradient(#e2e0e2, #c7c6c8);
}

.term-header-button {
  position: relative;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0;
}

.term-header-button-close {
  background: #ff615a;
}

.term-header-button-minimize {
  background: #ffc230;
}

.term-header-button-expand {
  background: #29cb41;
}

.term-header-title {
  text-align: center;
  color: #494849;
  font-family: sans-serif;
  font-size: 1rem;
  width: 100%;
  height: 16px;
  margin-top: -2px;
}

.term.inactive .term-header {
  background: linear-gradient(to bottom, #f8f8f8 0%, #f7f6f7 100%);
}

.term.inactive .term-header-button-close,
.term.inactive .term-header-button-minimize,
.term.inactive .term-header-button-expand {
  border: 1px solid #d0d0d0;
  background-color: #dddddd;
}

.term.inactive .term-header-title {
  color: #b7b6b7;
}

.term-content {
  overflow-y: scroll;
  padding: 10px;
  font-size: 1.1rem;
  color: lightgray;
  text-align: left;
  margin-bottom: 20px;
}

.term-content-row {
  margin-bottom: 20px;
}

.term-content-comment {
  color: #eb6434;
  margin-right: 10px;
}

.term-content-arrow {
  color: #55f95d;
  margin-right: 10px;
}

.term-content-tilde {
  color: #54f9fb;
  margin-right: 10px;
}

.term-content-caret {
  color: #0ce3ac;
  margin-right: 10px;
}

.term-content-output {
  color: #fff;
  margin-right: 10px;
}
