/* use tailwind naming for some of the most useful classes

Use purely for laying out components with things I use almost always
don't style specific components in here
*/

.border {
  border: 1px solid #000;
  border-radius: var(--rounded);
  @media (prefers-color-scheme: dark) {
    border: 1px solid #fff;
  }
}

.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}

.justify-between {
  justify-content: space-between;
}

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

.gap-md {
  gap: 1rem;
}

.squarify {
  border-radius: 0.25rem !important;
}

.absolute {
  position: absolute;
}

.-z-10 {
  z-index: -10;
}

.border-none {
  border: none !important;
}

.float-left {
  float: left;
  margin: 0 1rem 1rem 0;
  max-width: 200px;
}