@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wdth@112.5&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,75..112.5,200..700;1,75..112.5,200..700&display=swap');

/*
HOT PINK    hsl(330,100%,60%)   #ff3399     rgb(255,51,153)
            hsl(335,100%,60%)   #ff3388
LITE PINK   hsl(330,100%,80%)   #ff99cc     rgb(255,153,204)
            hsl(330,94%,80%)    #fc9ccc
TEAL        hsl(165,80%,60%)    #47ebc2     rgb(71,235,195)
            hsl(174,80%,60%)    #47ebda
BLACK       hsl(0,0,7%)         #111111
*/

:root {
    --bubblegum: #fc9ccc;
    --hotpink: #ff3388;
    --surfgreen: #47ebda;
    --nearblack: #111111;
    --nearwhite: floralwhite; }

html {
    font-size: 16px;}

@media screen and (min-width: 1280px) {
    html { font-size: 20px; }}

body {
    background-color:#111;
    color:floralwhite;
    font-family: "Archivo";
    font-variation-settings: "wdth" 112.5;
    font-stretch: semi-expanded;
    font-size:1rem;
    line-height: 1.5em;
    min-height:40rem;
    width: 45rem;
    max-width:100%;
    margin:0 auto 3rem;
    padding: 0 1.5rem; }

@media screen and (max-width: 800px) {
    body { padding: 0 0.5rem; }}

