html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

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

body {
    margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}




.ubuntu-sans {
    font-family: "Ubuntu", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.bg-cream {
    background-color: #fcfbf7
}

.bg-dark-blue {
    background-color: #141824;
}

.text-berry {
    color: #f2395b
}

.text-pastel-green {
    color: #6aa71b
}

.bg-berry {
    background-color: #f22e6c
}

.nunito {
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.montserrat-bold {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.text-purple-gradient {
    background: linear-gradient(128.87deg, rgb(151, 128, 228) 14%, rgb(230, 102, 204) 89%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



.hero-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34vh;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(to left, #323c57 0%, transparent 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 1440 800' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M -100 400 C 300 100, 1140 700, 1540 400' vector-effect='non-scaling-stroke' fill='none' stroke='white' stroke-width='3' /%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 1440 800' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M -100 400 C 300 100, 1140 700, 1540 400' vector-effect='non-scaling-stroke' fill='none' stroke='white' stroke-width='3' /%3e%3c/svg%3e");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center;
}



.hero-content {
    position: relative;
    z-index: 1;
    width: 100%; /* <-- this allows input to grow */
    max-width: 600px; /* optional: limit max width */
    padding: 0 15px; /* optional: add some side padding */
}


.btn-gradient {
    background-image: linear-gradient(128.87deg, rgb(151, 128, 228) 14%, rgb(230, 102, 204) 89%);
    color: white;
}

    .btn-gradient:hover {
        background-image: linear-gradient(128.87deg, rgb(151, 128, 228) 14%, rgb(230, 102, 204) 89%);
        color: white;
        opacity: .9;
    }

.text-light-blue {
    color: #90a1b9;
}


.heading-border {
    width: 60px;
    border-bottom: var(--bs-border-width) var(--bs-border-style) #d46bd1 !important;
    border-width: 3px !important;
}


.overlay-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    opacity: 0;
    pointer-events: none;
}

.position-relative:hover .overlay-icon {
    opacity: 1;
}

.video-card:hover {
    opacity: .75;
    transition: opacity 0.1s ease-in-out;    
}

.pe-pointer {
    cursor: pointer;
}


.pe-default {
    cursor: default;
}

.border-hover-pink:hover {
    border-bottom: var(--bs-border-width) var(--bs-border-style) #d46bd1 !important;
    border-width: 3px !important;
}

.border-pink {
    border-bottom: var(--bs-border-width) var(--bs-border-style) #d46bd1 !important;
    border-width: 3px !important;
}

.truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.scrollable-playlist {
    max-height: 620px; /* can use 50vh when doing ads */
    overflow-y: auto;
    overflow-x: hidden;
}

    /* Hide scrollbar but keep scroll functionality */
    .scrollable-playlist::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Edge */
    }

.scrollable-playlist {
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none; /* Firefox */
}

.card-hover:hover {
    background-color: #22293d;
}


.sidebar-bg {
    background-color: #172033;
}


.table-blue-striped {
    background-color: #141824;
}

    .table-blue-striped tbody tr:nth-of-type(odd) {
        background-color: #1e2435;
    }

    .table-blue-striped tbody tr:hover {
        background-color: #2c3758;
        color: #fff;
    }

    .table-blue-striped thead {
        background-color: #141824;
    }

    .table-blue-striped td, th {
        padding: .4em 1em .4em 1em;
    }



.sidebar {
    position: fixed;
    top: 56px; /* below navbar */
    left: 0;
    bottom: 0;
    width: 330px;
    overflow-y: auto;
}



@media (min-width: 768px) {
    .content {
        margin-left: 240px; /* sidebar width */
    }
}


.video-player {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 0.5rem;
}

.text-white-hover:hover {
    color: #fff;
}

.card-bg-blue-metal {
    background: #3d455c;
    border: 0.05rem solid #2e354a;
}


.input-blue {
    border: 0.05rem solid #3d455c;
    background: #141824;
    color: #90a1b9;
}

    .input-blue:focus {
        border: 0.12rem solid #575e75;
        background: #141824;
        color: #b1bbca;
        box-shadow: none;
    }

    .input-blue::placeholder {
        color: #4d5775;
        font-size: 0.90rem;
        padding: 0.25rem;
    }


.btn-sky-blue {
    background: #63a6f7;
}

    .btn-sky-blue:hover {
        background: #51a7ff;
        opacity: .85;
    }