:root {
  --main-bg-color: #313440;
  --darker-bg-color: #262831;
  --medium-bg-color: #282C34;
  --grey-bg-color: #474A56;
  --purple-font-color: #C678DD;
}

.dark-bg {
    background-color: var(--darker-bg-color);
}

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: var(--main-bg-color);
    color: #DBDFF4;
    font-family: 'Lato', sans-serif;
}

.ns-purple {
    color: var(--purple-font-color);
}

.darkest-bg {
    background-color: #262831;
}

.mono-font {
    font-family: 'Source Code Pro', monospace;
}

.invisible {
    visibility: hidden;
}

#footer {
    padding-bottom: 20px;
    height: 40px;
    background-color: #474A56;
    color: #FBFBFB;
}

.code-window {
    background-color: #282C34;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
    height: 230px;
    width: 100%;
}

.ns-logo {
    position: relative;
    top: -35px;
    left: calc(50% - 31px);
}

#window-controls {
    position: relative;
    height: 12px;
    top: -10px;
    left: -38px;
}

/* change the background color */
.navbar-dark {
    background-color: var(--darker-bg-color);
}

/* change the brand and text color */
.navbar-dark .navbar-brand,
.navbar-dark .navbar-text {
    color: #DBDFF4;
}

/* change the color of hovered brand */
.navbar-dark .navbar-brand:hover {
    color: #C678DD;
}

/* change the link color */
.navbar-dark .navbar-nav .nav-link {
    color: #DBDFF4;
}
/* change the color of active or hovered links */
.navbar-dark .nav-item.active .nav-link,
.navbar-dark .nav-item:focus .nav-link,
.navbar-dark .nav-item:hover .nav-link {
    color: #C678DD;
}

/* Grow from https://github.com/IanLunn/Hover/ */
.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
    fill: black;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}