style.css

/* Global variables */
:root {
  --title-color:                #006CC2; /* NHS blue */
  --main-bg-color:              #FFF;    /* white */
  --main-font-color:            #646464; /* dark grey */
  --link-text-color:            #006CC2; /* NHS blue */
  --nav-quote-bg-color:         #F3F3F3; /* light grey */
  --nav-accent-color:           #DDD;    /* mid grey */
  --section-heading-color:      #006CC2; /* NHS blue */
  --bio-card-bg-color:          #FFF;    /* white */
  --accent-card-bg-color:       #00A2FF; /* mid blue */
  --accent-font-color:          #FFF;    /* white */
  --footer-color:               #006CC2; /* NHS blue */
}

/* Responsive visual elements */
/* --------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root {
      --title-color:             #006CC2; /* NHS blue */
      --main-bg-color:           #161616; /* blackish */
      --main-font-color:         #FFF;    /* white */
      --link-text-color:         #00A2FF; /* light blue */
      --nav-quote-bg-color:      #242222; /* light black */
      --nav-accent-color:        #023456; /* deep blue */
      --section-heading-color:   #242222; /* light black */
      --bio-card-bg-color:       #242222; /* light black */
      --accent-card-bg-color:    #023456; /* deep blue */
      --accent-font-color:       #FFF;    /* white */
      --footer-color:            #023456; /* deep blue */
    }

    img {
        filter:                  brightness(.8) contrast(1.2);
    }

    p, blockQuote, ul, h2, h3, h4, h5, h6 {
        transparency:            50%;
    }
}

@media (prefers-contrast: low) {
    :root {
      --title-color:             #006CC2; /* NHS blue */
      --main-bg-color:           #161616; /* blackish */
      --main-font-color:         #FFF;    /* white */
      --link-text-color:         #00A2FF; /* light blue */
      --nav-quote-bg-color:      #242222; /* light black */
      --nav-accent-color:        #023456; /* deep blue */
      --section-heading-color:   #242222; /* light black */
      --bio-card-bg-color:       #242222; /* light black */
      --accent-card-bg-color:    #023456; /* deep blue */
      --accent-font-color:       #FFF;    /* white */
      --footer-color:            #023456; /* deep blue */
    }

    img {
        filter:                  brightness(0.8) contrast(1.2) sepia(20%);
    }

    p, blockQuote, ul, h2, h3, h4, h5, h6 {
        transparency:           60%;
    }

    body {
    transparency:               10%;
    }
}

@media (prefers-reduced-motion: reduce)  {
    .card {
        transition:             0.6s;
    }
}

/* Responsive format elements */
/* ----------------------------------------------------------- */


