body{
    font-family: "Inter", sans-serif;
    /* background-color: #7600e8; */
    background-color: #6600c8;
    color: #21013f;
    transition: all .1s ease;
}

h1{
    color: white;
}

h1 span{
    font-size: 11px;
    font-weight: normal;
    vertical-align: top;
}

img.title-logo{
    width: 55px;
    height: 55px;
}

input[type="text"],
select{
    border-radius: 100px !important;
    padding: 10px 20px !important;
    background-color: #7500e6 !important;
    color: white !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    font-weight: 300;
}

input[type="text"]::placeholder{
    color: rgba(255,255,255,0.6);
}
button.btn{
    padding: 10px 20px !important;
    background-color: #7500e6  !important;
    color: white;
    border: none;
    outline: none;
}

button.btn:hover{
    color: white;
    background-color: #8e19ff !important;
}

a.result-container-link{
    text-decoration: none;
    color: unset;
}

a.result-container-link div.result-container{
    padding: 10px;
    height: 100%;
    border-radius: 5px;
    background-color: #7500e6 ;
    transition: background-color .1s ease;
}

a.result-container-link:hover div.result-container{
    background-color: #8e19ff;
    transition: background-color .1s ease;
}

div.result-container h2{
    font-weight: 600;
    font-size: 15px;
    color: white;
}

div.result-container img.poster{
    width: 70px;
    border-radius: 3px;
}

div.result-container img.provider-logo{
    width: 30px;
    border-radius: 5px;
    margin-right: 5px;
}

div.modal div.modal-content{
    background-color: #2d0157;
    color: white;
}

div.modal button{
    background-color: #d2a1ff !important;
}

div.footer-credits{
    background-color: #6600c8;
}

div.footer-credits p{
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 8px;
    font-weight: 700;
    color: white;
}

div.footer-credits a{
    color: inherit;
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    body{
        background-color: #21013f;
        color: #ffffff !important;
        transition: all .1s ease;
    }
    h1{
        color: #ffffff;
    }
    input[type="text"],
    select{
        background-color: #3f2359 !important;
    }
    button.btn{
        background-color: rgb(50, 23, 74) !important;
    }
    button.btn:hover{
        background-color: #3f2359 !important;
    }
    a.result-container-link div.result-container{
        background: rgb(50, 23, 74);
    }
    
    a.result-container-link:hover div.result-container{
        background: #3f2359 !important
    }

    div.footer-credits{
        background-color: #21013f;
    }
    
}