:root {
  box-sizing: border-box;

  --fontsize: 1rem;

  /* color palette: */ 
  

  --primary: hsl(197, 100%, 28%);
  --primary-80: hsla(197, 100%, 28%, 0.8);
  --on-primary: white;
  --primary-container: lightskyblue;
  --on-primary-container: black;
  --secondary: #7C809B;
  --on-secondary: white;
  --secondary-container: #d2e5f4;
  --on-secondary-container: black;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --background: white;
  --on-background: black;
  --surface: #f2f2f1;
  --on-surface: black;
  --surface-variant: #e6e7ec;
  --on-surface-variant: black;
  --outline:#71787e;

  --my-message: var(--primary-container);
  --on-my-message: var(--on-primary-container);
  --other-message: white;
  --on-other-message: black;

  
}

@media (prefers-color-scheme: dark) {
  :root {
    /* color palette: */ 

    --primary: hsl(203, 100%, 75%);
    --primary-80: hsla(203, 100%, 75%, 0.8);
    --on-primary: #00344b;
    --primary-container: #004c6b;
    --on-primary-container: #c6e7ff;
    --secondary: #b6c9d8;
    --on-secondary: #21333e;
    --secondary-container: #374955;
    --on-secondary-container: #d2e5f4;
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;
    --background: #4e4f4f;
    --on-background: white;
    --surface: #4e4f4f;
    --on-surface: white;
    --surface-variant: #363636;
    --on-surface-variant: white;
    --outline:#8b9198;
  
    --my-message: var(--primary-container);
    --on-my-message: var(--on-primary-container);
    --other-message: rgb(221, 221, 221);
    --on-other-message: black;
  }
}

/*@media all and (min-width:40px) and (max-width: 600px) {*/
@media screen and (max-width: 1000px) {
  :root {
    
  }
}

*,
*::before,
*::after {
  box-sizing: inherit;
  font-size: var(--fontsize);
}

body {
  font-family: Arial, sans-serif;
  background-color: var(--background);
  color: var(--on-background);
	margin: 0px;
	padding: 0px;
  overflow: hidden;
}