@import 'fonts.css';
@import 'thread.css';
@import 'tile.css';
@import 'inputs.css';
@import 'table.css';
@import 'modal.css';

:root {
  --color-hue: 178;
  --color-dark-hue: 240;
  --color-primary: hsl(var(--color-hue),100%,42%);
  --color-primary-tint: hsl(var(--color-hue),100%,35%);
  --color-primary-tone: hsl(var(--color-hue),80%,42%);
  --color-primary-shade: hsl(var(--color-hue),100%,22%);
  --color-light: hsl(var(--color-hue),50%,95%);
  --color-light-tint: hsl(var(--color-hue),10%,99%);
  --color-light-shade: hsl(var(--color-hue),10%,90%);
  --color-dark: hsl(var(--color-hue),10%,50%);
  --color-dark-tint: hsl(var(--color-hue),10%,50%);

  --color-error: hsl(0,80%,65%);
  --color-success: hsl(100,80%,40%);

  --button-tile-size: 140px;
}

::selection {
  background-color: var(--color-dark-tint);
  color: var(--color-light);
}

html {
  background-color: #fafafa; /*var(--color-light-shade) !important;*/
  color: var(--color-dark);
}

body {
  font-family: 'Raleway', sans-serif;
  margin: 0;
}

.container.full {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  margin: 0;
}

.grid {
  align-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0;
  flex-wrap: wrap;
}
.inset { padding: 50px; }
.grid .tile { margin: 5px; }
.grid.column {
  flex-direction: column;
}

.no-margin {
  margin: 0 !important;
}

.logout {
  position: absolute;
  top: 10px;
  right: 10px;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: end;
}