@charset "utf-8";


:root {
    /* This stuff is supposed to switch colors according to the user's system choice.
       The dark-mode colors, esp. for links, are going to need a lot of tweaking.

    color-scheme: light dark;
    --fgcolor:  light-dark(#222226, #ebebed);
    --bgcolor: light-dark(#ebebed, #222226);
    */    
    /* set variables for fonts -- N doesn't like serif fonts anywhere. */
    --body-font: atkinson-next, sans-serif;
    --title-font: merriweather, serif;

}

@font-face {
    font-family: atkinson-next;
    src: url(fonts/AtkinsonHyperlegibleNextVF-Variable.woff2);
    /* Note:  the URL is relative to the stylesheet's parent directory,
       so this is equivalent to the absolute path /site/fonts/... */
    font-display: swap;
}
@font-face {
    font-family: baskerville;
    src: url(fonts/Baskervville-VariableFont_wght.ttf);
    font-display: swap;
}
@font-face {
    font-family: merriweather;
    src: url(fonts/Merriweather-VariableFont_opsz,wdth,wght.ttf);
    font-display: swap;
}


body {
    font-family: var(--body-font);
    font-size: 18px;
   color: #000000;
   background-color: #ddeeff; 	/* stolen from pocketpoems.net */
   max-width: 100ch;
   margin: auto;
   flex-flow: column;
   
}

h1, h2, h3, h4, h5, h6, th { 
   font-family: var(--title-font);
}
a:link {color: #000099;
}
a:visited {color:#660099;
}
a:hover {color:#0000FF;
	 text-decoration: none;
}
a:active {color: #996699;
}

/* scale objects and images so they always fit
 */
img, object {
     max-width: 100%;
}

/* Special-purpose div's
 */
.fantasy {
  /*font-family: baskerville;*/
  font-style: italic;
}		

/* Event list */

.event-list {
}

.event-date {
    text-align: right;
}

.event-link {
    text-align: left;
}

/* Gig list */
.gigs {
    background-color: #66ff66;
    display: block;
    margin: 20px;
	       
}
.gig-list {
    background-color: #66ff66;
    padding: .5em;
}

.gig-list th {
    text-align: right;
    vertical-align: top;
}

/* News - yellow highlight */
.news {
    background-color: #66ff66;
    display: block;
    margin: 20px;
	       
}
.news table {
    background-color: #66ff66;
    padding: .5em;
}

.news th {
    text-align: right;
    vertical-align: top;
}

/* Nav bars
   we sometimes use a second nav-bar as a table of contents
 */

nav {
    background-color:  #ccccdd;
    font-size: large;
    font-weight: bold;
    font-family: sans-serif;
}

nav a {
    display: inline-block;
    text-decoration: none;
    border-bottom-width: 2px;
    border-bottom: solid #d9ccbb;
}

nav a:hover {
    border-bottom-color:  blue;
}

/* We have two ways to indicate the current page.  href=./ or class=this
 * using href=./ is good for the index page; if there are other pages in the 
 * same directory, use ../name for the parent and class=this for the link to self.
 */
nav a.this,
nav a[href="./"] {
    border-bottom-color:  black
}

nav a[href="./"] {
    border-bottom-color:  black
}

nav.sub {
    font-size: medium;
    font-style: italic;
}
nav.sub a {
    border-bottom-width: 1px;
}

/* 
 * footer:
 */

.footer {
    background-color:  #ccccdd;
    font-family: sans-serif;
    font-size: medium;
}