/* Thank you font squirrel https://www.fontsquirrel.com/fonts/poppins license in 'SIL Open Font License.txt' */

/* poppins light */
@font-face {
  font-family: 'poppinslight';
  src: url('poppins-light-webfont.woff2') format('woff2'),
       url('poppins-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'poppinslight_italic';
  src: url('poppins-lightitalic-webfont.woff2') format('woff2'),
       url('poppins-lightitalic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* poppins regular for body text */
@font-face {
  font-family: 'poppinsregular';
  src: url('poppins-regular-webfont.woff2') format('woff2'),
       url('poppins-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'poppinsitalic';
  src: url('poppins-italic-webfont.woff2') format('woff2'),
       url('poppins-italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* poppins medium for titles */
@font-face {
  font-family: 'poppinsmedium';
  src: url('poppins-medium-webfont.woff2') format('woff2'),
       url('poppins-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'poppinsmedium_italic';
  src: url('poppins-mediumitalic-webfont.woff2') format('woff2'),
       url('poppins-mediumitalic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html {
  font-size: 100%;
  min-height: 100vh;
}

/* body tag sets default font properties and minimum height. background is black, so is gradient last point. */
body {
  min-height: 100vh;
  font: 1.2rem/1.8rem 'poppinsregular', serif;
}

/* hide content until app is mounted */
[v-cloak] {
  display: none;
}

/* vue app with background color personalized by day */
#vue-app {
  min-height: 110vh; /* mostly don't see non-replaceable backgrounds */
  min-width: 100vw;
  padding: 0;
  margin: 0;
}

/* background with padding to contain the grid */
#background-vessel {
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: center;
  background-position-x: center;
  background-position-y: top;
  background-origin: padding-box;
  margin: 0;
}

/* responsively sized, image set by day */
#background-photo {
  height: 1500px;
  width: 1200px;
  background-repeat: no-repeat;
  background-size: cover; 
}

/** 
  Background color set by day, underneath content but above html, avoids blank band at bottom.
  If you don't change the site's styling everyday you don't need to do this silliness.
*/
#background2 {
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height: 2400px; /* page height twice size of original photo */
  z-index: -2;
}

/* main grid container */
#grid-vessel {
  padding: 10%;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "header"
    "content"
    "footer";
  align-content: stretch;
  min-width: 6
}

/* header styles, some replacement occurs on the page */
#page-header {
  grid-area: header;
  margin-bottom: 7rem;
}
#page-header h1 {
  font: 4rem/4.4rem 'poppinsmedium', serif;
  margin-bottom: 3rem;
}
#page-header nav {
  display: flex;
  align-items: left;
  cursor: pointer;
}
#page-header nav ul {
  display: flex;
}
#page-header nav li {
  list-style: none;
  padding-right: 2em;
}
#page-header nav li a {
  text-decoration: none;
  font: 1.5rem/2rem 'poppinsmedium', serif;
}
#page-header nav li a:hover {
  text-decoration: underline;
}

/* content area of the page */
#content {
  grid-area: content;
  min-height: 10rem;
  margin-right: 10%;
}

/* styled intro paragraph at top of page */
p.intro {
  margin-bottom: 3em;
}
p.intro::first-letter {
  font: 1.8rem/1.4rem 'poppinsmedium', serif;
  float: left;
  letter-spacing: 0.1rem;
}
p.text {
  margin-bottom: 1.5em;
}

/* song player stylings */
.song {
  margin-bottom: 3rem;
}
.song h3 {
  font: 1.6rem/2rem 'poppinsmedium', serif;
}
.song h3::first-letter {
  font: 1.8rem/1.8rem 'poppinsmedium', serif;
  float: left;
  padding-top: 0.05rem;
  letter-spacing: 0.1rem;
}

.song p {
  font: 1.2rem/1.8rem 'poppinsregular', serif;
  margin-bottom: 0.5rem;
}

/* page footer component */
footer {
  grid-area: footer;
  margin-top: 4rem;
}
footer ul {
  display: flex;
  align-items: left;
}
footer li {
  list-style: none;
  padding-right: 3em;
  font: 1rem/3rem 'poppinslight', serif;
  vertical-align: text-bottom;
}
footer a {
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
footer li a i.fa-soundcloud {
  font-size: 2rem;
  padding-right: 0.5rem;
  position: relative;
  top: 0.25rem;
}
footer li a i.fa-mastodon {
  font-size: 1.8rem;
  padding-right: 0.5rem;
  position: relative;
  top: 0.25rem;
}
footer li a i.fa-camera {
  font-size: 1.6rem;
  padding-right: 0.5rem;
  position: relative;
  top: 0.25rem;
}
footer p {
  font: 0.8rem/1.5rem 'poppinslight', serif;
  opacity: 0.7;
}


/* Class stylings for each day of the month */

/* day 0 - 1st of month */
#vue-app.day0 {
  background-color: #080a09;
  color: #c3bcbe;
  text-shadow: 1px 1px 0 #080a09aa;
}
/* 
  see https://www.geeksforgeeks.org/css-combine-background-image-with-gradient-overlay/ 
  Note the gradient stops to opacity and then transparency prevent weird lighting
  side-effects, especially noticeable in Safari.
*/
#background-photo.day0 {
  background-image: 
    linear-gradient(90deg, rgba(8,10,9,1) 0%, rgba(8,10,9,0) 13%, transparent 15%, transparent 90%, rgba(8,10,9,0) 92%, rgba(8,10,9,1) 100%),
    linear-gradient(0deg,  rgba(8,10,9,1) 0%, rgba(8,10,9,0) 10%, transparent 12%, transparent 92%, rgba(8,10,9,0) 94%, rgba(8,10,9,1) 100%),
    url(../images/rafael-garcin-QpiHTbU1q6k-unsplash.jpeg); /* rgba(8,10,9,1) */
}
/* extends bkgd color if page scrolls long */
#background2.day0 { background-color: #080a09; }
#page-header.day0 h1 { color: #c3bcbe; }
#page-header.day0 h1 #grayword { color: #e63e00; }
#vue-app.day0 a { color: #c3bcbe; }
#vue-app.day0 a.activenav { color: #e63e00; }
#vue-app.day0 .song h3 { color: #e63e00; }
#vue-app.day0 footer li a i.fab { color: #e63e00; }
#vue-app.day0 footer li a i.fas { color: #e63e00; }


/* day 1 - 2nd of month */
#vue-app.day1 {
  background-color: #000;
  color: #f0e8db;
  text-shadow: 1px 1px 0 #00000099;
}
#background-photo.day1 {
  background-image: 
    linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 23%, transparent 25%, transparent 64%, rgba(0,0,0,0) 65%, rgba(0,0,0,1) 100%),
    linear-gradient(0deg,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 3%,  transparent 5%,  transparent 85%, rgba(0,0,0,0) 87%, rgba(0,0,0,1) 100%),
    url(../images/spring-fed-images-1bkrBPFznzc-unsplash.jpeg);
}
#background2.day1 { background-color: #000; }
#page-header.day1 h1 { color: #f0e8db; }
#page-header.day1 h1 #grayword { color: #ff7f50; } /* ff7f50 */
#vue-app.day1 a { color: #f0e8db; }
#vue-app.day1 a.activenav { color: #ff7f50; }
#vue-app.day1 .song h3 { color: #ff7f50; }
#vue-app.day1 footer li a i.fab { color: #ff7f50; }
#vue-app.day1 footer li a i.fas { color: #ff7f50; }


