/* ONLY STYLES FOR DEMO PAGE! */

:root {
    --bs-dark-rgb: 21, 22, 25;
    --bs-dark: rgb(var(--bs-dark-rgb));
}

.btn-outline-dark {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);
    --bs-btn-active-border-color: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
}

//Variables
@doc-primary:       var(--bs-primary);
@doc-code-green:    #30c530;
@doc-yellow:        #ffea00;

.text-code-green {
    color: @doc-code-green;
}

.text-purple {
    color: var(--bs-purple);
}

.text-yellow, .hover-text-yellow:hover {
    color: @doc-yellow !important;
}

body {  
    text-rendering: optimizeLegibility;
    // -webkit-font-smoothing: antialiased;
    // -moz-osx-font-smoothing: grayscale;
    
    padding-top: 70px;

    @media screen and (min-width: 992px) {
        padding-top: 80px;
    }
}

section {
    padding-top: 70px;
    margin-top: -70px;

    @media screen and (min-width: 992px) {
        padding-top: 80px;
        margin-top: -80px;
    }
}

h1 {
    font-size: 64px;
    font-weight: bold;
    letter-spacing: -0.05em;
    margin-bottom: 0.1em;
    margin-top: 0;
    line-height: 1;
}

h2 {
    font-size: 32px;
    font-weight: bold;
    letter-spacing: -0.04em;
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1;
}

h3 {
    font-size: 20px;
    margin-bottom: 0.83334em;
}

h4 {
    font-size: 16px;
}

@media screen and (min-width:1200px) {
    h3 { font-size: 24px; }
}

@media screen and (max-width:767px) {
    h1 { font-size: 50px; }
    h2 { font-size: 25px; }
}

@media screen and (max-width: 320px) {
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
}

.page-header {
    margin-bottom: calc(var(--bs-body-line-height) * 1rem);

    h2 {
        line-height: 1;
        margin-bottom: 20px;
        font-weight: 600;
    }

    hr {
        margin-top: 0;
        margin-bottom: 0;
        border-top: 1px solid var(--bs-dark);
        opacity: 1;
    }
}

.container-fluid {
    padding: 30px 15px;

    @media screen and (min-width: 992px) {
        padding: 40px 20px;
    }
}

.navbar {
    .container-fluid {
        padding: 15px;

        @media screen and (min-width: 992px) {
            padding: 20px;
        }
    }
}

.jumbotron{
    .container-fluid {
        padding: 20px 15px;

        @media screen and (min-width: 992px) {
            padding: 30px 20px 40px 20px;
        }
    }
}

 /* Navbar */

.navbar {
    padding: 0;
    margin: 0;
    
    background-color: #000000;
    span.navbar-brand {
        letter-spacing: -0.04em;
        color: @doc-primary;
        font-weight: bold;
        &:hover {
            color: @doc-primary;
        }
        .glyphicon {
            font-weight: normal;
        }
    }

    .nav li.active a, .nav li.active a:hover, .nav li a:hover {
        color: @doc-primary;
    }
}

.navbar-header {
    .navbar-toggler .icon-bar {
        background-color: @doc-primary;
    }
    .navbar-toggler {
        border-color: #000;
        background-color: #000;
    }
    .navbar-toggler:hover, .navbar-toggler:focus {
        border-color: @doc-primary;
        background-color: #000;
    }
}

 /* Jumbotron */

