*{
    margin: 0;
    padding: 0;
}

body{
    background-color: rgb(244, 244, 122);
    background-size: 100%;   
    
}
.content{
  max-width:700px;
  margin: auto;

}
#border{
    width: 98%;
    margin: auto;
}

#head{
  text-align: center;
    background-color: white;
    color:blue;
    font-family: 'rasa',serif;
    font-size: 1.3em;   
    font-weight: bold;
}
    
#subheading{
    background-color: white;
    color: blue;
    font-size: 1.3em;
    font-weight: bold;
    border-radius: 0 0 15px 15px;
}
#content1{
    width: 94%;
    margin: auto;
}
label{
    font-family: 'rasa',serif;
    font-size: 18px;
    font-weight: bold;
    color: black;
}

.feedform{
    background-color: white;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 98%;
    border:5px dark;
    border-radius: 15px;
    margin: auto;
    margin-top: 10px;
    padding-bottom: 20px;
    scroll-behavior: smooth;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.feedform .box{
    font-family: 'rasa',serif;
    width: 100%;
    height: 2.8em;
    text-align: center;
    background-color: white;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    bottom: 10px;
    border: 5px dark;
    border-radius: 5px;
}
.feedform .msg{
    font-family: 'rasa',serif;
    width: 98%;
    height: 200px;
    text-align: center;
    background-color: white;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    bottom: 10px;
    border: 5px dark;
    border-radius: 5px;
}
.star-rating {
    margin: 15px 0px 0px;
   font-size: 0;
   white-space: nowrap;
   display: inline-block;
   width: 175px;
   height: 35px;
   overflow: hidden;
   position: relative;
   background: url('star.svg');
   background-size: contain;
 }
 .star-rating i {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 20%;
    z-index: 1;
    background: url('yellowstar.svg');
    background-size: contain;
  }
  .star-rating input {
    -moz-appearance: none;
    -webkit-appearance: none;
    opacity: 0;
    display: inline-block;
    width: 20%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 2;
    position: relative;
  }
  .star-rating input:hover + i,
.star-rating input:checked + i {
  opacity: 1;
}
.star-rating i ~ i {
  width: 40%;
}
.star-rating i ~ i ~ i {
  width: 60%;
}
.star-rating i ~ i ~ i ~ i {
  width: 80%;
}
.star-rating i ~ i ~ i ~ i ~ i {
  width: 100%;
}
.choice {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 20px;
    display: block;
  }
  span.scale-rating{
  margin: 5px 0px 15px;
      display: inline-block;
     
      width: 100%;
     
  }
  span.scale-rating>label {
    position:relative;
      -webkit-appearance: none;
    outline:0 !important;
      border: 1px solid grey;
      border-radius: 30px;
      height:33px;
      margin: 0 5px 0 0;
    width: calc(10% - 7px);
      float: left;
    cursor:pointer;
  }
  span.scale-rating label {
    position:relative;
      -webkit-appearance: none;
    outline:0 !important;
      height:33px;
        
      margin: 0 5px 0 0;
    width: calc(10% -7px);
      float: left;
    cursor:pointer;
  }
  span.scale-rating input[type=radio] {
    position:absolute;
      -webkit-appearance: none;
    opacity:0;
    outline:0 !important;
      /*border-right: 1px solid grey;*/
      height:33px;
   
      margin: 0 5px 0 0;
    
    width: 100%;
      float: left;
    cursor:pointer;
    z-index:3;
  }
  span.scale-rating label:hover{
  background:#fddf8d;
  }
  span.scale-rating input[type=radio]:last-child{
  border-right:0;
  }
  span.scale-rating label input[type=radio]:checked ~ label{
      -webkit-appearance: none;
   
      margin: 0;
    background:blue;
    border-radius: 30px;
  }
  span.scale-rating label:before
  {
    content:attr(value);
    color:salmon;
      top: 7px;
      width: 100%;
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
      vertical-align: middle;
    z-index:2;
  }


button{
    margin: auto;
    margin-top: 10px;
    width: 200px;
    font-family: serif;
    font-size: 40px;
    color: white;
    background-color:blue;
    border-radius: 10px;
}
button:hover{
  background-color: slategray;
  cursor: pointer;
  color: white;
}