/* day 2 - 3rd of month */
#vue-app.day2 {
  background-color: #080b12;
  color: #aeb2bd;
  text-shadow: 1px 1px 0 #080b12aa;
}
#background-photo.day2 {
  background-image:
    linear-gradient(90deg, rgba(8,11,18,1) 0%, rgba(8,11,18,0) 10%, transparent 12%, transparent 83%, rgba(8,11,18,0) 85%, rgba(8,11,18,1) 100%),
    linear-gradient(0deg,  rgba(8,11,18,1) 0%, rgba(8,11,18,0) 7%,  transparent 9%,  transparent 83%, rgba(8,11,18,0) 85%, rgba(8,11,18,1) 100%),
    url(../images/johannes-plenio-2QUvkQTBh5s-unsplash.jpeg); /* rgba(8,10,9,1) */
}
#background2.day2 { background-color: #080b12; }
#page-header.day2 h1 { color: #aeb2bd; }
#page-header.day2 h1 #grayword { color: #af5346; }
#vue-app.day2 a { color: #aeb2bd; }
#vue-app.day2 a.activenav { color: #af5346; }
#vue-app.day2 .song h3 { color: #af5346; }
#vue-app.day2 footer li a i.fab { color: #af5346; }
#vue-app.day2 footer li a i.fas { color: #af5346; }


#vue-app.day3 {
  background-color: #030305;
  color: #dee7ed;
  text-shadow: 1px 1px 0 #030305aa;
}
#background-photo.day3 {
  background-image: 
    linear-gradient(90deg, rgba(3,3,5,1) 0%, rgba(3,3,5,0) 15%, transparent 17%, transparent 78%, rgba(3,3,5,0) 80%, rgba(3,3,5,1) 100%),
    linear-gradient(0deg,  rgba(3,3,5,1) 0%, rgba(3,3,5,0) 15%, transparent 17%, transparent 83%, rgba(3,3,5,0) 85%, rgba(3,3,5,1) 100%),
    url(../images/christian-holzinger-rSSES7CPrto-unsplash-1200x1500.jpeg);
}
#background2.day3 { background-color: #030305; }
#page-header.day3 h1 { color: #dee7ed; }
#page-header.day3 h1 #grayword { color: #fb6401dd; }
#vue-app.day3 a { color: #dee7ed; }
#vue-app.day3 a.activenav { color: #fb6401dd; }
#vue-app.day3 .song h3 { color: #fb6401dd; }
#vue-app.day3 footer li a i.fab { color: #fb6401dd; }
#vue-app.day3 footer li a i.fas { color: #fb6401dd; }


/* day 4 - 5th of month */
#vue-app.day4 {
  background-color: #231717;
  color: #dee7ed;
  text-shadow: 1px 1px 0 #231717bb;
}
#background-photo.day4 {
  background-image: 
    linear-gradient(90deg, rgba(35,23,23,1) 0%, rgba(35,23,23,0) 18%, transparent 20%, transparent 80%, rgba(35,23,23,0) 82%, rgba(35,23,23,1) 100%),
    linear-gradient(0deg,  rgba(35,23,23,1) 0%, rgba(35,23,23,0) 18%, transparent 20%, transparent 80%, rgba(35,23,23,0) 82%, rgba(35,23,23,1) 100%),
    url(../images/tracy-kolenchuk-deG1-ciuc6g-unsplash-1200x1500.jpeg);
}
#background2.day4 { background-color: #231717; }
#page-header.day4 h1 { color: #dee7ed; }
#page-header.day4 h1 #grayword { color: #feda3c; }
#vue-app.day4 a { color: #dee7ed; }
#vue-app.day4 a.activenav { color: #feda3c; }
#vue-app.day4 .song h3 { color: #feda3c; }
#vue-app.day4 footer li a i.fab { color: #feda3c; }
#vue-app.day4 footer li a i.fas { color: #feda3c; }


/* day 5 - 6th of month */
#vue-app.day5 {
  background-color: #0c110d;
  color: #edf8f3;
  text-shadow: 1px 1px 0 #0c110dbb;
}
#background-photo.day5 {
  background-image: 
    linear-gradient(90deg, rgba(12,17,13,1) 0%, rgba(12,17,13,0) 16%, transparent 18%, transparent 82%, rgba(12,17,13,0) 84%, rgba(12,17,13,1) 100%),
    linear-gradient(0deg,  rgba(12,17,13,1) 0%, rgba(12,17,13,0) 16%, transparent 18%, transparent 82%, rgba(12,17,13,0) 84%, rgba(12,17,13,1) 100%),
    url(../images/eugene-golovesov-efFif2psrNk-unsplash-1200x1500.jpeg);
}
#background2.day5 { background-color: #0c110d; }
#page-header.day5 h1 { color: #edf8f3; }
#page-header.day5 h1 #grayword { color: #D51B00; }
#vue-app.day5 a { color: #edf8f3; }
#vue-app.day5 a.activenav { color: #D51B00; }
#vue-app.day5 .song h3 { color: #D51B00; }
#vue-app.day5 footer li a i.fab { color: #D51B00; }
#vue-app.day5 footer li a i.fas { color: #D51B00; }


/* day 6 - 7th of month */
#vue-app.day6 {
  background-color: #34424d;
  color: #e9f5f9;
  text-shadow: 1px 1px 0 #34424dbb;
}
#background-photo.day6 {
  background-image: 
    linear-gradient(90deg, rgba(52,66,77,1) 0%, rgba(52,66,77,0) 28%, transparent 30%, transparent 98%, rgba(52,66,77,0) 99%, rgba(52,66,77,0.9) 100%),
    linear-gradient(0deg,  rgba(52,66,77,1) 0%, rgba(52,66,77,0) 28%, transparent 30%, transparent 83%, rgba(52,66,77,0) 85%, rgba(52,66,77,1) 100%),
    url(../images/conrad-ziebland-agE97zp_Xvo-unsplash-1200x1500.jpeg);
}
#background2.day6 { background-color: #34424d; }
#page-header.day6 h1 { color: #e9f5f9; }
#page-header.day6 h1 #grayword { color: #F5E6A3; }
#vue-app.day6 a { color: #e9f5f9; }
#vue-app.day6 a.activenav { color: #F5E6A3; }
#vue-app.day6 .song h3 { color: #F5E6A3; }
#vue-app.day6 footer li a i.fab { color: #F5E6A3; }
#vue-app.day6 footer li a i.fas { color: #F5E6A3; }