/* Small and extra small devices (phones, 600px and down; portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 300px) {
    .mainNav {
        position:               static;
    }
    .mainNav ul {
        padding:                 0;
    }
    .mainNav li {
        width:                  100%;
        border-bottom:          solid 1px var(--nav-accent-color);
    }
    p, .warm-up li, h1, h3, summary, blockQuote, cite, .policies h2, .policies li {
        margin:                 0 2%;
    }
    h2 {
        padding:                1em 8%;
    }
    footer ul, footer p, footer img {
        margin-left:            5%;
    }
    footer a {
        line-height:            3.25rem;
        padding:                16px 0 16px 0;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .mainNav li {
        width:                   33%;
        border-bottom:           none;
    }
    .mainNav ul {
        padding:                 0;
    }
    p, .warm-up li, h1, h3, h4, summary, blockQuote, cite, .policies h2, .policies li {
        margin:                 0 2%;
    }
    input {
        margin:                 0 0 0 10%;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .mainNav {
        position:               sticky;
    }
    .mainNav li {
        width:                   20%;
    }
    .mainNav ul {
        padding:                 0;
    }
    p, .warm-up li, h1, h3, h4, summary, blockQuote, cite, .policies h2, .policies li {
        margin:                 0 10%;
    }
    input {
        margin:                 0 0 0 20%;
    }
    h2 {
        padding:                1em 15%;
    }
    footer {
        display:                grid;
        grid-template-columns:  5% 1fr 1fr 1fr 1fr 1fr 1fr 5%;
        grid-auto-columns:      minmax(auto, auto);
    }
    footer a {
        line-height:            1rem;
        padding:                0;
    }

    #our-pages {
      grid-column-start:    2;
      grid-column-end:      4;
      grid-row-start:       1;
      margin-left:          5%;
    }

    #our-policies{
      grid-column-start:    4;
      grid-column-end:      6;
      grid-row-start:       1;
    }

    #get-in-touch{
      grid-column-start:    6;
      grid-column-end:      8;
      grid-row-start:       1;
    }

    #thanks{
      grid-column-start:    6;
      grid-column-end:      8;
      grid-row-start:       2;
    }

    #carbon {
      grid-column-start:    2;
      grid-column-end:      6;
      grid-row-start:       2;
      margin-top:           5%;
      }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    p, h1, h3, h4, summary, blockQuote, cite, .policies h2, .policies li {
        margin:                 0 20%;
    }
    .warm-up li {
       margin:                  0 29%;

    }
    .mainNav li {
        width:                  auto;
    }
    .mainNav ul {
        padding:                0 0 0 15%;
    }
}

@media only screen and (min-width: 1600px) {
    footer {
        grid-template-columns:  5% 1fr 1fr 1fr 1fr 5%;
    }

    #our-pages {
      grid-column-start:    2;
      grid-column-end:      3;
    }

    #our-policies{
      grid-column-start:    3;
      grid-column-end:      4;
    }

    #get-in-touch{
      grid-column-start:    4;
      grid-column-end:      5;
    }

    #thanks{
      grid-column-start:    5;
      grid-column-end:      6;
      grid-row-start:       1;
    }
}



/* Header and navigation menu */
/* ===================================================================== */

h1 {
  font-family:          Garamond, Times New Roman;
  color:                var(--title-color);
  font-size:            300%;
}

a.skip {
    position:           absolute;
    z-index:            -999;
    color:              transparent;
}

a.skip:focus {
    background-color:   gold;
    color:              black;
    display:            inline-block;
    width:              100%;
    padding:            5px;
    font-size:          1em;
    z-index:            999;
    position:           relative;
}

.mainNav {
  top:                  0;
  box-shadow:           0 0.3px 0 0 var(--main-font-color);
}

.mainNav ul {
  margin:               0;
  overflow:             hidden;
  background-color:     var(--nav-quote-bg-color);
  text-decoration:      none;
  list-style-type:      none;
}

#songbook {
    position: relative;
}

.mainNav li {
  float:                left;
}

.mainNav li a {
  display:              block;
  text-align:           center;
  padding:              14px 16px;
  text-decoration:      none;
  border-bottom:        solid 6px transparent;
}

.mainNav li a:hover:not(.active) {
  background-color:     var(--nav-accent-color);
  border-bottom:        solid 6px var(--title-color);
  text-decoration:      none;
}

/* Main styling for general content */
/* ===================================================================== */

body {
  font-family:          "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:                var(--main-font-color);
  font-size:            1.5em;
  background-color:     var(--main-bg-color);
  margin:               0;
}

img {
   width:               100%;
   height:              19em;
   object-fit:          cover;
   object-position:     center;
   margin-bottom:       -1.55em;
}

p, ul, summary, .quoteAnna {
  padding:              1% 5%;
}

a {
    color:              var(--link-text-color);
    text-decoration:    underline solid;
}

a:hover {
    color:              var(--main-font-color);
    text-decoration:    underline var(--title-color) wavy;
    background-color:   var(--nav-quote-bg-color);
}

abbr {
    text-decoration:    underline dashed var(--nav-quote-bg-color);
}

