*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #c3dcad;
    
}

h1{
    font-size: 40px;
    letter-spacing: -2px;
    color: #292929;
    text-align: left;
    font-weight: lighter;
    
}

h3{
    font-size: 16px;
    letter-spacing: -0.8px;
    font-weight: lighter;
}


p{
    font-size: 12px;
    letter-spacing: -0.5px;
}

i{
    font-size: 12px;
    letter-spacing: -0.5px;
}

/*links*/

a:link, a:visited{
    color: #292929;
    text-decoration: none;
}

a:hover{
color: #292929;
text-decoration: underline;
font-weight: lighter;
transition-duration: 0.2s;
}

/*table*/

.table td,
.search-input {
    font-size: 13px;
    color: #292929;
    letter-spacing: -0.5px;  
}

.search-input {
    border: none;
    outline: none;
    color: #292929;
    width: 100%;
    height: 30px;
    padding: 0px 10px;
    border-bottom: 1px solid #292929;
    background: none;
    margin: 0px;
    
}

table{
    border-spacing: 0;
    
}


tr td{
    height: 50px;
    border-bottom: 1px solid #292929;
    padding: 0px 10px;
  }

input[type=text],input[type=text]::placeholder{
    color: #616161;
    cursor:text;
}

/*containers*/

.container{
      display: grid;
      height: 100vh;
      width: 100%;
      grid-template-columns: 100%;
      grid-template-rows: 15% 85%;
      grid-template-areas:
      "header"
      "sidebar";
  }
  
  header{
      grid-area: header;
      position: sticky;
      top: 0;
      padding: 10px;
      align-content: center;
      justify-content: center;
      border-bottom: 1px solid #292929;
  }
  
  
  #sidebar{
      grid-area: sidebar;
      position: sticky;
      overflow: scroll;
      width: 100%;
 
  }

  
/*mobile*/
  @media (max-width: 700px){

    .container{
        grid-template-columns: 100%;
        grid-template-rows: 15% auto;
        grid-template-areas:
        "header"
        "sidebar"
        }
      
       .header{
        background-color: #dbf6e6;
       }

       .search-input {
        font-size: 10px;
        letter-spacing: -0.5px;  
        }

        .table td{
            font-size: 10px;
        }

    #sidebar{
      width: 100%;
    }

}