/* day 7 - 8th of month */
#vue-app.day7 {
  background-color: #49494b;
  color: #f5f6f8;
  text-shadow: 1px 1px 0 #49494baa;
}
#background-photo.day7 {
  background-image: 
    linear-gradient(90deg, rgba(73,73,75,1) 0%, rgba(73,73,75,0) 43%, transparent 45%, transparent 97%, rgba(73,73,75,0) 98%, rgba(73,73,75,1) 100%),
    linear-gradient(0deg,  rgba(73,73,75,1) 0%, rgba(73,73,75,0) 18%, transparent 20%, transparent 60%, rgba(73,73,75,0) 62%, rgba(73,73,75,1) 100%),
    url(../images/erika-UgYIi5GN6CU-unsplash-1200x1500.jpeg);
  position: relative;
  top: 2rem;
}
#background2.day7 { background-color: #49494b; }
#page-header.day7 h1 { color: #f5f6f8; }
#page-header.day7 h1 #grayword { color: #e4d0b4; }
#vue-app.day7 a { color: #f5f6f8; }
#vue-app.day7 a.activenav { color: #e4d0b4; }
#vue-app.day7 .song h3 { color: #e4d0b4; }
#vue-app.day7 footer li a i.fab { color: #e4d0b4; }
#vue-app.day7 footer li a i.fas { color: #e4d0b4; }


/* day 8 - 9th of month */
#vue-app.day8 {
  background-color: #000;
  color: #dfe0e1;
  text-shadow: 1px 1px 0 #020307aa;
}
#background-photo.day8 {
  background-image: 
    linear-gradient(90deg, rgba(0,0,0,1) 0%, transparent 7%,  transparent 87%, rgba(0,0,0,1) 100%),
    linear-gradient(0deg,  rgba(0,0,0,1) 0%, transparent 12%, transparent 98%, rgba(0,0,0,1) 100%),
    url(../images/patrick-hendry-rSIwsotb7Q4-unsplash-1200x1500.jpeg);
}
#background2.day8 { background-color: #000; }
#page-header.day8 h1 { color: #dfe0e1; }
#page-header.day8 h1 #grayword { color: #b39899; }
#vue-app.day8 a { color: #dfe0e1; }
#vue-app.day8 a.activenav { color: #b39899; }
#vue-app.day8 .song h3 { color: #b39899; }
#vue-app.day8 footer li a i.fab { color: #b39899; }
#vue-app.day8 footer li a i.fas { color: #b39899; }


/* day 9 - 10th of month */
#vue-app.day9 {
  background-color: #0e0b16;
  color: #ddd5c8;
  text-shadow: 1px 1px 0 #0e0b16cc;
}
#background-photo.day9 {
  background-image: 
    linear-gradient(90deg, rgba(14,11,22,1) 0%, rgba(14,11,22,0) 23%, transparent 25%, transparent 55%, rgba(14,11,22,0) 57%, rgba(14,11,22,1) 100%),
    linear-gradient(0deg,  rgba(14,11,22,1) 0%, rgba(14,11,22,0) 10%, transparent 12%, transparent 80%, rgba(14,11,22,0) 82%, rgba(14,11,22,1) 100%),
    url(../images/tati-y-adri-PjsS1lRMwsA-unsplash.jpeg);
}
#background2.day9 { background-color: #0e0b16; }
#page-header.day9 h1 { color: #ddd5c8; }
#page-header.day9 h1 #grayword { color: #b4c1a4; }
#vue-app.day9 a { color: #ddd5c8; }
#vue-app.day9 a.activenav { color: #b4c1a4; }
#vue-app.day9 .song h3 { color: #b4c1a4; }
#vue-app.day9 footer li a i.fab { color: #b4c1a4; }
#vue-app.day9 footer li a i.fas { color: #b4c1a4; }


/* day 10 - 11th of month */
#vue-app.day10 {
  background-color: #0c003e;
  color: #fcedff;
  text-shadow: 1px 1px 0 #0c003ecc;
}
#background-photo.day10 {
  background-image: 
    linear-gradient(90deg, rgba(12,0,62,1) 0%, rgba(12,0,62,0) 23%, transparent 25%, transparent 55%, rgba(12,0,62,0) 57%, rgba(12,0,62,1) 100%),
    linear-gradient(0deg,  rgba(12,0,62,1) 0%, rgba(12,0,62,0) 10%, transparent 12%, transparent 80%, rgba(12,0,62,0) 82%, rgba(12,0,62,1) 100%),
    url(../images/manos-gkikas-L0tsGE7634E-unsplash-1200.1500.jpeg);
}
#background2.day10 { background-color: #0c003e; }
#page-header.day10 h1 { color: #fcedff; }
#page-header.day10 h1 #grayword { color: #dd99d6; }
#vue-app.day10 a { color: #fcedff; }
#vue-app.day10 a.activenav { color: #dd99d6; }
#vue-app.day10 .song h3 { color: #dd99d6; }
#vue-app.day10 footer li a i.fab { color: #dd99d6; }
#vue-app.day10 footer li a i.fas { color: #dd99d6; }


/* day 11 - 12th of month */
#vue-app.day11 {
  background-color: #062f1f;
  color: #f6ecea;
  text-shadow: 1px 1px 0 #062f1f;
}
#background-photo.day11 {
  background-image: 
    linear-gradient(90deg, rgba(6,47,31,1) 0%, rgba(6,47,31,0) 15%, transparent 17%, transparent 83%, rgba(6,47,31,0) 85%, rgba(6,47,31,1) 100%),
    linear-gradient(0deg,  rgba(6,47,31,1) 0%, rgba(6,47,31,0) 15%, transparent 17%, transparent 83%, rgba(6,47,31,0) 85%, rgba(6,47,31,1) 100%),
    url(../images/sora-sagano-Dksk8szLRN0-unsplash-1200x1500.jpeg);
}
#background2.day11 { background-color: #062f1f; }
#page-header.day11 h1 { color: #f6ecea; }
#page-header.day11 h1 #grayword { color: #ffa760; }
#vue-app.day11 a { color: #f6ecea; }
#vue-app.day11 a.activenav { color: #ffa760; }
#vue-app.day11 .song h3 { color: #ffa760; }
#vue-app.day11 footer li a i.fab { color: #ffa760; }
#vue-app.day11 footer li a i.fas { color: #ffa760; }


/* day 12 - 13th of month */
#vue-app.day12 {
  background-color: #2c4c61;
  color: #ebeff1;
  text-shadow: 1px 1px 0 #2c4c6199;
}
#background-photo.day12 {
  background-image: 
    linear-gradient(90deg, rgba(44,76,97,1) 0%, rgba(44,76,97,0) 13%, transparent 15%, transparent 80%, rgba(44,76,97,0) 82%, rgba(44,76,97,1) 100%),
    linear-gradient(0deg,  rgba(44,76,97,1) 0%, rgba(44,76,97,0) 7%,  transparent 9%,  transparent 78%, rgba(44,76,97,0) 80%, rgba(44,76,97,1) 100%),
    url(../images/harald-pliessnig-j6Owh7NaQmM-unsplash-1200x1500.jpeg);
}
#background2.day12 { background-color: #2c4c61; }
#page-header.day12 h1 { color: #ebeff1; }
#page-header.day12 h1 #grayword { color: #fdbf52; }
#vue-app.day12 a { color: #ebeff1; }
#vue-app.day12 a.activenav { color: #fdbf52; }
#vue-app.day12 .song h3 { color: #fdbf52; }
#vue-app.day12 footer li a i.fab { color: #fdbf52; }
#vue-app.day12 footer li a i.fas { color: #fdbf52; }