summary {
    cursor:             pointer;
}


/* Titles */
/*---------------------------------------------------------------------*/

h2 {
  color:                var(--accent-font-color);
  background-color:     var(--section-heading-color);
}

h3, h4 {
  padding:              1% 5%;
}


/* Quotations */
/*---------------------------------------------------------------------*/

.quoteAnna {
   padding:             2em 2.5em;
   display:             block;
}

cite {
    font-size:          0.9em;
}

blockQuote {
    font-size:          0.9em;
    display:            block;
    background-color:   var(--nav-quote-bg-color);
    padding:            2em 2em;
    margin-bottom:      1em;
}

.quoteMark {
  font-family:          Garamond, Times New Roman;
  color:                var(--title-color);
  font-size:            4em;
  line-height:          0.3em;
}


/* Biography cards */
/*---------------------------------------------------------------------*/

.bios {
  display:              flex;
  flex-wrap:            wrap;
  justify-content:      space-evenly;
  align-items:          stretch;
  gap:                  2em 0.5em;
  margin:               0 20%;
}

.card img {
  width:                100%;
  height:               35%;
  border-radius:        5px 5px 0 0;
}

h5, h6 { margin:        0;}
h5 { padding:           40px 16px 5px 16px;}
h6 { padding:           2px 16px 16px 16px;}

.card p {
  padding:              2px 16px 16px 16px;
  margin:               0;
}

.card {
  box-shadow:           0 4px 8px 0 rgba(0,0,0,0.2);
  transition:           0.3s;
  width:                20%;
  min-width:            350px;
  max-width:            450px;
  font-size:            0.8em;
  background-color:     var(--bio-card-bg-color);
  border-radius:        5px;
}

.card:hover {
  box-shadow:           0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Policies */
/* -------------------------------------------------------------------- */

.policies h2, .policies li {
    padding:            0.5em 1em;
}

.policies h2 {
    background-color:   var(--main-bg-color);
    color:              var(--title-color);
    border-bottom:      solid 0.5em var(--title-color);
}


/* Songbook */
/* ===================================================================== */

.songbookNav {
    background-color:  var(--title-color);
    text-decoration:   none;
    color:             var(--accent-font-color);
}

#directory {
    display:           flex;
    flex-wrap:         wrap;
    list-style-type:   none;
    align-content:     space-between;
    padding:           0 20%;
}

#directory li {
    padding:           2%;
    min-width:         48px;
}

#directory a:hover {
    background-color:  var(--title-color);
    text-decoration:   none;
    color:             var(--accent-font-color);
}

.songs h2 {
    background-color:  var(--title-color);
    margin:            1em 20%;
    padding:           1em;
    width:             1em;
    text-align:        center;
}

#caps:checked ~ .songs {
    text-transform:     uppercase;
}

#size:checked ~ .songs {
    font-size:          xxx-large;
}

label {
    padding:            0 3px 5px 3px;
    cursor:             pointer;
}

.setting {
    color:              var(--title-color);
}

.U {
    text-decoration:    underline;
}

input {
    width:              2em;
    height:             2em;
    cursor:             pointer;

}

.songs cite {
  padding:              1% 5%;
  display:              block;
}


/* Footer */
/* ===================================================================== */

footer {
  font-size:            0.75em;
  width:                100%;
  padding:              5% 20% 20% 0;
  background-color:     var(--footer-color);
  color:                var(--accent-font-color);
  margin-top:           1em;

}

footer ul, footer p {
  text-decoration:      none;
  list-style-type:      none;
  padding:              .5em;
  min-width:            380px;
}

footer a:hover {
  text-decoration:      underline solid 3px;
  color:                var(--accent-font-color);
  background-color:     transparent;
}

footer a {
  text-decoration:      none;
  color:                var(--accent-font-color);
}

footer img {
  width:                200px;
  height:               200px;
  padding-top:          2em;
}