@media print {
    body {
        margin-left: 0.5in;
        background-color: #fff;
        color:#000; }
    footer {
        visibility: hidden; }
}

a {
    color: hsl(335,100%,60%);
    text-decoration: none; }
a:visited {
    color: hsl(330,94%,80%);}
a:hover {
    text-decoration: underline; }

img, iframe {
    max-width: 100%;}

hr {
    clear: both;
    margin: 2rem auto;
    max-width: 12rem;
    border: 1pt dashed #fc9ccc; }

/* primary body area styles */

header {
    margin:0 auto 1rem;
    max-width:100%;
    text-align:center; 
    text-transform: uppercase; }
header img {
    margin:0 auto;
    height:auto;
    width:auto;
    max-height:3rem;
    max-width:100%; }
header h1 {
    margin: 1rem 0 0; }

footer {
    margin: 3rem auto 1rem; }

main {
    margin: 1rem auto;
    padding: 0; }

main p {
    text-align: left;
    margin:0 auto 1em; }

section, article, header, main, footer {
    clear: both; }

/* HEADER STYLES */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1em;
    font-weight: 700;
    font-variation-settings: "wdth" 112.5; 
    font-stretch: semi-expanded;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -0.075em; }

h1.granjon, h2.granjon, h3.granjon, h4.granjon, h5.granjon, h6.granjon {
    font-family: "garamond-premier-pro", "Garamond", serif;
    font-weight: 400;
    font-stretch: normal;
    font-style: italic;
    letter-spacing: 0.025em;
    text-transform: none;
    margin-bottom: 0.5em; }

h1.garamond, h2.garamond, h3.garamond, h4.garamond, h5.garamond, h6.garamond {
    font-family: "garamond-premier-pro", "Garamond", serif;
    font-weight: 400;
    font-stretch: normal;
    font-variant-caps: small-caps;
    letter-spacing: 0;
    text-transform: none; }

h1 {
    font-size: 2rem;
    line-height: 2rem; }
h1.granjon, h1.garamond {
    font-size: 2.333rem; }

h2 {
    font-size: 1.75rem;
    line-height: 2rem;}
h2.granjon, h2.garamond {
    font-size: 2rem; }

h3 {
    font-size: 1.5rem;
    line-height: 1.5rem;}
h3.granjon, h3.garamond {
    font-size: 1.75rem; }

h4 {
    font-size: 1.25rem;
    line-height: 1.5rem;}
h4.granjon, h4.garamond {
    font-size: 1.5rem; }

h5 { 
    font-size: 1em;
    line-height: 1.5rem;}
h5.granjon, h5.garamond {
    font-size: 1.25rem; }

h6 { 
    font-size: 0.75em;
    line-height: 1.5rem;}
h6.granjon, h6.garamond {
    font-size: 1rem; }

hgroup {
    > p {
        text-align: center; }
    > h1 + p, > h2 + p, > h3 + p, > h4 + p, > h5 + p, > h6 + p {
        margin-top: -1.5rem; } }

/* LIST styles */

ul, ol, menu {
    padding-left: 3rem;
    text-align: left;
    line-height: 1.5em;
    text-transform: uppercase; }

/* DETAILS and SUMMARY */

details > summary {
    display: block;
    cursor: pointer;
    padding: 0.5rem;
    margin: 1rem 0;
    text-align: center;
    color: #111;
    background-color: var(--bubblegum); }
details > summary:hover {
    color: #111;
    background-color: floralwhite; }
details > summary::after {
    content: "\25B6";
    font-weight: bold; }
details[open] > summary::after {
    content: "\25BC"; }

/* PRE-formatted text styles */

pre {
    text-align: left;
    margin: 1em 0;
    width:fit-content;
    white-space: pre-wrap; }

pre.lyrics, .lyrics pre {           /* LYRICS */
    font-size: 1em;
    line-height: 1.25em; }

pre.tab, .tab pre {               /* TABLATURE */
    width: auto;
    font-size: 0.833rem;
    line-height: 1em; }

/* two-column format */

@media print, (min-width: 800px) {
    .twoColumn {
        columns: 2;
      section, pre, p, ul, ol {
        break-inside: avoid-column; }
      pre:first-of-type, > hr:first-child,
      h1, h2, h3, h4, h5, h6 {
        margin-top:0; } } }

/* nav links */

nav {
    margin: 1rem auto;
    max-width: 24em; 
    text-align: center;
    font-family: 'Archivo'; }
nav h5 {
    margin-bottom: 0; }
nav a {
    display: block; }
nav a.buttonStyle, nav.buttonStyle a {
    padding: 0.5em;
    margin: 1em 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.075em;}
nav.listStyle {
    a:hover {
        color:#111;
        background-color:floralwhite;}
    a, a:visited {
        color:floralwhite;}
}


/* color scheme classes */

.surfGreen, a.surfGreen {
    color:#111;
    background-color: var(--surfgreen);}
.popPink, a.popPink {
    color:floralwhite;
    background-color: var(--hotpink);}
.bubblegum, a.bubblegum {
    color:#111;
    background-color: var(--bubblegum);}
.reverse, a.reverse {
    color:#111;
    background-color: floralwhite;}
@media print {
    .surfGreen, .bubblegum, a.surfGreen, a.bubblegum {
        color: #000; }
    .popPink, a.popPink {
        color: #fff; }
    .reverse, a.reverse {
        color: #fff;
        background-color: #000;  }
    }

.surfGreenText {
    color: var(--surfgreen); }
.bubblegumText {
    color: var(--bubblegum); }
.popPinkText {
    color: var(--hotpink); }

/* font classes */

.fontGaramond,
main p {
    font-family: 'garamond-premier-pro', 'Garamond', serif;
    font-size: 1.167em;         /* 14pt */
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    letter-spacing: 0.01em;
    text-transform: none; }

.fontGranjon,
blockquote {
    font-family: 'garamond-premier-pro', 'Garamond', serif;
    font-size: 1.167em;
    font-style: italic;
    font-weight: 400;
    font-stretch: normal;
    letter-spacing: 0.03em;
    text-transform: none; }
.fontGranjon em, .fontGranjon i,
blockquote em, blockquote i {
    font-style: normal;}

.fontConsolas,
pre, code, kbd {
    font-family: "Consolas", monospace;
    font-size: 1em;
    font-weight: 400;
    font-stretch: normal;
    text-transform: none; }
.fontGaramond pre, .fontGaramond code, .fontGaramond kbd,
.fontGranjon pre, .fontGranjon code, .fontGranjon kbd,
main p code, main p kbd {
    font-size: 0.857em;
    letter-spacing: 0; }

.sansSerif, hgroup p,
.imperialGrotesk {
    font-family: "Archivo";
    font-size: 1em;
    font-variation-settings: "wdth" 112.5;
    font-stretch: semi-expanded; }
.imperialGrotesk {
    /*font-weight: 600;*/
    letter-spacing: -0.075em;
    text-transform: uppercase; }

/* CONDITIONAL STYLES FOR CHORD CHARTS */
@media screen {
    table.chordChart td,
    div.bar, div.line>div, div.chordChart>div>div
        {border-color: floralwhite;}
    }
@media print {
    table.chordChart td,
    div.bar, div.line>div, div.chordChart>div>div
        { border-color: black;}
    }

/* BANDCAMP EMBED */
iframe.bandcamp {
    display: block;
    border: 0;
    width: 15rem;
    height: 15rem;
    margin: 0 auto 1em; }

iframe.bandcamp-small {
    display: block;
    border: 0;
    width: 10rem; 
    height: 10rem; 
    margin: 0 auto 1em; }

/* Discography */

div#albums section, div#singles section {
    margin-bottom: 3rem; }

@media (min-width: 768px) {
    div#albums section, div#singles section {
        margin: unset;
    }
    div#albums {
        display: grid; 
        grid-template-columns: 21rem 21rem; 
        gap: 1.5rem 3rem; 
        margin: 0 0 3em; }
    div#singles {
        display: grid; 
        grid-template-columns: 14rem 14rem 14rem; 
        gap: 1.5rem;
        margin: 0 0 3em; }
    }