:root {
  --Blue5: #ADD6EB;
  --Blue4: #7DBDDE;
  --Blue3: #4DA5D1;
  --Blue2: #2978A0;
  --Blue1: #1D5572;
  --Blue0: #143D52;
  --Aqua2: #ACFCD9;
  --Aqua1: #75FAC0;
  --Aqua0: #26F79D;
  --Turquoise5: #7CDFCB;
  --Turquoise4: #5DD9C1;
  --Turquoise3: #2FC6A8;
  --Turquoise2: #27A58C;
  --Turquoise1: #1B7462;
  --Turquoise0: #104238;
  --Grey5: #FFFFFF;
  --Grey4: #E0E0E0;
  --Grey3: #C2C2C2;
  --Grey2: #42424C;
  --Grey1: #2C2C34;
  --Grey0: #131316;
  --TransparentGrey0: #8882;
  --TransparentGrey1: #8884;
}

body {
  --Brand: var(--Blue2);
  --Text: var(--Grey0);
  --TextSuble: var(--Grey1);
  --ActiveText: var(--Grey1);
  --Panel: var(--Grey5);
  --Background: var(--Grey5);
  --LightPanel: var(--Grey3);
}

body.dark-mode {
  --Brand: var(--Blue3);
  --Text: var(--Grey5);
  --TextSubtle: var(--Grey4);
  --ActiveText: var(--Grey4);
  --Panel: var(--Grey1);
  --Background: var(--Grey0);
  --LightPanel: var(--Grey2);
}

body {
  font-family: Verdana, sans-serif;
  background-color: var(--Background);
  color: var(--Text);
  display: flex;
  justify-content: center;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Helvetica, Verdana, sans-serif;
}

h2 {
  margin-block-start: 0;
}

ul {
  list-style-type: none;
  padding-inline-start: 0;
  margin-block: 0;
}

#page {
  display: grid;
  grid-template-columns: 50rem 16rem;
  grid-template-areas:
    'header header'
    'content right-panel';
  width: fit-content;
}

#header {
  grid-area: header;
  min-height: 6rem;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 1rem;
}

#left-panel {
  grid-area: left-panel;
}

nav.right-panel {
  grid-area: right-panel;
  padding: 1rem;
}

article#content {
  grid-area: content;
  padding: 1rem;
}

.brand {
  color: var(--Brand);
}

.monospace {
  font-family: monospace;
  background-color: var(--LightPanel);
  padding: 0.25rem;
}

.logo {
  font-weight: 600;
  font-size: 2em;
  display: flex;
  align-items: center;
  column-gap: 0.25rem;
}

button {
  border: none;
  border-radius: 0.5rem;
  background-color: var(--Panel);
  color: var(--Text);
  padding: 0.5rem;
  cursor: pointer;
}

p {
  line-height: 1.5;
}

time {
  font-size: 0.75rem;
  color: var(--TextSubtle);
}

a {
  color: var(--Text);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

iframe {
  border: none;
  width: auto;
  height: auto;
}

iframe.loading-blog-post {
  border-radius: 4px;

  background: var(--TransparentGrey1);
  animation: shimmer 2s 12 ease-in-out;

  width: 20rem;
  height: 10rem;
}

@keyframes shimmer {
  0% {
    background: var(--TransparentGrey1);
  }
  50% {
    background: var(--TransparentGrey0);
  }

  100% {
    background: var(--TransparentGrey1);
  }
}

.generator {
  width: 20rem;
  height: 12rem;
  border: 2px solid var(--Text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Garamond, serif;
  font-size: 2rem;
  border-radius: 1rem;
}

.generator.generator-small {
  width: 12rem;
  height: 8rem;
}

.disabled {
  cursor: not-allowed;
}

.center-contents {
  display: flex;
  align-items: center;
  justify-content: center;
}

.margin-y-1 {
  margin-block: 1rem;
}

.column-gap-1 {
  column-gap: 1rem;
}