@import './icons.css';
@import './user.css';
@import './header.css';
@import './chat.css';
@import './actions-list.css';
@import './message-list.css';
@import './layout.css';
@import './user-list.css';
@import './user-list-header.css';
@import './user-list-search.css';
@import './user-list-contact.css';
@import './scroll-bar.css';


:root {
  --headerSize: 3rem;
  --actionsSize: 5rem;
  font-size: 16px;

  --black: #000000;
  --grey: #666667;
  --grey-2: #f2f2f2;
  --grey-3: #f6f6f6;
  --grey-4: #ededed;
  --white: #ffffff;
  --green-1: #e1f7cb;
  --green-2: #56bca6;
  --red: #ff4a4a;
  --green-3: #429488;
  --blue: #5cb3f0;
  --body-16regular: 400 1rem/1.25rem Inter;
  --body-16bold: 700 1rem/1.25rem Inter;
  --body-14regular: 400 0.875rem/1.125rem Inter;
  --body-14regular_u: 500 0.875rem/1.25rem Inter;
  --caption-12bold: 700 0.75rem/1rem Inter;
  --caption-12regular: 400 0.75rem/1rem Inter;
  --caption-12regular_u: 400 0.75rem/1.25rem Inter;

}


body {
  /* font-size: 2rem; */
  margin: 0;
  font-family: 'Inter', sans-serif;
  /* user-select: none; */
}

@media screen and (max-width: 1000px) {

  .layout{
  --firstColumn: 27rem;
  --footer: 5rem;
  /* border: 10px solid red; */
  display: grid;
  /* grid-template-areas: "user" "actions"; */
  grid-template-columns: 1fr 1fr ;
  grid-template-rows: 1fr var(--footer) ;
  block-size: 100vh;
  box-sizing: border-box;

}


}