Trying to implement a star rating in a specific HTML file

The file I am working on is called book_detail.html

{% extends "base.html" %}

{% load static %}

{% block title %}
Block Detail Page
{% endblock title %}

{% block sidenav %}
{% for item in item_list %}
<li>
    <a href="{{ item.link }}"> {{ item.item }} </a>
</li>
{% endfor  %}
{% endblock sidenav  %}

{% block content %}

<h1 align="center"> Book Detail </h1>
<table align="center" border="2" width="400">
    <tr>
        <td>
            {{ book.name }}
        </td>
    </tr>
    <tr>
        <td>
            <img src="{% static book.pic_path %}" width="100">
        </td>
    </tr>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <tr>
        <td>
            {{ book.username }}
            <div id="full-stars-example">
                <div class="rating-group">
                    <input class="rating__input rating__input--none" name="rating" id="rating-none" value="0"
                           type="radio">
                    <label aria-label="No rating" class="rating__label" for="rating-none"><i
                            class="rating__icon rating__icon--none fa fa-ban"></i></label>
                    <label aria-label="1 star" class="rating__label" for="rating-1"><i
                            class="rating__icon rating__icon--star fa fa-star"></i></label>
                    <input class="rating__input" name="rating" id="rating-1" value="1" type="radio">
                    <label aria-label="2 stars" class="rating__label" for="rating-2"><i
                            class="rating__icon rating__icon--star fa fa-star"></i></label>
                    <input class="rating__input" name="rating" id="rating-2" value="2" type="radio">
                    <label aria-label="3 stars" class="rating__label" for="rating-3"><i
                            class="rating__icon rating__icon--star fa fa-star"></i></label>
                    <input class="rating__input" name="rating" id="rating-3" value="3" type="radio" checked>
                    <label aria-label="4 stars" class="rating__label" for="rating-4"><i
                            class="rating__icon rating__icon--star fa fa-star"></i></label>
                    <input class="rating__input" name="rating" id="rating-4" value="4" type="radio">
                    <label aria-label="5 stars" class="rating__label" for="rating-5"><i
                            class="rating__icon rating__icon--star fa fa-star"></i></label>
                    <input class="rating__input" name="rating" id="rating-5" value="5" type="radio">
                </div>
            </div>
        </td>
    </tr>
</table>
{% endblock content %}

This is the CSS that needs to be connected with the star rating in my HTML, found in main.css

@charset "utf-8";

#header {
    border-style: none;
    width: 800px;
    height: auto;
}

#wrapper {
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
    width: 800px;
}

#leftsidebar {
    width: 180px;
    height: 350px;
    float: left;
}

#nav li {
    padding-top: 10px;
    padding-bottom: 10px;
    list-style-type: none;
    border-bottom: thin solid #5F5F5F;
    color: #4C4C4C
    left: 8px;
    list-style-position: inside;
    margin-left: -10px;
}


#main{
    width: 560px;
    float: left;
    margin-left: 20px;
    margin-right: 10px;
    padding-right:10px;
}

#footer{
    text-align: center;
    margin-top: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: thin solid #BBBBBB;
    clear: both;
    color: #969696;
}
#full-stars-example {
 /* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
  .rating-group {
    display: inline-flex;
  }

  /* make hover effect work properly in IE */
  .rating__icon {
    pointer-events: none;
  }

  /* hide radio inputs */
  .rating__input {
   position: absolute !important;
   left: -9999px !important;
  }

  /* set icon padding and size */
  .rating__label {
    cursor: pointer;
    padding: 0 0.1em;
    font-size: 2rem;
  }

  /* set default star color */
  .rating__icon--star {
    color: orange;
  }

  /* set color of none icon when unchecked */
  .rating__icon--none {
    color: #eee;
  }

  /* if none icon is checked, make it red */
  .rating__input--none:checked + .rating__label .rating__icon--none {
    color: red;
  }

  /* if any input is checked, make its following siblings grey */
  .rating__input:checked ~ .rating__label .rating__icon--star {
    color: #ddd;
  }

  /* make all stars orange on rating group hover */
  .rating-group:hover .rating__label .rating__icon--star {
    color: orange;
  }

  /* make hovered input's following siblings grey on hover */
  .rating__input:hover ~ .rating__label .rating__icon--star {
    color: #ddd;
  }

  /* make none icon grey on rating group hover */
  .rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
     color: #eee;
  }

  /* make none icon red on hover */
  .rating__input--none:hover + .rating__label .rating__icon--none {
    color: red;
  }
}

Encountering difficulty connecting the star rating section in the HTML with the corresponding CSS file named main.css.