@font-face {
    font-family: Horror;
    src: url("fonts/BloodyModes-gwwYp.ttf") format("opentype");
}
h1, h2, h3{
    text-align: center;
    font-family: Horror;
}

#search {
    text-align: center;
    width: 100%;
}
#searchInput {
    padding-left: 10px;
    font-size: 1.5rem;
    height: 2rem;
    margin: 1rem auto;
    width: 50%;
    border-radius: 15px;

}
#searchButton {
    
    margin: 1rem auto;
    background-color: rgb(190,0,0);
    color: whitesmoke;
    text-decoration: none;
    padding: 5px;
    border-radius: 20px;
    font-size: 1.25rem;
    transition: 0.7s;
    border: none 1px solid;
    /* border-radius: 2rem; */
}
#searchButton:hover {
    background-color: #333;
    color: whitesmoke;
    text-decoration: none;
}
.film{
    width:70%;
    box-sizing: border-box;
    margin: 0rem auto;
    text-align: center;
    color: rgb(190,0,0);
    padding: 10px;
    font-size: 2rem;
    border-bottom: 2px solid whitesmoke;
    border-top: 2px solid whitesmoke;
    border-radius: 5rem;
    margin-bottom: 2rem;
}
.film p {
    color: whitesmoke;
    font-weight: 100;
    padding: 0rem 2rem;
}
em {
    color: rgb(196, 144, 144);
}
#date {
    font-family: 'Courier New', monospace;
}
#pagination {
    text-align: center;
    display: inline-block;
}
#pagination ul {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#pagination li.active {
    margin: 1rem;
    background-color: rgb(190,0,0);
    color: whitesmoke;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    transition: 0.7s;
    border: none 1px solid;
    border-radius: 2rem;
}
#pagination li{
    display: inline;
}
#pagination li.active:hover{
    background-color: #333;
    color: whitesmoke;
    text-decoration: none;
}
#pagination a{
    background-color: rgb(190,0,0);
    color: whitesmoke;
    text-decoration: none;
    padding: 10px;
    border-radius: 20px;
    font-size: 14px;
    transition: 0.7s;
    border: none;
}
#pagination a:hover{
    background-color: #333;
    color: whitesmoke;
    text-decoration: none;
}
#movielink {
    text-align: center;
    color: rgb(190,0,0);
    font-family: Horror;
    border: none;
    font-size: 3rem;
    margin: 0;
}
#movielink:hover {
    background-color: #333;
}
#loading {
    width: 4rem;
    height: 4rem;
    border: 5px solid whitesmoke;
    border-top: 6px solid rgb(190,0,0);
    border-radius: 100%;
    margin: auto;
    visibility: hidden;
    animation: spin 2s infinite linear;
}
#loading.display {
    visibility: visible;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
#warning {
    width: 75%;
    margin: 1rem auto;
}
#warning p {
    font-size: 24px;
}

.ratings {
    margin: 0px;
    position: relative;
    display: inline-block;
    color: #b1b1b1;
    overflow: hidden;
  }
  
 .full-stars{
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    overflow: hidden;
    color: #fde16d;
}
  
  .empty-stars:before,
  .full-stars:before {
    content: "\2605\2605\2605\2605\2605";
    font-size: 24px;
  }
  
  .empty-stars:before {
    -webkit-text-stroke: 1px #848484;
  }
  
  .full-stars:before {
    -webkit-text-stroke: 1px orange;
  }