@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: atkinson-next, sans-serif;

    /* sample colors from Naomi
       Her original pick was 62C370 for light green, and 1B512D for dark green.
       6FC87E passes WCAG AA for dark-green normal text, and AAA for large text.
    */
    --dark-green: #1B512D;
    --light-green: #6FC87E;
    --gold: #FEA82F;
    --light-grey: #F7EDF0;  /* orig: F7EDF0. maybe use f7Fdf0 to go slightly green */
    --blue: #2978A0;

    --fgcolor: var(--dark-green);
    --bgcolor: var(--light-grey);
    --nav-bg: var(--dark-green);
    --nav-fg: var(--light-grey);
}
/*
body {
    color-scheme: light;   /* dark - easily switch schemes with M-t for testing. */
}*/

@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: var(--fgcolor);
    background-color: var(--bgcolor);
    max-width: 72ch; /* 960px; optimize line length for reading. */ 
    margin: auto;
    flex-flow: column;
}

main {   
    flex-flow: column;
    width: 100%;
}

/* This stylesheet gets shared around, and parts get copy/pasted;
   not all rules will be used in all sites. */
h1, h2, h3, h4, h5, h6, th, nav, header, footer { 
   font-family: var(--title-font);
}

.row {
    display: flex;
    flex-flow: row;
}

.center {
    text-align: center;
}

h1, h2, h3 {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    justify-self: center;
    text-align: center;
}

a:link {
       color: #000099;
}
a:visited {
	  color:#660099;
}
a:hover {
	color:#0000FF;
	text-decoration: none;
}
a:active {
	 color: #996699;
}

/* product card with buy "buttons" */
.product {
    display: flex;
    
}
.product .img {
    
}
.buy-links: {
    flex-direction: column;
    font-size: 150%;
}
    
.buy-caption {
    /* margin: 10px; */
    padding: 1px;
}
    
.buy-link {
    background-color: var(--gold); /*  #ffa500; */
    margin: 10px;
    padding: 1px;
}

/* Subscribe form */

.subscribe-form {
    margin-left, margin-right: auto;
}

input, button {
    font-size: 120%;
}

button {
    background-color: var(--light-green);
}

/* 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:  var(--nav-bg);
    color: var(--nav-fg);
    font-size: large;
    font-weight: bold;
    border-width: 4px;
}

nav a, nav a:link {
    color: var(--nav-fg);
    display: inline-block;
    text-decoration: none;
    border-bottom-width: 2px;
    border-bottom: solid #ddddee;
}

nav a:visited {
    color: var(--nav-fg);
}

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

nav a.this,
nav a[href="./"] {
    border-bottom-color:  var(--fgcolor)
}

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

/* Song lyrics
 */
.chords {
     font-family: sans-serif;
    font-size: small;
    color: blue;
}