/* day 13 - 14th of month */
#vue-app.day13 {
  background-color: #151925;
  color: #feedfb;
}
#background-photo.day13 {
  background-image: 
    linear-gradient(90deg, rgba(21,25,37,1) 0%, rgba(21,25,37,0) 15%, transparent 17%, transparent 83%, rgba(21,25,37,0) 85%, rgba(21,25,37,1) 100%),
    linear-gradient(0deg,  rgba(21,25,37,1) 0%, rgba(21,25,37,0) 20%, transparent 22%, transparent 83%, rgba(21,25,37,0) 85%, rgba(21,25,37,1) 100%),
    url(../images/shyam-4e8-KNRboTY-unsplash-1200x1500.jpeg);
}
#background2.day13 { background-color: #151925; }
#page-header.day13 h1 { color: #feedfb; }
#page-header.day13 h1 #grayword {
  color: #e788ce;
  text-shadow: 1px 1px 0 #151925aa;
}
#vue-app.day13 a { color: #feedfb; }
#vue-app.day13 a.activenav {
  color: #e788ce;
  text-shadow: 1px 1px 0 #151925aa;
}
#vue-app.day13 .song h3 {
  color: #e788ce;
  text-shadow: 1px 1px 0 #151925aa;
}
#vue-app.day13 footer li a i.fab {
  color: #e788ce;
  text-shadow: 1px 1px 0 #151925aa;
}
#vue-app.day13 footer li a i.fas {
  color: #e788ce;
  text-shadow: 1px 1px 0 #151925aa;
}


/* day 14 - 15th of month */
#vue-app.day14 {
  background-color: #060606;
  color: #e8e8f4;
  text-shadow: 1px 1px 0 #06060699;
}
#background-photo.day14 {
  background-image: 
    linear-gradient(90deg, rgba(6,6,6,1) 0%, rgba(6,6,6,0) 13%, transparent 15%, transparent 65%, rgba(6,6,6,0) 67%, rgba(6,6,6,1) 100%),
    linear-gradient(0deg,  rgba(6,6,6,1) 0%, rgba(6,6,6,0) 12%, transparent 14%, transparent 86%, rgba(6,6,6,0) 88%, rgba(6,6,6,1) 100%),
    url(../images/rosie-sun-1L71sPT5XKc-unsplash-1200x1500.jpeg);
}
#background2.day14 { background-color: #060606; }
#page-header.day14 h1 { color: #e8e8f4; }
#page-header.day14 h1 #grayword { color: #6d8a5e; }
#vue-app.day14 a { color: #e8e8f4; }
#vue-app.day14 a.activenav { color: #6d8a5e; }
#vue-app.day14 .song h3 { color: #6d8a5e; }
#vue-app.day14 footer li a i.fab { color: #6d8a5e; }
#vue-app.day14 footer li a i.fas { color: #6d8a5e; }


/* day 15 - 16th of month */
#vue-app.day15 {
  background-color: #090526;
  color: #e8e8f4;
  text-shadow: 1px 1px 0 #09052666;
}
#background-photo.day15 {
  background-image: 
    linear-gradient(90deg, rgba(9,5,38,1) 0%, rgba(9,5,38,0) 33%, transparent 35%, transparent 45%, rgba(9,5,38,0) 47%, rgba(9,5,38,1) 100%),
    linear-gradient(0deg,  rgba(9,5,38,1) 0%, rgba(9,5,38,0) 12%, transparent 14%, transparent 83%, rgba(9,5,38,0) 85%, rgba(9,5,38,1) 100%),
    url(../images/rishabh-malhotra-0YFmoNv2pTg-unsplash-1200x1500.jpeg);
}
#background2.day15 { background-color: #090526; }
#page-header.day15 h1 { color: #e8e8f4; }
#page-header.day15 h1 #grayword { color: #6790ec; }
#vue-app.day15 a { color: #e8e8f4; }
#vue-app.day15 a.activenav { color: #6790ec; }
#vue-app.day15 .song h3 { color: #6790ec; }
#vue-app.day15 footer li a i.fab { color: #6790ec; }
#vue-app.day15 footer li a i.fas { color: #6790ec; }


/* day 16 - 17th of month */
#vue-app.day16 {
  background-color: #2a3108;
  color: #feffe9;
  text-shadow: 1px 1px 0 #1d1d01aa;
  background-image: linear-gradient(90deg, rgba(28,28,2,0.3) 0%, rgba(42,49,8,0) 9%, rgba(42,49,8,0) 91%, rgba(28,28,2,0.3) 100%);
}
#background-photo.day16 {
  background-image:
    linear-gradient(90deg, rgba(42,49,8,1) 0%, rgba(42,49,8,0) 15%, transparent 17%, transparent 83%, rgba(42,49,8,0) 85%, rgba(42,49,8,1) 100%),
    linear-gradient(0deg,  rgba(42,49,8,1) 0%, rgba(42,49,8,0) 15%, transparent 17%, transparent 83%, rgba(42,49,8,0) 85%, rgba(42,49,8,1) 100%),
    url(../images/meagan-carsience-SYJXgaj-jM4-unsplash-1200x1500.jpeg);
}
#background2.day16 {
  background-color: #2a3108; 
  background-image:
    linear-gradient(90deg, rgba(28,28,2,0.3) 0%, rgba(42,49,8,0) 9%, rgba(42,49,8,0) 91%, rgba(28,28,2,0.3) 100%),
    linear-gradient(0deg,  rgba(28,28,2,0.3) 0%, rgba(42,49,8,0) 13%);
}
#page-header.day16 h1 { color: #feffe9; }
#page-header.day16 h1 #grayword { color: #f1c062; }
#vue-app.day16 a { color: #feffe9; }
#vue-app.day16 a.activenav { color: #f1c062; }
#vue-app.day16 .song h3 { color: #f1c062; }
#vue-app.day16 footer li a i.fab { color: #f1c062; }
#vue-app.day16 footer li a i.fas { color: #f1c062; }


