/* Mobile-first responsive */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');

* 
{
  box-sizing: border-box;
}

body 
{
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  background: linear-gradient(-45deg, #1F75FE,#6A5ACD, #3457D5, #23a6d5,#4D4DFF, #23d5ab,#191970);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}

@keyframes gradient 
{
  0% 
  {
		background-position: 0% 50%;
	}
  50% 
  {
		background-position: 100% 50%;
	}
  100% 
  {
		background-position: 0% 50%;
	}
}

.table{
    background-color:#e9e9e9;
    background-color: rgba(255,255,255,0.1);
    box-shadow: 5px 10px 18px rgba(0,0,0,0.5);
    border-radius: 20px;
    font-size: 17px;
}

.btncont{
    text-decoration: none; 
    padding: 15px 55px;
      margin-left: 40%;
    }

.btn-grad 
{
  background-image: linear-gradient(to right, #5e13a3 0%, #26D0CE  51%, #1A2980  100%)
}
.btn-grad 
{

  font-size: 18px;
  color: white;
  padding: 15px 55px;
  margin-left: 40%;
  text-transform: uppercase;
  transition: 0.7s;
  background-size: 200% auto;            
  border-style: none;
  display: block;
  border-radius: 40px;
  cursor: pointer;
  text-decoration: none;
}

.btn-grad:hover 
{

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

.danger{
    color: rgb(224, 1, 1);
}

@media only screen and (max-width:500px)
{
    .btn-grad{
        margin-left: auto;
    }
}