/* avoiding the all elelement default margin  */
 * {
     box-sizing: border-box;
     margin: 0;
 }

 body {
     background-color: rgba(84, 84, 238, 0.9);
 }

 #all-in-one {
     margin-bottom: 60px;
 }

 /* header section */
 header {
     text-align: center;
     margin: 0 0 30px 0;
     padding-top: 60px;
 }

 header>img {
     width: 200px;
     height: 100px;
     border-radius: 12px;
     border: 1px solid red;
     box-shadow: 1px 1px 4px 8px rgb(129, 238, 178);
     transition: all 0.3s linear;
 }

 header>img:hover {
     transform: scale(1.8);
 }

 .heading {
     margin-top: 48px;
     color: white;
     font-size: 25px;
 }

 /* app section */
 .app-contaiiner {
     display: flex;
     flex-direction: column;
     align-items: center;
     background-color: rgb(14, 53, 228);
     width: 450px;
     /* making center the element based on the parent element  */
     margin: auto auto;
     border-radius: 20px;
     box-shadow: 1px 1px 10px 10px rgb(218, 85, 211);
 }

 .app-contaiiner>label {
     font-size: 18px;
     margin: 30px 0 15px 0;
     color: white;
 }

 .app-contaiiner>form {
     margin-bottom: 14px;
 }

 #search-input {
     font-size: 13px;
     height: 30px;
     width: 180px;
     border-radius: 6px;
     border: 1px solid gray;
     padding: 2px 6px;
 }

 #search-input:focus {
     background-color: burlywood;
     color: blue;
 }

 #search-button {
     background-color: rgb(18, 235, 83);
     width: 80px;
     height: 30px;
     border-radius: 12px;
     font-size: 13px;
     border: 1px solid white;

 }

 #search-button:hover {
     background-color: rgb(25, 110, 223);
 }

 /* making reset but hold on i will return  */
 #search-reset {
     background-color: rgb(236, 112, 9);
     width: 80px;
     height: 30px;
     border-radius: 12px;
     font-size: 13px;
     border: 1px solid white;

 }

 #search-reset:hover {
     background-color: rgb(231, 12, 12);
 }

 .hidenInfo {
     margin-bottom: 12px;
     background-color: rgb(157, 202, 73);
     width: 300px;
     text-align: center;
     border-radius: 12px;
 }

 th,
 td {
     border: 2px solid red;
     text-align: center;
     height: 30px;
     background-color: yellow;
 }

 table {
     width: 90%;
     margin-bottom: 30px;
 }


 /* making responsive  */
 @media only screen and (max-width: 460px) {

     /* header section */
     header {
         text-align: center;
         padding-top: 30px;
     }

     header>img {
         width: 100px;
         height: 50px;
         box-shadow: 1px 1px 4px 4px rgb(129, 238, 178);
     }

     .heading {
         margin-top: 25px;
         color: white;
         font-size: 12px;
     }

     /* app section */
     .app-contaiiner {
         width: 250px;
     }

     .app-contaiiner>label {
         font-size: 10px;
         margin: 20px 0 10px 0;

     }

     .app-contaiiner>form {
         margin-bottom: 10px;
     }

     #search-input {
         font-size: 8px;
         height: 20px;
         width: 90px;
         padding: 1px 3px;
     }

     #search-button, #search-reset {
         width: 50px;
         height: 20px;
         border-radius: 6px;
         font-size: 10px;

     }

     .hidenInfo {
        font-size: 10px;
         width: 150px;
        
     }

     th,
     td {
        font-size: 10px;
         height: 20px;
      
     }

     table {
         width: 70%;
     }
 }