/* frictional.life — site styles. Ported from hugo-theme-console; terminal.css provides the base. */
@font-face { font-family: "Roboto Mono"; src: url("../font/RobotoMono-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("../font/RobotoMono-Italic.ttf") format("truetype"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("../font/RobotoMono-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("../font/RobotoMono-BoldItalic.ttf") format("truetype"); font-style: italic; font-weight: 700; font-display: swap; }

:root {
  --global-font-size: 16px;
  --global-font-color: #444;
  --mono-font-stack: "Roboto Mono", Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
  --font-stack: var(--mono-font-stack);
  --global-line-height: 1.6em;
  --page-width: 70em;
  --display-h1-decoration: 1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222225; --page-width: 60em;
    --font-color: #e8e9ed; --invert-font-color: #222225;
    --secondary-color: #a3abba; --tertiary-color: #a3abba;
    --primary-color: #62c4ff; --error-color: #ff3c74;
    --progress-bar-background: #3f3f44; --progress-bar-fill: #62c4ff; --code-bg-color: #3f3f44;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --background-color: #fff; --font-color: #151515; --invert-font-color: #fff;
    --primary-color: #1a95e0; --secondary-color: #727578; --error-color: #d20962;
    --progress-bar-background: #727578; --progress-bar-fill: #151515; --code-bg-color: #e8eff2;
  }
}
@media only screen and (max-width: 850px) { :root { --global-font-size: 14px; } }

body { font-family: var(--font-stack); font-size: var(--global-font-size); background-color: var(--background-color); margin-bottom: 75px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-stack); clear: both; }
h1 { margin-bottom: 150px; }
strong { font-weight: bold; }
.logo { font-weight: normal; }
.terminal-menu li { margin-right: 30px; }
.active a { text-decoration: underline; }
figure { margin: 15px 60px; }
img { max-width: 100%; height: auto; }
video { max-width: 100%; height: auto; }

.footer { clear: both; margin-top: 100px; padding-top: 10px; border-top: 1px solid var(--secondary-color); color: var(--global-font-color); }

.terminal-prompt::after { animation: cursor 1s infinite; width: 10px; }
.terminal-prompt::before { content: none; }

.posts-list { position: relative; padding-left: 130px; top: 0; }
.post h1, .post h2 { padding-top: 0; margin: 0 0 5px; }
.posts-list .date { display: inline-block; position: absolute; left: 0; width: 130px; z-index: 400; padding-top: 0; }

/* page entrance (replaces animate.css zoomIn) */
@keyframes zoomIn { 0% { opacity: 0; transform: scale3d(.3,.3,.3); } 50% { opacity: 1; } }
.animated.zoomIn { animation: zoomIn .8s both; }
@media (prefers-reduced-motion: reduce) { .animated.zoomIn, .wobble-logo { animation: none !important; } }

@media only screen and (max-width: 850px) {
  .site-name { width: 2ch; overflow: hidden; display: inline-block; }
  .terminal-nav { align-items: flex-start; flex-direction: column; display: flex; }
  .terminal-menu ul { align-items: flex-start; display: flex; flex-direction: row; justify-content: left; margin-top: 0; }
  .terminal-menu li { margin-right: 20px; }
  .logo { padding: var(--global-space) 0; }
  figure { margin: 5px 30px; }
  .posts-list { padding-left: 0; }
  .posts-list .date { display: none; }
  .footer { margin-top: 50px; padding-top: 5px; }
}

/* the wobbly van */
@keyframes wobble { 0%{transform:rotate(0)} 15%{transform:rotate(-3deg)} 30%{transform:rotate(3deg)} 45%{transform:rotate(-3deg)} 60%{transform:rotate(3deg)} 100%{transform:rotate(0)} }
@keyframes wobble-intense { 0%{transform:rotate(0) scale(1)} 15%{transform:rotate(-6deg) scale(1.1)} 30%{transform:rotate(6deg) scale(1.1)} 45%{transform:rotate(-6deg) scale(1.1)} 60%{transform:rotate(6deg) scale(1.1)} 100%{transform:rotate(0) scale(1)} }
.wobble-logo { width: 70px; vertical-align: middle; margin-right: 10px; animation: wobble 2s infinite ease-in-out; transition: transform .3s ease-in-out; }
.wobble-logo:hover { animation: wobble-intense .5s infinite ease-in-out; }

/* let the prompt take the room it needs; the menu only its content */
.terminal-nav .terminal-logo { flex: 1 1 auto; min-width: 0; }
@media only screen and (min-width: 30em) { .terminal-nav .terminal-menu { width: auto; flex: 0 0 auto; margin-left: 2em; } }