*{
    font-family: 'Noto Sans TC', sans-serif;
}
img{
    width:100%;
    height: 100%;
}
#navIcon{
    width: 5rem;
    height: 5rem;
}
.card{
    margin-bottom: 1em;
    border:none;
}
.card-title{
    color: black;
}
.tituloPelicula{
    opacity: 0;
    width: 100%;
    height: 100%;
    font-family: 'Josefin Sans', sans-serif;
}
.tituloPelicula h5{
    color: black;
}
.tituloPelicula:hover{
    opacity:1;
    transition: 1s;
}
#imgPelicula:hover{
    opacity:0.3;
    transition: 1s;
}
#movies img{
    height: 25em;
    border: 1px solid black;
    padding: 2px;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
.modal-content{
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
#divImagen img{
    height: 25em;
    border: 1px solid black;
}
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 70vh;
    overflow-y: auto;
}
.card-title {
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}

.card-title .card-img-top {
    z-index: 0;
}
    
.card-title .card-text {
    text-align: center;
    width: 100%;
    margin: 33% 0;
    position: absolute;
    z-index: 1;
}