/* day 17 - 18th of month */
#vue-app.day17 {
  background-color: #171e26;
  color: #fff4f4;
  background-image: linear-gradient(90deg, rgba(7,16,15,0.3) 0%, transparent 7%, transparent 93%, rgba(7,16,15,0.3) 100%);
}
#background-photo.day17 {
  background-image:
    linear-gradient(90deg, rgba(23,30,38,1) 0%, rgba(23,30,38,0) 13%, transparent 15%, transparent 85%, rgba(23,30,38,0) 87%, rgba(23,30,38,1) 100%),
    linear-gradient(0deg,  rgba(23,30,38,1) 0%, rgba(23,30,38,0) 12%, transparent 14%, transparent 85%, rgba(23,30,38,0) 87%, rgba(23,30,38,1) 100%),
    url(../images/nadiia-ploshchenko-Pi8jkDykKcw-unsplash-8x10.jpeg);
}
#background2.day17 { 
  background-color: #171e26;
  background-image: 
    linear-gradient(90deg, rgba(7,16,15,0.3) 0%, transparent 7%, transparent 93%, rgba(7,16,15,0.3) 100%),
    linear-gradient(0deg, rgba(7,16,15,0.3) 0%, transparent 20%);
}
#page-header.day17 h1 { 
  color: #fff4f4; 
  text-shadow: 1px 1px 0 #060f0eaa;
}
#page-header.day17 h1 #grayword { 
  color: #df231a; 
  text-shadow: 1px 1px 0 #060f0eaa;
}
#vue-app.day17 a { color: #fff4f4; }
#vue-app.day17 nav a { text-shadow: 1px 1px 0 #060f0eaa; }
#vue-app.day17 a.activenav { color: #df231a; }
#vue-app.day17 .song h3 { 
  color: #df231a; 
  text-shadow: 1px 1px 0 #060f0eaa;
}
#vue-app.day17 footer li a i.fab { 
  color: #df231a; 
  text-shadow: 1px 1px 0 #060f0eaa;
}
#vue-app.day17 footer li a i.fas { 
  color: #df231a; 
  text-shadow: 1px 1px 0 #060f0eaa;
}


/* day 18 - 19th of month */
#vue-app.day18 {
  background-color: #0a171f;
  color: #ebf7ff;
  text-shadow: 1px 1px 0 #0a171f88;
}
#background-photo.day18 {
  background-image:
    linear-gradient(90deg, rgba(10,23,31,1) 0%, rgba(10,23,31,0) 15%, transparent 17%, transparent 83%, rgba(10,23,31,0) 85%, rgba(10,23,31,1) 100%),
    linear-gradient(0deg,  rgba(10,23,31,1) 0%, rgba(10,23,31,0) 15%, transparent 17%, transparent 83%, rgba(10,23,31,0) 85%, rgba(10,23,31,1) 100%),
    url(../images/pete-nuij-z4aynATRl2Y-unsplash-1200x1500.jpeg);
}
#background2.day18 {
  background-color: #0a171f; 
}
#page-header.day18 h1 { color: #ebf7ff; }
#page-header.day18 h1 #grayword { color: #92cbe4; }
#vue-app.day18 a { color: #ebf7ff; }
#vue-app.day18 a.activenav { color: #92cbe4; }
#vue-app.day18 .song h3 { color: #92cbe4; }
#vue-app.day18 footer li a i.fab { color: #92cbe4; }
#vue-app.day18 footer li a i.fas { color: #92cbe4; }


/* day 19 - 20th of month */
#vue-app.day19 {
  background-color: #002c41;
  color: #e1ddd1;
  text-shadow: 1px 1px 0 #07252f99;
  background-image: linear-gradient(90deg, rgba(13,46,55,0.4) 0%, rgba(13,46,55,0) 7%, transparent 9%, transparent 91%, rgba(13,46,55,0) 93%, rgba(13,46,55,0.4) 100%);
}
#background-photo.day19 {
  background-image:
    linear-gradient(90deg, rgba(0,44,65,1) 0%, rgba(0,44,65,0) 28%, transparent 30%, transparent 66%, rgba(0,44,65,0) 68%, rgba(0,44,65,1) 100%),
    linear-gradient(0deg,  rgba(0,44,65,1) 0%, rgba(0,44,65,0) 18%, transparent 20%, transparent 78%, rgba(0,44,65,0) 80%, rgba(0,44,65,1) 100%),
    url(../images/benjamin-suter-CgoRzWX4CDg-unsplash-1200x1500.jpeg);
}
#background2.day19 {
  background-color: #002c41; 
  background-image: linear-gradient(90deg, rgba(13,46,55,0.4) 0%, rgba(13,46,55,0) 7%, transparent 9%, transparent 91%, rgba(13,46,55,0) 93%, rgba(13,46,55,0.4) 100%);
}
#page-header.day19 h1 { color: #e1ddd1; }
#page-header.day19 h1 #grayword { 
  color: #51d0c9; 
  text-shadow: 1px 1px 0 #07252fdd;
}
#vue-app.day19 a { color: #e1ddd1; }
#vue-app.day19 a.activenav { 
  color: #51d0c9; 
  text-shadow: 1px 1px 0 #07252fdd;
}
#vue-app.day19 .song h3 { 
  color: #51d0c9; 
  text-shadow: 1px 1px 0 #07252fdd;
}
#vue-app.day19 footer li a i.fab { 
  color: #51d0c9; 
  text-shadow: 1px 1px 0 #07252fdd;
}
#vue-app.day19 footer li a i.fas { 
  color: #51d0c9; 
  text-shadow: 1px 1px 0 #07252fdd;
}


/* day 20 - 21st of month */
#vue-app.day20 {
  background-color: #100509;
  color: #f9f8f8;
  text-shadow: 1px 1px 0 #10050944;
  background-image: linear-gradient(90deg, rgba(14,4,3,0.5) 0%, rgba(16,5,9,0) 9%, transparent 11%, transparent 89%, rgba(16,5,9,0) 91%, rgba(14,4,3,0.5) 100%);
}
#background-photo.day20 {
  background-image:
    linear-gradient(90deg, rgba(16,5,9,1) 0%, rgba(16,5,9,0) 15%, transparent 17%, transparent 73%, rgba(16,5,9,0) 75%, rgba(16,5,9,1) 100%),
    linear-gradient(0deg,  rgba(16,5,9,1) 0%, rgba(16,5,9,0) 25%, transparent 27%, transparent 73%, rgba(16,5,9,0) 75%, rgba(16,5,9,1) 100%),
    url(../images/meric-dagli-2i-JP4tVAp8-unsplash-1200x1500.jpeg);
}
#background2.day20 {
  background-color: #100509; 
  background-image: linear-gradient(90deg, rgba(14,4,3,0.5) 0%, rgba(16,5,9,0) 9%, transparent 11%, transparent 89%, rgba(16,5,9,0) 91%, rgba(14,4,3,0.5) 100%);
}
#page-header.day20 h1 { 
  color: #f9f8f8; 
  text-shadow: 1px 1px 0 #100509aa;
}
#page-header.day20 h1 #grayword { 
  color: #f9b3b3;
  text-shadow: 1px 1px 0 #100509aa;
}
#vue-app.day20 a { color: #f9f8f8; }
#vue-app.day20 a.activenav { 
  color: #f9b3b3; 
  text-shadow: 1px 1px 0 #100509aa;
}
#vue-app.day20 .song h3 { 
  color: #f9b3b3; 
  text-shadow: 1px 1px 0 #100509aa;
}
#vue-app.day20 footer li a i.fab { 
  color: #f9b3b3; 
  text-shadow: 1px 1px 0 #100509aa;
}
#vue-app.day20 footer li a i.fas { 
  color: #f9b3b3; 
  text-shadow: 1px 1px 0 #100509aa;
}


