/* Utility class library heavily inspired by tailwind. I could have just used tailwind but
 * I wanted the theme to be usable without any additional dependencies / configuration. */

/* Base */
:root {
  --font: "Montserrat";
  --black: #000;
  --white: #fff;
  --yellow: #fedb00;
  --gray: #353535;
  --body-color: var(--white);
  --font-mono: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --gap-xs: 5px;
  --gap-sm: 8px;
  --gap-md: 13px;
  --gap-lg: 21px;
  --gap-xl: 34px;
  --text-sm: 0.8125rem;
  --text-md: 1rem;
  --text-lg: 1.3125rem;
  --corner-sm: 0.25em;
  --corner-lg: 0.5em;
  --nav-width: 72px;
  --nav-logo-width: 50px;
  --post-content-width: calc(100vw - var(--nav-width));
  --post-info-width: 100%;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  color: var(--body-color);
  overscroll-behavior-y: none;
  overflow: hidden;
}

a {
  color: var(--yellow);
  text-decoration: none;
}

a:hover {
  filter: brightness(125%);
}

/* Display */
.block, .visible { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Size */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-screen { width: 100vw; }
.h-screen { height: 100vh; }

/* Flexbox */
.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

/* Overflow */
.clipped { overflow: hidden; }
.scrollable { overflow: auto; }

/* Background color */
.bg-black { background-color: var(--black); }
.bg-yellow { background-color: var(--yellow); }
.bg-gray { background-color: var(--gray); }

/* Rounded Corners */
.rounded-sm { border-radius: var(--corner-sm); }
.rounded-lg { border-radius: var(--corner-lg); }

/* Foreground color */
.text-black { color: var(--black); }
.text-white { color: var(--white); }
.text-yellow { color: var(--yellow); }

/* Text size */
.text-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text weight */
.light { font-weight: normal; }
.bold { font-weight: bold; }

/* Text appearance */
.upper { text-transform: uppercase; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Inset/Padding */
.inset-y-xs { padding-top: var(--gap-xs); padding-bottom: var(--gap-xs); }
.inset-x-sm { padding-left: var(--gap-sm); padding-right: var(--gap-sm); }
.inset-x-md { padding-left: var(--gap-md); padding-right: var(--gap-md); }
.inset-y-md { padding-top: var(--gap-md); padding-bottom: var(--gap-md); }
.inset-x-lg { padding-left: var(--gap-lg); padding-right: var(--gap-lg); }
.inset-y-lg { padding-top: var(--gap-lg); padding-bottom: var(--gap-lg); }
.inset-x-xl { padding-left: var(--gap-xl); padding-right: var(--gap-xl); }
.inset-y-xl { padding-top: var(--gap-xl); padding-bottom: var(--gap-xl); }

/* Margin */
.m-none { margin: 0; }
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }

.mt-sm { margin-top: var(--gap-sm); }
.mb-sm { margin-bottom: var(--gap-sm); }
.ml-sm { margin-left: var(--gap-sm); }
.mr-sm { margin-right: var(--gap-sm); }
.mt-md { margin-top: var(--gap-md); }
.mb-md { margin-bottom: var(--gap-md); }
.mr-lg { margin-right: var(--gap-lg); }
.mb-xl { margin-bottom: var(--gap-xl); }

/* Border */
.border-b, .border-t, .border-r, .border-l { border-width: 0; border-style: solid; border-color: var(--gray); }
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }
.border-r { border-right-width: 1px; }
.border-l { border-left-width: 1px; }

/* Article Typography */
.article { font-size: 1.14em; }
.article img { max-width: 100%; }
.article :not(pre) > code { background-color: dimgrey; border-radius: 3px; padding: 2px 5px; font-family: var(--font-mono); font-size: 0.9em; }
.article * { line-height: 1.6em; }

/* Article Table */
.article table {
  border-collapse: collapse;
  margin:0;
  padding:0;
  width: 100%;
}
.article table th, .article table td {
  border: 1px solid rgba(255,255,255,0.25);
  padding: .5em;
  text-align: left;
  font-size: 0.8em
}

/* Code snippet highlighting */
.chroma { overflow-x: auto; padding: var(--gap-md); border-radius: var(--corner-lg); }

/* Responsive variations of above utilities */
@media screen and (max-width: 1024px) {
  .sm\:mt-sm { margin-top: var(--gap-sm); }
  .sm\:scrollable { overflow: auto; }
  .sm\:mt-md { margin-top: var(--gap-md); }
}

@media screen and (min-width: 1024px) {
  .md\:flex-row { flex-direction: row; }
  .md\:visible { display: block; }
  .md\:hidden { display: none; }
  .md\:scrollable { overflow: auto; }
  .md\:inset-x-xl { padding-left: var(--gap-xl); padding-right: var(--gap-xl); }
  .md\:inset-y-xl { padding-top: var(--gap-xl); padding-bottom: var(--gap-xl); }
}

@media screen and (min-width: 1440px) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:scrollable { overflow: auto; }
  .lg\:clipped { overflow: hidden; }
  .lg\:border-t-0 { border-top-width: 0; }
  .lg\:border-l { border-left-width: 1px; border-style: solid; border-color: var(--gray); }
}