$font-color: #373a3c;
$main-color: #4785ff;
$brand-color: white;
$main-background-color: white;
$light-background-color: #f7f7f9;

// toggler
$toggler-bounds: 50px;
$toggler-font-size: 1.5em;
$toggler-margin: -0.5rem -1rem;// Matches the navbar margin

body {  
  padding: 0;
  min-height: 75rem;
  position: relative;
  background-color: $main-background-color;
}


// Navigation bar container
.navbar-fixed-side {

  background-color: $main-background-color;

  @include media-breakpoint-up (md){
    position: fixed;
    width: inherit;
    max-height: 80%;
    max-height: 40%;
    border-radius: 0;
    margin-top: 6rem;
    padding: 0;

    .navbar {
      background-color: $main-color;
      padding: 0;
      margin: 0;
      border-radius: 0;

      .navbar-brand {
        font-size: 1.5em;
        color: $brand-color;
        font-weight: bold;
        margin: 2rem;
      }

      ul.navbar-nav {
        padding: 0;
        margin: 0;
        line-height: 35px;
        background-color: white;

        li.nav-item {
          width: 100%;
          padding: 0;
          margin: 0; 

          a.nav-link {
            color: $font-color;
            background-color: $main-background-color;
            padding-left: 10px;
            padding-right: 20px;
            font-size: 15px;
            // Truncates long titles
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            // End trucating

            &.active {
              background-color: $light-background-color;
              border-right: 10px solid $main-color;
              font-weight: bold;
              padding-right: 20px;
              font-size: 20px;
            }

            i.fa {
              margin: 0;
              font-size: 1.25em; // fa-1.5x
              margin-right: 10px;
            }
          }
        }// End li
      }// End ul.navbar-nav
    }// End nav.navbar
  }

  @include media-breakpoint-down (sm) {
    position: relative;
    padding-top: 4rem;

    .navbar {
      padding: 0;
      background-color: $main-color;
      border-radius: 0px;

      .navbar-brand {
        line-height: 50px;
        font-size: 1.5em;
        color: $brand-color;
        font-weight: bold;
        margin: 0 0 0 1em;
        padding: 0;
      }

      // toogle menu button
      .navbar-toggler {
        background-color: white;
        color: $main-color;
        border-radius: 0;
        width: $toggler-bounds;
        height: $toggler-bounds;
        font-size: $toggler-font-size;
      } 

      ul.nav {
        background-color: white;
        width: 100%;
        margin: 0;
        padding: 0;

        li.nav-item {
          
          width: 100%;
          text-align: center;

          a.nav-link {
            color: $font-color;
            &.active {
              font-weight: bold;
              font-size: 1.25em;
            }


            span.nav-link-text {
              margin-left: 2em;
            }
          }
        }
      }//End ul
    }// End .navbar
  }// End media-breakpoint-down 
}


// Content in the right side 
.content {

  @include media-breakpoint-up (sm) {
    margin-top: 1rem;
  }
}



// Forms

input.form-control {
  border-radius: 0px;
  height: 3rem;

  &:invalid {
    box-shadow: none;
  }
}

textarea.form-control {
  border-radius: 0px;
  resize: none;
  height: 8rem;

  &:invalid {
    box-shadow: none;
  }
}

button.btn {
  border-radius: 0px;

  // btn-block
  @include media-breakpoint-down (sm) {
    display: block;
    width: 100%;
  }
}

// Alerts

.alert {
  border-radius: 0px;
}


footer {
  border-left: 10px solid $main-color;
  border-right: 10px solid $main-color;
  background-color: $light-background-color;

  margin: 6rem 0 0 0;

  .container-fluid {
    padding-top: 15px;
    padding-bottom: 15px;

    .social-container {
        .fa {
          background-color: transparent;
          display: inline-block;
          line-height: 1;
          font-size: 2em;
          padding: 0.4em;
          border-radius: 0.1em;

          &.fa-code { color: $social_livecoding !important; }
          &.fa-envelope { color: $social_mail !important; }
          &.fa-github { color: $social_github !important;}
          &.fa-gitlab { color: $social_gitlab !important;}
          &.fa-linkedin { color: $social_linkedin !important;}
          &.fa-google-plus-square { color:$social_google-plus-square !important;}
          &.fa-twitter { color: $social_twitter !important;}
        }
    }

      p {
        font-size: 0.8em;
        margin: 0;
      }
  }
}

/* Remove that ugly outline effect */
* { outline: none !important; }