@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
*{  
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: hsl(216, 12%, 8%);
    font-family: 'Roboto';
}

.main-container{
    position: absolute;
    top:50%;
    left:50%;
    margin-top:-200px; /* this is half the height of your div*/  
    margin-left:-200px; /*this is half of width of your div*/
    height: 400px;
    width: 400px;
    border: 5px;
    border-radius: 7%;
    background-color: hsl(213, 19%, 18%);
}

.first-box-star {
    position: absolute;
    border: 0px;
    padding: 15px;
    border-radius: 50%;
    margin: 30px 0 0 30px;
    cursor: pointer;
    background-color: hsl(213, 15%, 28%);
}

.page-notes {
    position: absolute;
    margin-top: 100px;
    margin-left: 30px;
    margin-right: 30px;
}

h1 {
    color: hsl(0, 0%, 100%);
    font-weight: 700;
}

h2 {
    font-size: 15px;
    margin-top: 25px;
    color: hsl(217, 12%, 63%);
    font-weight: 400;

}
/*
ul {
    list-style: none;
    overflow: hidden;
    margin-left: 40px;
    margin-right: 0px;
    padding: 0;
}

li {
    float: left;
    text-align: center;
    margin-left: 0px;
    margin-right: 20px;
    margin-top: 250px;
    border: 0px;
    border-radius: 50%;
    padding: 12px 18px;
    background-color: hsl(0, 0%, 100%);
    color: hsl(217, 12%, 63%);
}

li:hover {
    background-color: hsl(25, 97%, 53%);
    color: hsl(0, 0%, 100%);
    cursor: pointer;
}
*/
.rating {
    position: absolute;
    margin-left: 40px;
    border: none;
    margin-top: 250px;
}

input[type="radio"] {
    width: 45px;
    height: 44px;
    margin-right: 3.5px;
    border-radius: 22.5px;
    border: none;
    cursor: pointer;
    background-color: hsl(213, 15%, 28%);
    -webkit-appearance: none;
}
  
  input[type="radio"]:focus { /*no need, if you don't disable default appearance*/
    outline: none; 
}
  
  input[type="radio"]:checked { /*no need, if you don't disable default appearance*/
    background-color: hsl(217, 12%, 63%);
}
  
  input[type="radio"]:checked ~ span:first-of-type {
    color: white;
}
  
  label span:first-of-type {
    position: relative;
    left: -33.5px;
    top: -16.5px;
    font-size: 15px;
    color: hsl(217, 12%, 63%);
}
  
  label span {
    position: relative;
    top: -12px;
}

input[type='radio']:hover {
    background-color: hsl(25, 97%, 53%);
}

input[type='radio']:hover ~ span:first-of-type {
    color: white;
}

input[type=submit] {
    position: relative;
    background-color: hsl(25, 97%, 53%);
    border: none;
    color: hsl(0, 0%, 100%);
    padding: 16px 130px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    margin: 330px 30px 0 30px;
    border-radius: 25px;
}

input[type=submit]:hover {
    background-color: hsl(0, 0%, 100%);
    transform: translateY(-1px);
    color: hsl(25, 97%, 53%);
}