/* Font */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Fira+Code&family=Alegreya&display=swap");

/*
Settings */
:root {
  --color-dark: #fff;
  --color-light: #000;
  --color-primary: #05d6ec;
  --size-step-0: 1rem;
  --size-step-1: 1.15rem;
  --size-step-2: 1.3rem;
  --size-step-3: 1.6rem;
  --size-step-4: 2rem;
  --spacing: 1.5rem;
  --display-font: "Press Start 2P", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --secondary-font: 'Fira Code', serif;
  --readable-font: 'Fira Code', serif;
  --code-background-color: var(--color-light);
  --code-color: var(--color-dark);
}

/* HTML Styles */
* {
  box-sizing: border-box;
}

body {
  background: var(--color-light);
  color: var(--color-dark);
  padding: var(--spacing) clamp(calc(var(--spacing) / 2), 5vw, calc(var(--spacing) * 3));
  font-family: var(--readable-font);
  font-size: var(--size-step-0);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABFklEQVRYR9WXURLDIAhE6/0PbSdOtUpcd1Gnpv1KGpTHBpCE1/cXq+vrMph7dGvXZTtpfW10DCA5jrH1H0Jhs5E0hnZdCR+vb5S8Nn8mQCeS9BdSalYJqMBjAGzq59xAESN7VFVUgV8AZB/dZBR7QTFDCqGquvUBVVoEtgIwpQRzmANSFHgWQKExHdIrPeuMvQNDarXe6nC/AutgV3JW+6bgqQLeV8FekRtgV+ToDKEKnACYKsfZjjkam7a0ZpYTytwmgainpC3HvwBocgKOxqRjehoR9DFKNFYtOwCGYCszobeCbl26N6yyQ6g8X/Wex/rBPsNEV6qAMaJPMynIHQCoSqS9JSMmwef51LflTgCRszU7DvAGiV6mHWfsaVUAAAAASUVORK5CYII=),
    auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

header,
main,
footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

header {
  padding-bottom: var(--spacing);
}

p {
  color: #e0e0e0;
  font-family: var(--readable-font);
  font-size: 100%;
  align-self: flex-start;
}

main {
  flex: 1;
  padding-bottom: calc(var(--spacing) * 2);
}

a {
  color: currentColor;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 0.15ex;
  text-decoration-thickness: 0.3ex;
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0,
    pointer;
}

a:hover {
  color: var(--color-primary);
}

img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
}

h1 {
  font-size: var(--size-step-4);
}

h2 {
  font-size: var(--size-step-3);
}

h3 {
  font-size: var(--size-step-2);
}

h4 {
  font-size: var(--size-step-1);
}

h5 {
  font-size: var(--size-step-0);
}

ul,
ol {
  -webkit-padding-start: var(--spacing);
  padding-inline-start: var(--spacing);
}

li {
  --flow-space: var(--spacing);
}

blockquote {
  -webkit-padding-start: var(--spacing);
  padding-inline-start: var(--spacing);
  -webkit-border-start: 0.3em solid;
  border-inline-start: 0.3em solid;
  font-style: italic;
  font-size: var(--size-step-1);
}

/* Utilities */
content>div>* {
  -webkit-margin-before: var(--flow-space, var(--spacing));
  margin-block-start: var(--flow-space, var(--spacing));
}

/* Flow and rythm */
:is(h1, h2, h3, h4, h5, blockquote) {
  --flow-space: calc(var(--spacing) * 2);
  margin-block-end: calc(var(--spacing));
}

:is(h1, h2, h3, h4, h5)+* {
  --flow-space: calc(var(--spacing) / 3);
}

:is(h1, h2, h3, h4, h5)+ :where(h2, h3, h4, h5) {
  --flow-space: calc(var(--spacing) * 2);
}

/* Line lengths */
main,
header,
footer {
  max-width: 65ch;
  margin-inline: auto;
}

blockquote {
  max-width: 50ch;
}

h1 {
  max-width: 24ch;
  font-family: var(--display-font);
}

h2 {
  font-family: var(--display-font);
}

h3,
h4,
h5 {
  max-width: 48ch;
  font-family: var(--secondary-font);
}

/* Bear Content */
.title {
  text-decoration: none;
}

.title h1 {
  font-size: var(--size-step-4);
  max-width: 100%;
}

nav p {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing);
}

nav a,
button {
  padding: 0 var(--spacing);
  display: inline-block;
  color: var(--color-light);
  box-shadow: 0 4px 0 var(--color-dark), 0 -4px 0 var(--color-dark),
    4px 0 var(--color-dark), -4px 0 0 var(--color-dark),
    inset -4px -4px 0 rgba(0, 0, 0, 0.2);
  background: var(--color-primary);
  text-decoration: none;
  border: none;
  line-height: 2.4;
  font-family: var(--display-font);
  font-size: 75%;
  margin-right: 16px;
}

nav a:hover,
button:hover {
  color: var(--color-light);
  box-shadow: 0 4px 0 var(--color-primary), 0 -4px 0 var(--color-primary),
    4px 0 var(--color-primary), -4px 0 0 var(--color-primary),
    inset -4px -4px 0 rgba(0, 0, 0, 0.2);
}

ul.blog-posts {
  list-style-type: none;
  padding: unset;
}

ul.blog-posts li {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

@media screen and (min-width: 600px) {
  ul.blog-posts li {
    flex-direction: row;
    gap: calc(var(--spacing) / 2);
  }
}

ul.blog-posts li span {
  min-width: 11ch;
}

pre,
code {
  font-family: var(--secondary-font);
}

.highlight,
.code,
code {
  padding: 1px var(--spacing);
  background-color: var(--code-background-color);
  color: var(--color-primary);
  overflow-x: auto;
  font-size: var(--size-step-0);
  line-height: 1.2;
}

table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  table-layout: fixed;
  background-color: var(--color-light);
  font-family: var(--secondary-font);
}

tr {
  margin-left: -0.25em;
}

th,
td {
  position: relative;
  padding: 0.5rem;
  word-wrap: break-word;
  border-color: var(--color-dark);
  border-style: solid;
  border-width: 1px;
}

#upvote-form {
  display: block !important;
  margin-top: 24px;
}

#upvote-form button {
  box-shadow: none !important;
}

.post-date {
  min-width: 25%;
}

#page-content {
  padding-top: 4vh;
  padding-bottom: 8vh;
  flex-grow: 1;
}

small {
  color: #a0a0a0;
}