@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: 2000% 2000%;
	animation: gradient 10s ease infinite;
}

@keyframes gradient 
{
  0% 
  {
		background-position: 0% 50%;
	}
  50% 
  {
		background-position: 100% 50%;
	}
  100% 
  {
		background-position: 0% 50%;
	}
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.menu
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #0e59e2;
  background-color: rgba(255,255,255,0.5);
  border-radius: 10px;
}
#Welcome
  {
  font-size: 18px;
  cursor: pointer;
  } 
  .dropbtn
  {
  font-size: 18px;
  cursor: pointer;
  }

  li a, .dropbtn {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover, .dropdown:hover .dropbtn {
    color: white;
    border-radius: 10px;
  }
  
  li.dropdown {
    display: inline-block;
  
  
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #191970;
    margin-left: -25vw;
    width: 135px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 10px;
    z-index: 1;
  }
  
  .dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1; color: black;}
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  @media only screen and (max-width:900px)
  {
    #user-logo{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 90%;
    }
}

  @media only screen and (min-width:900px)
  {
    .card {
      margin: 20px 25%;
      background-color: rgba(255, 255, 255, 0.2);
      box-shadow: 5px 10px 10px rgba(0,0,0,0.5);
    }
    .card:hover{
      box-shadow: 5px 10px 18px rgba(0,0,0,0.5);
    }
    h2{
    font-size: 2.5em;
    }
    .dropdown-content {
      width: 15%;
      margin-left: 65.3vw;
  }
  .dropbtn
    {
    margin-left: 76.97vw;
    }
    /* text animation while hover */
    .anime{
      background: linear-gradient(to right, white 50%, black 50%);
    }
    .anime{
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-size: 200% 100%;
      background-position: 100%;
    }
    .anime{
      transition: background-position 500ms ease;
    }
    .anime:hover {
      background-position: 0 100%;
    }
    #user-logo{
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
  }