.jumbotron {
    background-color: @doc-primary;
    color: #fff;
    width: 100%;
    min-height: ~"calc(100vh - 48px)";
    height: auto;

    a {
        color: var(--bs-dark);
        text-decoration: underline;
    }

    h2 {
        small {
            font-size: 0.5em;
        }
    }

    .desc {
        margin-bottom: 30px;
    }

    .text-muted {
        color: inherit !important;
        opacity: 0.7 !important;
    }

    .authors {
        margin-left: 3px;
    }

    .btn {
        text-decoration: none;
        padding-top: 6px;
        padding-bottom: 18px;
        margin-bottom: 10px;
        margin-right: 0;

        &:last-child {
            margin-bottom: 0 !important;
            margin-right: 0 !important;
        }

        @media screen and (min-width: 576px) {
            margin-bottom: 0;
            margin-right: 10px;
        }
    }

    @media screen and (min-width: 768px) {
        min-height: ~"calc(100vh - 56px)";
    }

    @media screen and (min-width: 992px) {
        min-height: ~"calc(100vh - 72px)";
    }

    @media screen and (max-width:767px) {
        .desc { font-size:  16px; }
    }

    @media screen and (max-width: 320px) {
        .desc { font-size: 15px; }
    }
}

 /* Buttons */

.btn {
    font-weight: 600;

    .fa {
        margin-right: 2px;
    }
}

.btn-sm .dropdown-toggle::after {
    vertical-align: 2px;
}

/* Features */

.feature {
    margin-bottom: 0px;

    @media screen and (min-width: 992px) {
        border-right: 1px solid var(--bs-dark);
    }

    p:last-child, &:last-child {
        margin-bottom: 0;
        border-right: 0;
    }

    h3 .fa:before {
        vertical-align: -10%;
        font-size: 1.5rem;
        display: inline-block;
        text-align: center;
        margin-right: 5px;
    }
}

/* How to use */
#how-to-use {
    h3 {
        margin-top: 40px;
    }

    p {
        margin-bottom: 20px;
    }

    ol,ul {
        margin-bottom: 20px;

        li {
            margin-bottom: 0.5em;
        }
    }
}

/* Code highlighting */

code {
    padding: 2px 4px;
    white-space: nowrap;
    border-radius: 4px;
}

pre code {
    padding: 0;
    border-radius: 0;
    white-space: pre-wrap;
}

pre {
    margin-bottom: 20px;
    padding: 10px;
    border-radius: var(--bs-border-radius);
    font-weight: 600;
    word-break: break-all;
    word-wrap: break-word;
}

pre, code {
  color: #fff;
  background-color: var(--bs-dark);
}

small, .small {
    font-size: 0.74em;
    font-family: var(--bs-font-monospace);
}

/* Call out */
.callout {
    padding: 20px;
    border-left: 3px solid #eee;
}

.callout-warning {
    background-color: #eee;
    border-color: @doc-primary;
}


/* Blimp stuff */

@-webkit-keyframes bounce {
 0%,
 to {
  transform:translateY(-25%);
  -webkit-animation-timing-function:cubic-bezier(.8,0,1,1);
  animation-timing-function:cubic-bezier(.8,0,1,1)
 }
 50% {
  transform:none;
  -webkit-animation-timing-function:cubic-bezier(0,0,.2,1);
  animation-timing-function:cubic-bezier(0,0,.2,1)
 }
}

@-webkit-keyframes wiggle {
 0%,
 to {
  transform:rotate(-3deg)
 }
 50% {
  transform:rotate(3deg)
 }
}

@keyframes wiggle {
 0%,
 to {
  transform:rotate(-3deg)
 }
 50% {
  transform:rotate(3deg)
 }
}

@keyframes bounce {
 0%,
 to {
  transform:translateY(-25%);
  -webkit-animation-timing-function:cubic-bezier(.8,0,1,1);
  animation-timing-function:cubic-bezier(.8,0,1,1)
 }
 50% {
  transform:none;
  -webkit-animation-timing-function:cubic-bezier(0,0,.2,1);
  animation-timing-function:cubic-bezier(0,0,.2,1)
 }
}

.animate-bounce-slow {
 -webkit-animation:bounce 6s linear infinite;
 animation:bounce 6s linear infinite
}

.animate-wiggle-slow {
 -webkit-animation:wiggle 6s ease-in-out infinite;
 animation:wiggle 6s ease-in-out infinite
}

.animate-bounce {
 -webkit-animation:bounce 1s infinite;
 animation:bounce 1s infinite
}