/* day 21 - 22nd of month */
#vue-app.day21 {
  background-color: #151515;
  color: #f5f6f6;
  background-image: linear-gradient(90deg, rgba(51,22,22,0.2) 0%, rgba(21,21,21,0) 9%, transparent 11%, transparent 89%, rgba(21,21,21,0) 91%, rgba(51,22,22,0.2) 100%);
}
#background-photo.day21 {
  background-image:
    linear-gradient(90deg, rgba(21,21,21,1) 0%, rgba(21,21,21,0.1) 99%, rgba(21,21,21,0.9) 100%),
    linear-gradient(0deg,  rgba(21,21,21,1) 0%, rgba(21,21,21,0) 20%, transparent 21%, transparent 79%, rgba(21,21,21,0) 80%, rgba(21,21,21,1) 100%),
    url(../images/engin-akyurt-8xpl7fkyolk-unsplash-1200x1500.jpeg);
    background-blend-mode: normal;
}
#background2.day21 {
  background-color: #151515; 
  background-image: linear-gradient(90deg, rgba(51,22,22,0.2) 0%, rgba(21,21,21,0) 9%, transparent 11%, transparent 89%, rgba(21,21,21,0) 91%, rgba(51,22,22,0.2) 100%);
}
#page-header.day21 h1 { color: #f5f6f6; }
#page-header.day21 h1 #grayword { color: #f1bcbc; }
#vue-app.day21 a { color: #f5f6f6; }
#vue-app.day21 a.activenav { color: #f1bcbc; }
#vue-app.day21 .song h3 { color: #f1bcbc; }
#vue-app.day21 footer li a i.fab { color: #f1bcbc; }
#vue-app.day21 footer li a i.fas { color: #f1bcbc; }


/* day 22 - 23rd of month */
#vue-app.day22 {
  background-color: #060c18;
  color: #fffdf1;
  text-shadow: 1px 1px 0 #060c18aa;
  background-image: linear-gradient(90deg, rgba(0,9,16,0.2) 0%, rgba(6,12,24,0) 9%, transparent 11%, transparent 89%, rgba(6,12,24,0) 91%, rgba(0,9,16,0.2) 100%);
}
#background-photo.day22 {
  background-image:
    linear-gradient(90deg, rgba(6,12,24,1) 0%, rgba(6,12,24,0) 35%, transparent 37%, transparent 63%, rgba(6,12,24,0) 65%, rgba(6,12,24,1) 100%),
    linear-gradient(0deg,  rgba(6,12,24,1) 0%, rgba(6,12,24,0) 35%, transparent 37%, transparent 83%, rgba(6,12,24,0) 85%, rgba(6,12,24,1) 100%),
    url(../images/artem-kniaz-ntdmcvXwp4c-unsplash-1200x1500.jpeg);
}
#background2.day22 {
  background-color: #060c18; 
  background-image: linear-gradient(90deg, rgba(0,9,16,0.2) 0%, rgba(6,12,24,0) 9%, transparent 11%, transparent 89%, rgba(6,12,24,0) 91%, rgba(0,9,16,0.2) 100%);
}
#page-header.day22 h1 { color: #fffdf1; }
#page-header.day22 h1 #grayword { color: #a787dc; }
#vue-app.day22 a { color: #fffdf1; }
#vue-app.day22 a.activenav { color: #a787dc; }
#vue-app.day22 .song h3 { color: #a787dc; }
#vue-app.day22 footer li a i.fab { color: #a787dc; }
#vue-app.day22 footer li a i.fas { color: #a787dc; }


/* day 23 - 24th of month */
#vue-app.day23 {
  background-color: #091717;
  color: #fffdf1;
  text-shadow: 1px 1px 0 #061208aa;
  background-image: linear-gradient(90deg, rgba(6,18,8,0.2) 0%, rgba(9,23,23,0) 9%, transparent 11%, transparent 89%, rgba(9,23,23,0) 91%, rgba(6,18,8,0.2) 100%);
}
#background-photo.day23 {
  background-image:
  linear-gradient(90deg, rgba(9,23,23,1) 0%, rgba(9,23,23,0) 20%, transparent 22%, transparent 65%, rgba(9,23,23,0) 68%, rgba(9,23,23,1) 100%),
  linear-gradient(0deg,  rgba(9,23,23,1) 0%, rgba(9,23,23,0) 15%, transparent 17%, transparent 78%, rgba(9,23,23,0) 80%, rgba(9,23,23,1) 100%),
  url(../images/christina-deravedisian-n-mCFUKrVRg-unsplash-1200x1500.jpeg);
}
#background2.day23 {
  background-color: #091717; 
  background-image: linear-gradient(90deg, rgba(6,18,8,0.2) 0%, rgba(9,23,23,0) 9%, transparent 11%, transparent 89%, rgba(9,23,23,0) 91%, rgba(6,18,8,0.2) 100%);
}
#page-header.day23 h1 { color: #fffdf1; }
#page-header.day23 h1 #grayword { color: #a57cbe; }
#vue-app.day23 a { color: #fffdf1; }
#vue-app.day23 a.activenav { color: #a57cbe; }
#vue-app.day23 .song h3 { color: #a57cbe; }
#vue-app.day23 footer li a i.fab { color: #a57cbe; }
#vue-app.day23 footer li a i.fas { color: #a57cbe; }


/* day 24 - 25th of month */
#vue-app.day24 {
  background-color: #131c21;
  color: #fffdf1;
  text-shadow: 1px 1px 0 #131c21aa;
  background-image: linear-gradient(90deg, rgba(5,9,10,0.1) 0%, rgba(19,28,33,0) 9%, transparent 11%, transparent 89%, rgba(19,28,33,0) 91%, rgba(5,9,10,0.1) 100%);
}
#background-photo.day24 {
  background-image:
  linear-gradient(90deg, rgba(19,28,33,1) 0%, rgba(19,28,33,0) 18%, transparent 19%, transparent 80%, rgba(19,28,33,0) 82%, rgba(19,28,33,1) 100%),
  linear-gradient(0deg,  rgba(19,28,33,1) 0%, rgba(19,28,33,0) 15%, transparent 17%, transparent 78%, rgba(19,28,33,0) 80%, rgba(19,28,33,1) 100%),
  url(../images/federico-bottos-GCTeIZMXk-k-unsplash-1200x1500.jpeg);
}
#background2.day24 {
  background-color: #131c21; 
  background-image: linear-gradient(90deg, rgba(5,9,10,0.1) 0%, rgba(19,28,33,0) 9%, transparent 11%, transparent 89%, rgba(19,28,33,0) 91%, rgba(5,9,10,0.1) 100%);
}
#page-header.day24 h1 { color: #fffdf1; }
#page-header.day24 h1 #grayword { color: #a8b683; }
#vue-app.day24 a { color: #fffdf1; }
#vue-app.day24 a.activenav { color: #a8b683; }
#vue-app.day24 .song h3 { color: #a8b683; }
#vue-app.day24 footer li a i.fab { color: #a8b683; }
#vue-app.day24 footer li a i.fas { color: #a8b683; }


