/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; }

/*TEMP*/
#admin { position: fixed; padding: 5px; bottom: 5px; right: 0; font-size: 12px; background: #252525; }
.devnote { font-weight: bold; color: yellow; padding: 10px; border: 1px dotted yellow; }

/*CSS VARIABLES*/
:root{
--font-serif: Charter, 'Bitstream Charter', 'Sitka Text', serif;
--font-sans-serif: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
--text-s: 0.85rem;
--text-m: 1.00rem;
--text-d: 1.125rem;
--text-l: 1.25rem;
--text-xl: 1.50rem;
--text-xxl: 1.75rem;
--text-xxxl: 2.5rem;
}

body { font-family: var(--font-sans-serif); font-weight: normal; font-size: var(--text-d); color: #D7D7D7; line-height: 1.5; padding: 0;  background: url(/assets/images/codbg.png) no-repeat fixed center; background-color: #000; margin: 0; }

h1,h2,h3,h4,h5,h6 { font-family: var(--font-sans-serif); color: #FFF; line-height: 1.25; margin: 30px 0; }
h1 { font-size: var(--text-xxxl); font-weight: 800; }
h2 { font-size: var(--text-xl); font-weight: 700;  }
h3 { font-size: var(--text-l); font-weight: 700; }
h4,h5,h6 { font-size: var(--text-d); font-weight: 700; }
p {  margin: 30px 0; }
ul { margin: 30px 0 10px 30px; }
ol { margin: 30px 0 10px 30px; }
dl { margin: 30px 0; }
blockquote { font-family: sans-serif; font-size: var(--text-l); opacity: 0.5; padding-left: 20px; border-left: 5px solid rgba(0,0,0,0.5); margin: 30px 20px; }
blockquote p { margin: 0; }
blockquote cite { font-size: var(--text-m); }
figure { max-width: 100%; text-align: center; margin: 30px auto; }
figcaption { font-size: var(--text-s); color: #757575; text-align: center; padding: 5px; background: #EEE; }
img { max-width: 100%; height: auto; }
pre { padding: 10px; margin: 30px 0; background: #EEE; }
small { font-size: var(--text-s); }
b,strong { font-weight: 700; }
em,i { font-style: italic; }
code { padding: 5px; background: #EEE; border-radius: 7px; }
audio { width: 100%; }

a { color: #FF99FF; text-underline-offset: 0.25em; }
a:hover { color: #F6F705; text-decoration-style: wavy; text-underline-offset: 0.25em; }

/*LAYOUT*/
.globalWrapper { max-width: 1120px; margin: 0 auto; }
.nav { padding: 20px; }
.article { padding: 20px; }
.aside { padding: 20px; }
.footer { padding: 20px; }

.Xnav { display: grid; align-items: center; grid-template-columns: 120px 1fr; }
.nav { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.logo { display: block; width: 120px; }
.logo img { display: block; width: auto; height: 96px; }
.navigation { position: relative; }
.menu-label { display: inline-block; padding: 5px 10px; background: #000033; }
.menu-label::after { content: " \2630"; }
.menu-toggle { display: none; }
.menu { position: absolute; right: -999em; min-width: 240px; line-height: 40px; list-style: none; padding: 20px; background: #000033; margin: 0; }
.menu-toggle:checked + .menu-label + .menu { right: 0; }
@media screen and (min-width: 960px) {
.menu-label { display: none; }
.menu { position: relative; right: 0; display: flex; flex-wrap: wrap; gap: 20px; padding: 0; background: transparent; }
}

.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--text-s); list-style: none; margin: 0; }
.crumbs li::after { content: " \203A"; }

/*GRID*/
.grid { display: grid; grid-gap: 20px; }
.grid-flexi { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr) ); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ); } 

.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*HOME*/
.home-content { max-width: 960px; margin: 0 auto; }
.home-image { text-align: center; }
.home-title { font-size: var(--text-xxl); text-align: center; }
.home-intro { text-align: center; }

.article-layout { display: grid; grid-gap: 20px; grid-template-columns: 1fr; }
@media screen and (min-width: 960px) {
.article-layout { grid-template-columns: 3fr 1fr; }
}
.article-body {}
.aside-box { padding-left: 20px; border-left: 1px solid #F6F705; }
.aside-heading { font-size: var(--text-d); }
.aside-cats { list-style: none; margin-left: 0; }
.aside-cats li { margin: 0 0 10px 0; }

/*PAGINATION*/
.pagination {}
.pagination ul { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; font-size: var(--text-l); list-style: none; margin-left: 0; }
.pagination li {}
.pagination a {}

/*NOTES/FISHTALES*/
.notes-list { list-style: none; margin-left: 0; }
.notes-list li { margin-bottom: 15px; }
.notes-list a { display: block; font-size: var(--text-l); font-weight: 700; }

/*ALBUMS LISTING*/
.albums { margin: 30px 0; }
.albums-item { text-align: center; }
.albums-link { display: block; text-decoration: none; }
.albums-link:hover .albums-image img { transform: scale(1.035); }
.albums-image img { width: 100%; transition: 0.5s;}
.albums-title { font-size: var(--text-d); font-weight: 700; color: #D7D7D7; margin: 10px 0; }
.albums-note { font-size: var(--text-s); color: #D7D7D7; margin: 0 0 10px 0; }
.albums-cats-list { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin-left: 0; }

/*SINGLE ALBUM*/
.album { display: grid; grid-template-columns: 1fr; grid-gap: 20px; margin: 0 0 40px; }
@media screen and (min-width: 480px) {
.album { grid-template-columns: 1fr 2fr; }
}
.album-image { float: right; width: 33%; margin-left: 30px; overflow: hidden; }
.album-title { margin-bottom: 10px; }
.album-cats { font-size: var(--text-l); color: #D7D7D7; margin: 0; }


/*SONGS LISTING*/
.songs { clear: both; }
.song { padding: 20px; background: #252525; border-radius: 7px 3px 21px 14px; margin: 30px 0; clear: both; }
.song-title { font-size: var(--text-d); margin: 0; }
.song-note { font-size: var(--text-s); margin: 10px 0; }
.song-audio { margin: 10px 0;}
.song-lyrics { margin: 0; }
.song-lyrics summary { font-size: var(--text-m); }

/*BIO*/
.bios { margin: 30px 0; }
.bios-item { text-align: center; }
.bios-link { display: block; text-decoration: none; }
.bios-image { border: 5px solid #FFF; border-bottom: 15px solid #FFF; overflow: hidden; }
.bios-link:hover .bios-image img { transform: scale(1.1,1.1); }
.bios-image img { width: 100%; transition: 0.5s; }
.bios-title { font-size: var(--text-d); color: #D7D7D7; margin: 10px 0; }
.bios-instruments { font-size: var(--text-s); color: #D7D7D7; margin: 0; }

.bio-image { float: right; width: 40%; margin-left: 30px; }
.bio-image { transform: rotate(1deg); background: #FFF; border: 5px solid #FFF; border-bottom: 15px solid #FFF; }

.bio-title { margin-bottom: 10px; }
.bio-instruments { font-size: var(--text-l); margin: 0; }
.bio-instruments::before { content: "♫ "; }

/*GALLERY*/
.gallery { list-style: none; margin: 30px 0; }
.gallery-item { text-align: center; }
.gallery-link { display: block; text-decoration: none; }
.gallery-image { border: 5px solid #FFF; border-bottom: 15px solid #FFF; overflow: hidden; }
.gallery-link:hover .gallery-image img { transform: scale(1.1,1.1); }
.gallery-image img { width: 100%; transition: 0.5s; }
.gallery-title { display: block; font-size: var(--text-d); font-weight: 700; color: #D7D7D7; margin: 10px 0; }

/*BUTTON BAR*/
.button-bar { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; list-style: none; margin-left: 0; }

/*BUTTONISED LINKS*/
.link { text-align: center; text-decoration: none; border-radius: 7px; transition: 0.25s; }
.link-pri { color: #000; background: #ff99FF; }
.link-pri:hover { color: #000; background: #F6F705; }
.link-m { padding: 10px 20px; }
.link-s { font-size: var(--text-m); padding: 8px 15px; }
.link-block { display: block; }

/*FOOTER*/
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; font-size: var(--text-m); list-style: none; margin: 0; }
.footer-legal { font-size: var(--text-s); text-align: center; }