html,
body,
header,
.jarallax {
    height: 50px;
}

@media (min-width: 560px) and (max-width: 650px) {
    header .jarallax h1 {
        margin-bottom: .5rem !important;
    }

    header .jarallax h5 {
        margin-bottom: .5rem !important;
    }

    #navbarText {
        z-index: 9999;
    }
}


@media (min-width: 660px) and (max-width: 700px) {
    header .jarallax h1 {
        margin-bottom: 1.5rem !important;
    }

    header .jarallax h5 {
        margin-bottom: 1.5rem !important;
    }

    #navbarText {
        z-index: 9999;
    }
}

.top-nav-collapse {
    background-color: #000000 !important;
}

.navbar:not(.top-nav-collapse) {
    background: #000000 !important;
}

@media (max-width: 768px) {
    .navbar:not(.top-nav-collapse) {
        background: #000000 !important;
    }
    #navbarText {
        z-index: 9999;
    }
}

@media (min-width: 800px) and (max-width: 850px) {
    .navbar:not(.top-nav-collapse) {
        background: #000000 !important;
    }
    #navbarText {
        z-index: 99999;
    }
}

/* Big screens 20 inch + */
@media (min-width: 900px) {
    .z-index-minus {
        position: relative;
        z-index: 1 !important;
    }
}

.navbar.navbar-dark .navbar-nav .nav-item .nav-link {
    color: #1DB954 !important;
}

.spotify-color-text {
    color: #117a37 !important
}

.spotify-color-text.lighten-1 {
    color: #1DB954 !important
}

/* Color the body a bit more shaded */
body {
    background-color: #ebedef;
}
/* Making navbar display block  */
.navbar-text {
    display: block !important;
}
/* Bottom z-index */
.z-index-minus {
    position: relative;
    z-index: -1;
}
.purple-border {
    border: 1px solid #ba68c8;
}

.purple-border .form-control:focus {
    border: 1px solid #ba68c8;
    box-shadow: 0 0 0 0.2rem rgba(186, 104, 200, .25);
}
.green-border-focus .form-control:focus {
    border: 1px solid #8bc34a;
    box-shadow: 0 0 0 0.2rem rgba(139, 195, 74, .25);
}