@import url("https://fonts.googleapis.com/css2?family=Calistoga&family=Tiro+Bangla&family=ZCOOL+QingKe+HuangYou&family=Zain&display=swap");


*{
    transition: 0.2s linear;
  }
  body{
      /*background-image: url('https://plus.unsplash.com/premium_photo-1668373587657-0211ba2b8805?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8dG9vbHN8ZW58MHx8MHx8fDA%3D');*/
      background-color: #0081c1;
      background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; 
  }
  
  #myInput {
      background-position: 10px 12px; /* Position the search icon */
      background-repeat: no-repeat; /* Do not repeat the icon image */
      width: 50%; /* Full-width */
      font-size: 16px; /* Increase font-size */
      padding: 12px 20px 12px 40px; /* Add some padding */
      border: 5px solid #ddd; /* Add a grey border */
      margin-bottom: 12px; /* Add some space below the input */
  
      margin-left: 130px;
    }
    
    #myTable {
      background: #60b6fa;
      opacity: 0.8;
      border-collapse: collapse; /* Collapse borders */
      width: 100%; /* Full-width */
      border: 1px solid #ddd; /* Add a grey border */
      font-size: 18px; /* Increase font-size */
    }
  
    #myTable:hover{
      opacity: 5;
      border-collapse: collapse; /* Collapse borders */
      width: 100%; /* Full-width */
      border: 1px solid #ddd; /* Add a grey border */
      font-size: 18px;
    }
    
    #myTable th, #myTable td {
      text-align: center; /* Left-align text */
      padding: 12px;
      border: 5px solid #dddddd; /* Add padding */
    }
    
    #myTable tr {
      /* Add a bottom border to all table rows */
      border-bottom: 1px solid #ddd;
    }
    
    #myTable tr.header{
      background-color: #007BFF;
    }
     #myTable tr:hover {
      /* Add a grey background color to the table header and on hover */
      background-color: #17A2B8;
    }

  
  td,tr a{
      text-decoration: none;
      color: black;
      font-weight: bold;
  }
  
  
  
  .nav{
    text-decoration: none;
    color: #31DF9C;
    font-size: 25px;
    font-family: "Calistoga", system-ui;
  }
  
  .nav:hover{
    color: #ecd524;
    letter-spacing: 5px;
  }
  
  .container .heading{
    color: whitesmoke;
    font-size: 50px;
    font-family: "Calistoga", system-ui;
    text-align: center;
    padding-bottom: 15px;
    animation: fadeIn;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  
  @media (max-width:768px) {
    .container{
        padding: 20px;
    }
  }
  
  footer{
    background-color: #253342;
    padding: 25px 5px;
    text-align: center;
    color: aliceblue;
    font-size: 20px;
  }
  
  html{
    scroll-behavior: smooth;
  }