:root {
  --color-white: hsl(0, 0%, 100%);
  --color-paper: #f8f7f3;
  --color-grid: rgba(30, 95, 116, 0.05);
  --color-ink: #333333;
  --color-green: hsl(120, 59%, 92%);
  --color-red: hsl(0, 59%, 92%);

  --color-gray: hsl(0, 0%, 70%);
  --color-gray-lighter: hsl(0, 0%, 85%);

  --accent-primary: hsl(195, 59%, 29%);
  --accent-secondary: hsl(196, 20%, 36%);
  --highlight: hsl(41, 100%, 68%);

  --code-bg: hsl(0, 0%, 94%);
  --formula-bg: hsl(220, 14%, 96%);

  --container-width: 800px;

  --font-body: 'Charter', 'Palatino', serif;
  --font-heading: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  --font-code: 'IBM Plex Mono', 'Consolas', monospace;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 18px;
  line-height: 1.6;
}

body {
  background-color: var(--color-paper);
  background-image: linear-gradient(var(--color-grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--color-ink);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;

  &.embedded { background: none }
}

main {
  background: var(--color-white);
}

label {
  display: flex;
  flex-direction: column;
}

#masthead {
  padding: 0.5rem 0;
  width: 100%;
}
#masthead a {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  color: #1e5f74;
  text-decoration: none;
}

@media print { #masthead { display: none } }

.container {
  display: grid;
  grid-template-columns: 1fr min(var(--container-width), 90%) 1fr;

  & > * {
    grid-column: 2;
  }
}

h1 {
  margin: 1rem 0;
}
h2 {
  margin: 1.5rem 0 1rem;
}
h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.25;
  color: var(--accent-primary);
}

h1 {
  font-size: 2rem;
  position: relative;
}

h2 a {
  color: var(--accent-primary);
  text-decoration: none;
}

footer {
  border-top: 1px solid var(--accent-secondary);
  font-size: 0.9rem;
  color: var(--accent-secondary);

  &.footer--bare {
    border-top: none;
  }
}

button, .btn {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  border: 0;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  border-radius: 0.25rem;
  cursor: pointer;
}
.btn-danger { color: hsl(0, 80%, 65%); }
.btn-dim { color: var(--color-white); }
.btn-faded { color: var(--color-gray); }
.btn-secondary {
  border: 0;
  padding: 0;
  background: transparent;
}
.btn-link {
  background: transparent;
  text-align: left;
  padding: 0;
  color: var(--accent-primary);

  &:hover {
    text-decoration: underline;
  }
}

input[type=file] { display: none }

.pointer { cursor: pointer }
.editable { cursor: text }
.grabbable { cursor: grab }
.grabbing { cursor: grabbing }
.moveable { cursor: move }

.align-middle { align-self: center }
.align-bottom { align-self: end }
.align-top    { align-self: start }

.flex { display: flex }
.flex-center { justify-content: center }
.flex-right { justify-content: end }
.flex-spread { justify-content: space-between }
.flex-grow { flex-grow: 1 }
.flex-top { align-items: flex-start }
.flex-middle { align-items: center }
.flex-horizontal {
  display: flex;
  gap: 1rem;
}

.hide { display: none }

.shadow-bottom-up {
  box-shadow: inset 0 -10px 10px -10px rgba(0, 0, 0, 0.3);
}
.shadow-top-down {
  box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, 0.3);
}

.dropzone-container { position: relative }

.relative { position: relative }
.text-right { text-align: right }

.dropzone {
  display: none;
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  border-radius: 1rem;
  border: 4px dashed var(--color-gray);
  z-index: 1;
  background: hsla(0, 0%, 100%, 0.8);
  justify-content: center;
  align-items: center;
  font-size: 24pt;

  .dragover & {
    display: flex;
  }
}

[data-popover] { position: relative }
[data-popover]::after {
  display: none;
  content: attr(data-popover);
  position: absolute;
  left: 50%;
  top: 125%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;

  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  background: var(--color-green);
}
.popping-in[data-popover]::after {
  display: block;
}
.popping-over[data-popover]::after {
  opacity: 1;
}

.portfolio {
  border-bottom: 1px solid var(--color-gray);

  section {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;

    div { flex-grow: 1 }
    h2 { margin: 0 }
    p { margin: 0  }

    img {
      flex-grow: 0;
      border: 1px solid var(--color-gray);
      border-radius: 0.25rem;
    }
  }
}