/* 2026 Jan Provaznik (jan@provaznik.pro) */

*, 
*::after, 
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: inherit;
  line-height: 1em;
}

html {
  font-size: 16px;
  text-size-adjust: none;
}

body {
}

code, .code {
}
small, .small {
  font-size: small;
}
.smaller {
  font-size: smaller;
}

button, .button {
  display: inline-block;
  padding: 0.50rem;

  outline: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;

  font-size: smaller;
  line-height: 16px;
}


/* Modifiers. */

.d-contents { display: contents; }
.d-block    { display: block; }
.d-hidden   { display: none; }
.d-flex     { display: flex; }
.d-auto     { display: auto; }

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

.flex-gap-h { gap: 0.5rem; }
.flex-gap-1 { gap: 1.0rem; }
.flex-gap-2 { gap: 2.0rem; }

.flex-align-beg { align-items: flex-start; }
.flex-align-end { align-items: flex-end; }
.flex-align-mid { align-items: center; }
.flex-justify-beg { justify-content: flex-start; }
.flex-justify-end { justify-content: flex-end; }
.flex-justify-mid { justify-content: center; }
.flex-justify-space { justify-content: space-between; }

.m-h   { margin:        0.5rem; }
.m-1   { margin:        1rem;   }
.m-2   { margin:        2rem;   }
.m-3   { margin:        3rem;   }
.m-y-h { margin-top:    0.5rem; margin-bottom:  0.5rem; }
.m-y-1 { margin-top:    1rem;   margin-bottom:  1rem;   }
.m-y-2 { margin-top:    2rem;   margin-bottom:  2rem;   }
.m-y-3 { margin-top:    3rem;   margin-bottom:  3rem;   }
.m-x-h { margin-left:   0.5rem; margin-right:   0.5rem; }
.m-x-1 { margin-left:   1.0rem; margin-right:   1rem;   }
.m-x-2 { margin-left:   2.0rem; margin-right:   2rem;   }
.m-x-3 { margin-left:   3.0rem; margin-right:   3rem;   }
.m-l-a { margin-left:   auto;   }
.m-l-h { margin-left:   0.5rem; }
.m-l-1 { margin-left:   1.0rem; }
.m-l-2 { margin-left:   2.0rem; }
.m-l-3 { margin-left:   3.0rem; }
.m-r-a { margin-right:  auto;   }
.m-r-h { margin-right:  0.5rem; }
.m-r-1 { margin-right:  1.0rem; }
.m-r-2 { margin-right:  2.0rem; }
.m-r-3 { margin-right:  3.0rem; }
.m-t-h { margin-top:    0.5rem; }
.m-t-1 { margin-top:    1.0rem; }
.m-t-2 { margin-top:    2.0rem; }
.m-t-3 { margin-top:    3.0rem; }
.m-b-h { margin-bottom: 0.5rem; }
.m-b-1 { margin-bottom: 1.0rem; }
.m-b-2 { margin-bottom: 2.0rem; }
.m-b-3 { margin-bottom: 3.0rem; }

.p-1   { padding: 1rem; }
.p-2   { padding: 2rem; }
.p-3   { padding: 3rem; }
.p-y-1 { padding-top: 1rem; padding-bottom: 1rem; }
.p-y-2 { padding-top: 2rem; padding-bottom: 2rem; }
.p-y-3 { padding-top: 3rem; padding-bottom: 3rem; }
.p-x-1 { padding-left: 1rem; padding-right: 1rem; }
.p-x-2 { padding-left: 2rem; padding-right: 2rem; }
.p-x-3 { padding-left: 3rem; padding-right: 3rem; }
.p-l-1 { padding-left: 1rem; }
.p-l-2 { padding-left: 2rem; }
.p-l-3 { padding-left: 3rem; }
.p-r-1 { padding-right: 1rem; }
.p-r-2 { padding-right: 2rem; }
.p-r-3 { padding-right: 3rem; }
.p-t-1 { padding-top: 1rem; }
.p-t-2 { padding-top: 2rem; }
.p-t-3 { padding-top: 3rem; }
.p-b-1 { padding-bottom: 1rem; }
.p-b-2 { padding-bottom: 2rem; }
.p-b-3 { padding-bottom: 3rem; }


.w-1r  { width: 1rem; }
.w-2r  { width: 2rem; }
.w-3r  { width: 3rem; }
.w-4r  { width: 4rem; }
.w-5r  { width: 5rem; }
.w-6r  { width: 6rem; }
.w-7r  { width: 7rem; }
.w-8r  { width: 8rem; }
.w-9r  { width: 9rem; }
.w-10r { width: 10rem; }
.w-11r { width: 11rem; }
.w-12r { width: 12rem; }
.w-13r { width: 13rem; }
.w-14r { width: 14rem; }
.w-15r { width: 15rem; }

.w-50p.w-50p   { width: 50%; }
.w-100p.w-100p { width: 100%; }

.w-360px.w-360px { width: 360px; }
.w-480px.w-480px { width: 480px; }
.w-640px.w-640px { width: 640px; }
.w-720px.w-720px { width: 720px; }

.c-okay { color: #228b22; }
.c-nope { color: #f00; }

/* selector duplication increases specificity, do not ask */
.text-ha-l.text-ha-l { text-align: left; }
.text-ha-r.text-ha-r { text-align: right; }
.text-ha-c.text-ha-c { text-align: center; }