/* vim: set foldmethod=marker fmr=/*\—,/**\/: */

/*:::::::::::::::::::::::::::::::::::::::: THEME.css */











/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); 
   https://github.com/acswift/mdsite/issues/6  */












/*——————————————————————————————————————— notes

   Version 1.0, 23 September 2026
   by Andrew Swift (see github for contact info)
 
   built with mdsite for time-proof simple websites
/**/ 

/********************************************************* BASE CONFIG ********************/

/*——————————————————————————————————————— changed defaults 

     */

* { box-sizing:border-box; }

body, nav, main{
  margin:0;
  }

nav, main{
  display:flow-root;
  }

a:link{
  text-decoration:none;
  }

a:hover{
  text-decoration:underline;
  text-underline-offset:0.2em;
  text-decoration-thickness:1px;
  text-decoration-style:dotted;
}
/**/

/*::::::::::::::::::::::::::::::::::::::: header */

/*——————————————————————————————————————— post lists */

ul.posts li a:link{
  color:var(--postListFg);
  font:var(--postListFont);
  }

ul.posts li a:visited{
  color:var(--postListVisitedFg);
  }

ul.posts li a:hover, ul.posts li a:active{
  color:var(--postListActiveFg);
  }

/**/
/*——————————————————————————————————————— post date */

p.postDate{
  color:var(--postDateFg);
}
/**/
/*——————————————————————————————————————— HTML tags */

h1:nth-child(1){
  color:var(--titleFg);
}
/**/
/*——————————————————————————————————————— tag spacing */

/**/
/*——————————————————————————————————————— images */

img{
  zoom:0.5;
  display:block;
  margin:8dvw auto -12dvw auto;

  border-radius:5dvw;
  border:1dvw solid #0004;
  box-shadow:0dvw 3dvw 10dvw #0003;
}

/**/

/*::::::::::::::::::::::::::::::::::::::: footer */

/*——————————————————————————————————————— fonts */

/**/

/*::::::::::::::::::::::::::::::::::::::: colors */

/*——————————————————————————————————————— colors */

/**/

/********************************************************* customization ********************/

/*——————————————————————————————————————— font-faces */

@font-face {
  font-family: 'Akzidenz';
  src: url('/THEME/fonts/WOFF Files/AkzidenzGrotesk-LightExtended.woff') format('woff');
  font-weight:light;
  font-style:normal;
}

@font-face {
  font-family: 'Akzidenz';
  src: url('/THEME/fonts/WOFF Files/AkzidenzGrotesk-MediumExtended.woff') format('woff');
  font-weight:bold;
  font-style:normal;
}

@font-face {
  font-family: 'Bookerly';
  src: url('/THEME/fonts/WOFF Files/Bookerly-Light.woff') format('woff');
  font-weight:light;
  font-style:normal;
}

@font-face {
  font-family: 'Bookerly';
  src: url('/THEME/fonts/WOFF Files/Bookerly-Light-Italic.woff') format('woff');
  font-weight:light;
  font-style:italic;
}

@font-face {
  font-family: 'Helvetica';
  src: url('/THEME/fonts/WOFF Files/Helvetica Regular.woff') format('woff');
  font-weight:regular;
  font-style:normal;
}

@font-face {
  font-family: 'Helvetica';
  src: url('/THEME/fonts/WOFF Files/Helvetica Bold.woff') format('woff');
  font-weight:bold;
  font-style:normal;
}
/**/
/*——————————————————————————————————————— colors

  any color on site can be changed here
  https://enes.in/sorted-colors/ */

/* additions to named CSS colors */
:root {
  --charcoal  :hsl(0, 0%, 20%);
  --darkergray:hsl(0, 0%, 30%);
}

:root{
  --bodyFg                : var(--darkergray);
  --bodyBg                : white;

  --titleFg: royalblue;

  --topNavFg: teal;
  --topNavVisitedFg: gray;
  --topNavActiveFg: black;

  --bottomNavFg: pink;

  --postListFg:darkslategray;
  --postListVisitedFg:gray;
  --postListActiveFg:red;

  --postDateFg: olivedrab;
}

/**/
/*——————————————————————————————————————— font definitios */

:root{
  --titleFont: 700 30px Akzidenz;
  --postListFont: 400 16px Bookerly;
/*  --postedOnFont: 300 0.8rem "IBM Plex Mono";
  --topTaggedFont: 300 0.8rem "IBM Plex Mono";
  --bodyFont    : 300 var(--bodyFontSize) "IBM Plex Sans";
  --siteDescFont: 400 0.8rem "IBM Plex Mono";
  --siteNavFont : 400 0.9rem "IBM Plex Mono";
  --hxFont      : 600 1.0rem "Barlow Condensed";
  --footerFont  : 300 1.0rem/2.4rem "IBM Plex Sans";
  --captionFont : italic 300 1.0rem/2.4rem "IBM Plex Sans";
  --tableFont   : 400 var(--bodyFontSize) "IBM Plex Mono"; */
}

/**/

/*::::::::::::::::::::::::::::::::::::::: debugging */

/*——————————————————————————————————————— main blocks */

body{
  background-color:beige;
  }

nav.pagenav.top{
  background-color:orchid;
  }

main{
  background-color:green;
  }

nav.pagenav.bottom{
  background-color:deeppink;
  }

nav.postnav.top{
  background-color:red;
  }

nav.postnav.bottom{
  background-color:orange;
  }
/**/
/*——————————————————————————————————————— menu blocks */

nav.pagenav.top{
  ul{
  background-color:pink;
  }

  li{
  background-color:cyan;
  }

  li a:link, nav.pagenav.top li a:visited, nav.pagenav.top li a:hover, nav.pagenav.top li a:active{
  color:blue;
  }
}

nav.pagenav.bottom{
  ul{
  background-color:pink;
  }

  li{
  background-color:cyan;
  }

  li a:link, nav.pagenav.top li a:visited, nav.pagenav.top li a:hover, nav.pagenav.top li a:active{
  color:blue;
  }
}

nav.postnav.top{
  ul{
  background-color:pink;
  }

  li{
  background-color:cyan;
  }

  li a:link, nav.postnav.top li a:visited, nav.postnav.top li a:hover, nav.postnav.top li a:active{
  color:blue;
  }
}

nav.postnav.bottom{
  ul{
  background-color:pink;
  }

  li{
  background-color:cyan;
  }

  li a:link, nav.postnav.top li a:visited, nav.postnav.top li a:hover, nav.postnav.top li a:active{
  color:blue;
  }
}
/**/
/*——————————————————————————————————————— nav subclasses (posts only) */

nav.postnav.top{
  li.prev{
    background-color:lime;
  }
  li.up{
    background-color:olive;
  }
  li.next{
    background-color:cadetblue;
  }
}

nav.postnav.bottom{
  li.prev{
    background-color:lime;
  }
  li.up{
    background-color:olive;
  }
  li.home{
    background-color:blueviolet;
  }
  li.next{
    background-color:cadetblue;
  }
}
/**/
/*——————————————————————————————————————— content blocks */

main p.postDate{
  background-color:magenta;
  }
  
h1:nth-child(1){
  border:1px solid yellow;
  }
/**/
/*——————————————————————————————————————— content subclasses */
/**/

/*::::::::::::::::::::::::::::::::::::::: end */

/* two basic questions — selecting & styling each element & spacing for responsive */