body{

    background: #3C3B3F;  
    background: -webkit-linear-gradient(to right, #605C3C, #3C3B3F); 
    background: linear-gradient(to right, #605C3C, #3C3B3F); 
    
    display: flex;
    justify-content: center;
}

.head {
   
    background-color: #52ACFF;
    background-image: linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
    padding: 30px;
    border: 3px solid rgb(14, 6, 6);
    border-radius: 40px;
    width: 60%;
}

#heading {
    font-family:  'Bebas Neue', cursive;
    text-align: center;
    color: rgb(255, 238, 0);
     
        animation-name: colorChange;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    @keyframes colorChange {
        0% {
            color: #f70909;
        }
    
        25% {
            color: rgb(236, 236, 24);
        }
    
        50% {
            color: rgb(243, 220, 220);
        }
    
        100% {
            color: #14ad19;
        }
    }


.cover {
    display: flex;
    justify-content: center;
}

span {
    color: red;
}

.box {
    width: 300px;
    height: 25px;
    border-radius: 5px;
}

.email {
    width: 300px;
    height: 25px;
    border-radius: 5px;
}

textarea{
    border-radius: 30px;
    padding: 20px;
}

.table1{
   width: 100%;
   text-align: center;
   border-collapse: collapse;
   margin: 25px 0;
}

.table1 tbody tr:nth-of-type(odd) {
    background-color: #eee086;
    opacity: 0.6;
}

.table2 tbody tr:nth-of-type(odd) {
    background-color: #eee086;
    opacity: 0.6;
}


.table2{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
   margin: 25px 0;
}

.rating>span:hover:before {
    content: "\2605";
    position: absolute;
  }

  .rating {
    unicode-bidi: bidi-override;
    direction: rtl;
  }

  .rating>span:hover:before,
  .rating>span:hover~span:before {
    content: "\2605";
    position: absolute;
  }

  .rating {
    unicode-bidi: bidi-override;
    direction: rtl;
  }

  .rating>span {
    display: inline-block;
    position: relative;
    width: 1.1em;
  }

  .rating>span:hover:before,
  .rating>span:hover~span:before {
    content: "\2605";
    position: absolute;
  }

 
  .btn {background-image: linear-gradient(to right, #e9d362 0%, #333333  51%, #e9d362  100%)}
  .btn {
     margin: 10px;
     padding: 5px 15px;
     text-align: center;
     text-transform: uppercase;
     transition: 0.5s;
     background-size: 200% auto;
     color: white;            
     box-shadow: 0 0 20px #eee;
     border-radius: 10px;
     display: block;
     font-size: 10px;
     font-weight: bold;
   }

   .btn:hover {
     background-position: right center; /* change the direction of the change here */
     color: #fff;
     text-decoration: none;
   }