body {
    background-color: rgb(32, 33, 36) !important;
    overscroll-behavior: contain;
}

/* 
    * ****************************
    * MOBILE CSS
    * ****************************
*/

/* Hacky fix for small screens so user can't accidentally scroll on iframes and nudge slides out of alignment */
@media (max-width: 768px) {
    body {
        overflow-y: hidden;
    }

    .container {
        max-width: 100%;
        max-height: 100%;
    }

    .card-body {
        padding: 90px 40px 40px 40px;
    }

    .d-xs-none {
        display: none;
    }
    .navbar.fixed-bottom {
        background: none;
        background-color: rgb(32, 33, 36) !important;
    }
}

/* 
    * ****************************
    * DESKTOP CSS
    * ****************************
*/

@media (min-width: 768px) {

    .card-body {
        padding: 40px;
    }

    .result, .card {
        border-radius: 0.5rem !important;
    }

    .card-body {
        border-top-left-radius: 0.5rem !important;
        border-top-right-radius: 0.5rem !important;
    }
    .card-footer {
        border-bottom-left-radius: 0.5rem !important;
        border-bottom-right-radius: 0.5rem !important;
    }

    .splide__track {
        padding-bottom: 30px;
    }

    .splide__slide {
        opacity: 0.3;
        transition: opacity 0.25s;
        margin-right: 5% !important;
        border-radius: 0.5rem;
        width: 75% !important;
    }

    .is-prev, .is-next {
        opacity: 0.3;
        box-shadow: none;
        transition: all 0.25s;
    }

    .splide__slide.is-active {
        opacity: 1;
        /* box-shadow: 0 15px 20px -3px rgb(0 0 0 / 50%), 0 9px 11px -2px rgb(0 0 0 / 50%); */
        transition: all 0.25s;
    }

    .slide_init {
        opacity: 0;
    }

    .fixed-top {
        position: relative;
    }
}

/* 
    * ****************************
    * TEXT THINGS
    * ****************************
*/

a, a:hover, a:active, a:visited {
    color: #42e700;
}

a.active,
.text-muted-highlight {
    color: #42e700 !important;
}

h5 a {
    text-decoration: none;
}

small {
    font-size: 1rem;
    font-weight: normal;
}

.green {
    color: #42e700;
}

/* 
    * ****************************
    * MODAL
    * ****************************
*/

.modal-content {
    background-color: rgb(32, 33, 36);
}

.modal-header {
    border: 0;
}

.modal-body {
    background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 66%, rgba(0,0,0,0) 98%, rgba(0,0,0,0.2) 100%);
}

/* 
    * ****************************
    * NAV AND BUTTONS
    * ****************************
*/

.navbar {
    padding: 0.5rem 1rem;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
}

.navbar-brand, .btn-secondary-outline {
    text-shadow: 1px 1px 5px #000;
}

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:active,
.navbar-dark .navbar-nav .nav-link:visited {
    color: #42e700;
}

.btn-outline-light {
    border: 0;
    text-shadow: 1px 1px 5px #000;
}

.btn-outline-light:hover {
    background: none;
    color: #f8f9fa;
}

.btn-outline-light.dropdown-toggle.show,
.btn-outline-light:active:focus
{
    background-color: rgba(0,0,0,0.7);
    color: #f8f9fa;
}

.dropdown-menu {
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    cursor: pointer;
}

.dropdown-item {
    color: #fff;
}

.lds-dual-ring {
    display: inline-block;
    width: 20px;
    height: 20px;
}
.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 20px;
    height: 20px;
    margin: 3px;
    border-radius: 50%;
    border: 3px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

span.nav-link {
    cursor: pointer;
}

span.nav-link.active {
    color: #42e700 !important;
    border-bottom: 5px solid #42e700;
}

/* 
    * ****************************
    * CARD AND RESULTS STUFF
    * ****************************
*/

.card {
    background: none;
    border: none;
    height: 100%;
    width: 100%;
    border-radius: 0;
    border: 0;
}

.card-body {
    /* display: none; */
    position: relative;
    /* padding-bottom: 56.25%; */
    height: 100%;
    overflow: hidden;
    /* max-width: 100%; */
}

.card-footer {
    background-color: rgba(0,0,0,.618);
    border: 0;
    border-radius: 0;
    backdrop-filter: blur(10px);
    padding: 25px 15px;
}

.card-footer:last-child {
    border-radius: 0;
}

.yt-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sp-iframe {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 80px;
    width: 100%;
    overflow: hidden;    
}

.iframe-shadow {
    -webkit-box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.6);
    box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.6);
    border: 2px solid rgba(255,255,255,0.6);
}

.iframe-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

/* Adding pseudo element to iframe parent */
.iframe-wrapper:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
}

/* Adding hover effect to pseudo element */
.iframe-wrapper:hover:after {
    content: none;
}


.result-blur {
    backdrop-filter: blur(10px);
    background-color: rgba(0,0,0,0.3);
}

.result {
    height: 100%;
    display: block;
    width: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
	align-items: flex-end;
}

.result-overlay {
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEUlEQVQIHWNggIBiEGUFxJUABisBJ85jLc8AAAAASUVORK5CYII=);
    width: 100%;
    height: 100%;
}