/* day 25 - 26th of month */
#vue-app.day25 {
  background-color: #08090d;
  color: #fffdf8;
  text-shadow: 1px 1px 0 #08090daa;
  background-image: linear-gradient(90deg, rgba(24,23,54,0.3) 0%, rgba(8,9,13,0) 9%, transparent 10%, transparent 90%, rgba(8,9,13,0) 91%, rgba(24,23,54,0.3) 100%);
}
#background-photo.day25 {
  background-image:
  linear-gradient(90deg, rgba(8,9,13,1) 0%, rgba(8,9,13,0) 15%, transparent 16%, transparent 71%, rgba(8,9,13,0) 72%, rgba(8,9,13,1) 100%),
  linear-gradient(0deg,  rgba(8,9,13,1) 0%, rgba(8,9,13,0) 15%, transparent 16%, transparent 88%, rgba(8,9,13,0) 89%, rgba(8,9,13,1) 100%),
  url(../images/ashim-d-silva-tm1yNH-qZ74-unsplash-1200x1500.jpeg);
}
#background2.day25 {
  background-color: #08090d; 
  background-image: linear-gradient(90deg, rgba(24,23,54,0.2) 0%, rgba(8,9,13,0) 9%, transparent 11%, transparent 89%, rgba(8,9,13,0) 91%, rgba(24,23,54,0.2) 100%);
}
#page-header.day25 h1 { color: #fffdf8; }
#page-header.day25 h1 #grayword { color: #e7c957; }
#vue-app.day25 a { color: #fffdf8; }
#vue-app.day25 a.activenav { color: #e7c957; }
#vue-app.day25 .song h3 { color: #e7c957; }
#vue-app.day25 footer li a i.fab { color: #e7c957; }
#vue-app.day25 footer li a i.fas { color: #e7c957; }


/* day 26 - 27th of month */
#vue-app.day26 {
  background-color: #040f11;
  color: #f3f0e1;
  text-shadow: 1px 1px 0 #040f1199;
}
#background-photo.day26 {
  background-image:
  linear-gradient(90deg, rgba(4,16,17,1) 0%, rgba(4,16,17,0) 2%,  transparent 3%,  transparent 97%, rgba(4,16,17,0) 98%, rgba(4,16,17,1) 100%),
  linear-gradient(0deg,  rgba(4,16,17,1) 0%, rgba(4,16,17,0) 12%, transparent 13%, transparent 91%, rgba(4,16,17,0) 92%, rgba(4,16,17,1) 100%),
  url(../images/angelo-abear-gVKruYiwk_0-unsplash-1200x1500.jpeg);
}
#background2.day26 {
  background-color: #040f11; 
}
#page-header.day26 h1 { color: #f3f0e1; }
#page-header.day26 h1 #grayword { color: #ecd07d; }
#vue-app.day26 a { color: #f3f0e1; }
#vue-app.day26 a.activenav { color: #ecd07d; }
#vue-app.day26 .song h3 { color: #ecd07d; }
#vue-app.day26 footer li a i.fab { color: #ecd07d; }
#vue-app.day26 footer li a i.fas { color: #ecd07d; }


/* day 27 - 28th of month */
#vue-app.day27 {
  background-color: #131210;
  color: #edebe1;
  text-shadow: 1px 1px 0 #131210aa;
}
#background-photo.day27 {
  background-image:
  linear-gradient(90deg, rgba(19,18,16,1) 0%, rgba(19,18,16,0) 12%, transparent 13%, transparent 91%, rgba(19,18,16,0) 92%, rgba(19,18,16,1) 100%),
  linear-gradient(0deg,  rgba(19,18,16,1) 0%, rgba(19,18,16,0) 12%, transparent 13%, transparent 91%, rgba(19,18,16,0) 92%, rgba(19,18,16,1) 100%),
  url(../images/tina-bach-_yo88QKC0hI-unsplash-1200x1500.jpeg);
}
#background2.day27 {
  background-color: #131210; 
}
#page-header.day27 h1 { color: #edebe1; }
#page-header.day27 h1 #grayword { color: #e6ab00; }
#vue-app.day27 a { color: #edebe1; }
#vue-app.day27 a.activenav { color: #e6ab00; }
#vue-app.day27 .song h3 { color: #e6ab00; }
#vue-app.day27 footer li a i.fab { color: #e6ab00; }
#vue-app.day27 footer li a i.fas { color: #e6ab00; }


/* day 28 - 29th of month - happy leap year */
#vue-app.day28 {
  background-color: #010204;
  color: #fbf8f1;
  text-shadow: 1px 1px 0 #010204aa;
}
#background-photo.day28 {
  background-image:
  linear-gradient(90deg, rgba(1,2,4,1) 0%, rgba(1,2,4,0) 12%, transparent 13%, transparent 78%, rgba(1,2,4,0) 82%, rgba(1,2,4,1) 100%),
  linear-gradient(0deg,  rgba(1,2,4,1) 0%, rgba(1,2,4,0) 12%, transparent 13%, transparent 92%, rgba(1,2,4,0) 93%, rgba(1,2,4,1) 100%),
  url(../images/michael-dam-1xpnPZJJHuM-unsplash-1200x1500.jpeg);
}
#background2.day28 {
  background-color: #010204; 
}
#page-header.day28 h1 { color: #fbf8f1; }
#page-header.day28 h1 #grayword { 
  color: #d4c999;
  text-shadow: 1px 1px 0 #010204cc;
}
#vue-app.day28 a { color: #fbf8f1; }
#vue-app.day28 a.activenav { 
  color: #d4c999;
  text-shadow: 1px 1px 0 #010204cc; 
}
#vue-app.day28 .song h3 { 
  color: #d4c999; 
  text-shadow: 1px 1px 0 #010204cc;
}
#vue-app.day28 footer li a i.fab { 
  color: #d4c999; 
  text-shadow: 1px 1px 0 #010204cc;
}
#vue-app.day28 footer li a i.fas { 
  color: #d4c999; 
  text-shadow: 1px 1px 0 #010204cc;
}


/* day 29 - 30th of month - happy end of september, etc */
#vue-app.day29 {
  background-color: #4e5067;
  color: #fefcf8;
  text-shadow: 1px 1px 0 #4e5067ee;
}
#background-photo.day29 {
  background-image:
  linear-gradient(90deg, rgba(78,80,103,1) 0%, rgba(78,80,103,0) 1%,  transparent 2%,  transparent 98%, rgba(78,80,103,0) 99%, rgba(78,80,103,1) 100%),
  linear-gradient(0deg,  rgba(78,80,103,1) 0%, rgba(78,80,103,0) 17%, transparent 18%, transparent 72%, rgba(78,80,103,0) 74%, rgba(78,80,103,1) 100%),
  url(../images/nadiia-ploshchenko-ZxXrAo8nB5g-unsplash-1200x1500.jpeg);
}
#background2.day29 {
  background-color: #4e5067; 
}
#page-header.day29 h1 { color: #fefcf8; }
#page-header.day29 h1 #grayword { color: #f9c6a7; }
#vue-app.day29 a { color: #fefcf8; }
#vue-app.day29 a.activenav { color: #f9c6a7; }
#vue-app.day29 .song h3 { color: #f9c6a7; }
#vue-app.day29 footer li a i.fab { color: #f9c6a7; }
#vue-app.day29 footer li a i.fas { color: #f9c6a7; }


/* day 30 - 31th of month - happy new year errbuddy */
#vue-app.day30 {
  background-color: #535b68;
  color: #fefcf8;
  text-shadow: 1px 1px 0 #343d4499;
  background-image: linear-gradient(90deg, rgba(176,167,152,0.05) 0%, rgba(83,91,104,0) 9%, transparent 10%, transparent 90%, rgba(83,91,104,0) 91%, rgba(176,167,152,0.05) 100%);
}
#background-photo.day30 {
  background-image:
  linear-gradient(90deg, rgba(83,91,104,1) 0%, rgba(83,91,104,0) 16%, transparent 18%, transparent 62%, rgba(83,91,104,0) 63%, rgba(83,91,104,1) 100%),
  linear-gradient(0deg,  rgba(83,91,104,1) 0%, rgba(83,91,104,0) 12%, transparent 13%, transparent 86%, rgba(83,91,104,0) 87%, rgba(83,91,104,1) 100%),
  url(../images/jeremy-bishop-GgP4puyQ_zM-unsplash-1200x1500.jpeg);
}
#background2.day30 {
  background-color: #535b68; 
  background-image: linear-gradient(90deg, rgba(176,167,152,0.05) 0%, rgba(83,91,104,0) 9%, transparent 10%, transparent 90%, rgba(83,91,104,0) 91%, rgba(176,167,152,0.05) 100%);
}
#page-header.day30 h1 { color: #fefcf8; }
#page-header.day30 h1 #grayword { color: #efdcba; }
#vue-app.day30 a { color: #fefcf8; }
#vue-app.day30 a.activenav { color: #efdcba; }
#vue-app.day30 .song h3 { color: #efdcba; }
#vue-app.day30 footer li a i.fab { color: #efdcba; }
#vue-app.day30 footer li a i.fas { color: #efdcba; }



/* responsive style overrides */

/* When close to background image width, turn off outside gradients. Not every day has 'em. */
@media screen and (max-width: 1450px) {
  #vue-app.day12     { background-image: none; }
  #background2.day12 { background-image: none; }
  #vue-app.day16     { background-image: none; }
  #background2.day16 { background-image: none; }
  #vue-app.day17     { background-image: none; }
  #background2.day17 { background-image: none; }
  #vue-app.day19     { background-image: none; }
  #background2.day19 { background-image: none; }
  #vue-app.day20     { background-image: none; }
  #background2.day20 { background-image: none; }
  #vue-app.day21     { background-image: none; }
  #background2.day21 { background-image: none; }
  #vue-app.day22     { background-image: none; }
  #background2.day22 { background-image: none; }
  #vue-app.day23     { background-image: none; }
  #background2.day23 { background-image: none; }
  #vue-app.day24     { background-image: none; }
  #background2.day24 { background-image: none; }
  #vue-app.day25     { background-image: none; }
  #background2.day25 { background-image: none; }
  #vue-app.day30     { background-image: none; }
  #background2.day30 { background-image: none; }
}

/* gradually shrink the background photo, 5% each time */

@media screen and (max-width: 1200px) {
  /* background photo .95 original width & height */
  #background-photo {
    width: 1140px;
    height: 1425px;
  }
}

@media screen and (max-width: 1150px) {
  /* .90 */
  #background-photo {
    width: 1080px;
    height: 1350px;
  }
}

@media screen and (max-width: 1090px) {
  /* .85 */
  #background-photo {
    width: 1020px;
    height: 1275px;
  }
}

@media screen and (max-width: 1030px) {
  /* .80 */
  #background-photo {
    width: 960px;
    height: 1200px;
  }
}

@media screen and (max-width: 970px) {
  /* .75 */
  #background-photo {
    width: 900px;
    height: 1125px;
  }
}

@media screen and (max-width: 910px) {
  /* .70 */
  #background-photo {
    width: 840px;
    height: 1050px;
  }

  /* less top margin on the footer */
  footer { margin-top: 2rem; }
}

@media screen and (max-width: 850px) {
  /* .65 */
  #background-photo {
    width: 780px;
    height: 975px;
  }
  /* stack footer items vertically lest they wrap weird */
  footer ul {
    display: block;
  }
}

@media screen and (max-width: 790px) {
  /* .60 */
  #background-photo {
    width: 720px;
    height: 900px;
  }
}

@media screen and (max-width: 730px) {
  /* .55 */
  #background-photo {
    width: 660px;
    height: 825px;
  }
}

@media screen and (max-width: 670px) {
  /* .50 */
  #background-photo {
    width: 600px;
    height: 750px;
  }

  /* shrink the header and links */
  #page-header { margin-bottom: 4rem; }
  #page-header h1 { 
    font: 3rem/3.4rem 'poppinsmedium', serif; 
    margin-bottom: 2rem;
  }
  #page-header nav li { padding-right: 1em; }
  #page-header nav li a { font: 1.2rem/1.6rem 'poppinsmedium', serif; }

  /* smaller song titles and descriptions, no larger first cap */
  .song h3 { font: 1.2rem/1.8rem 'poppinsmedium', serif; }
  .song h3::first-letter { 
    font: 1.4rem/1.8rem 'poppinsmedium', serif;
    padding-top: none;
    float: none;
    letter-spacing: normal;
  }
  .song p { font: 1.1rem/1.6rem 'poppinsregular', serif; }
  p { font: 1.1rem/1.6rem 'poppinsregular', serif; }
}

@media screen and (max-width: 610px) {
  /* .45 width */
  #background-photo {
    width: 540px;
    height: 675px;
  }

  /* less top margin on the footer */
  footer { margin-top: 1.2rem; }
}

@media screen and (max-width: 550px) {
  /* .40 width */
  #background-photo {
    width: 480px;
    height: 600px;
  }
}

@media screen and (max-width: 490px) {
  /* .35 width */
  #background-photo {
    width: 420px;
    height: 525px;
  }

  /* let's keep the page title on one line */
  #page-header { margin-bottom: 3rem; }
  #page-header h1 { 
    font: 2rem/2.4rem 'poppinsmedium', serif; 
    margin-bottom: 1.2rem;
  }

  /* close up the links a little */
  #page-header nav li { padding-right: 0.5em; }
}

@media screen and (max-width: 430px) {
  /* .30 width web browsers on teensy phones are a mistake I say */
  #grid-vessel { padding: 5%; }
  #background-photo {
    width: 360px;
    height: 450px;
  }

  /* shrinky-link */
  #page-header nav li a { font: 1rem/1.3rem 'poppinsmedium', serif; }

  /* smaller text, no initial cap */
  body { font: 1.1rem/1.6rem 'poppinsmedium', serif; }
  p.intro::first-letter {
    font: 1rem/1.3rem 'poppinsmedium', serif;
    float: none;
    letter-spacing: normal;
  }

    /* smaller song titles */
    .song h3 { font: 1.1rem/1.8rem 'poppinsmedium', serif; }
  }

@media screen and (max-width: 370px) {
  /* .25 width */
  #background-photo {
    width: 300px;
    height: 375px;
  }
}