lilyringring/index.html

## index.html

  <link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,500,700,900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Mali&display=swap" rel="stylesheet">

   <div id='roof'>
    <div id='logo_box'>
      <div id='advent_logo'><img src="http://www.kitjenson.com/christmas_advent/main_logo.png" alt="A song a day this h0liday"></div>
      <p id='top_text'>Below is an advent calendar to help you celebrate the season a little bit each day. Be sure to come back daily to see what's new!</p>
    </div>
  </div>
  <div id='roof_base'><div id='todays_date'>December <span>1</span>, 2020</div></div>
  <div id='advent_house'></div>
  <div id='south_lawn'>
    <p id='south_lawn_text'>Merry Christmas!
      <span>Built lovingly in 2020 by <a href="http://www.kitjenson.com">Kit Jenson</a> with HTML, CSS, & Javascript.</span>
    </p>

  </div>
  <div id='snow_box'></div>

  <div id='the_days_goods'>
    <div id='goods_content'>
      <h1></h1>
      <iframe placeholder="Loading..." src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <p></p>
    </div>

    <div id='close_goods'>&times;</div>
  </div>
  <div id='helpful_info'>
    <ul>
      <li>Ctrl/Cmd+click to open window past today's date</li>
      <li>Double-click to close all windows</li>
    </ul>
  </div>

  <script>
  const songs = [
    one={
      title: "It's Beginning to Look a Lot Like Christmas",
      video_id: "WaNwEkCeZrE",
      blurb: "A popular belief in Yarmouth, Nova Scotia, holds that Willson wrote the song while staying in Yarmouth's Grand Hotel. The song makes reference to a 'tree in the Grand Hotel, one in the park as well...'; the park being Frost Park, directly across the road from the Grand Hotel, which still operates in a newer building on the same site as the old hotel.",
      icon: "https://media2.giphy.com/media/gNke2UrUTopOg/giphy.gif?cid=ecf05e47kzabsxmapxvutn086fhubq43xcozgof0evc2h6ra&rid=giphy.gif",
    },
    two={
      title: "Mary, Did You Know?",
      video_id: "ifCWN5pJGIE",
      blurb: "Some criticize it for what they perceive as a lack of scriptural or theological depth. For example, Lutheran writer Holly Scheer, in addressing the rhetorical-question title of the song writes that those familiar with 'the biblical account of Christ’s conception and birth shouldn’t need to ask if Mary knew, because the Bible plainly tells us she did.' On the other hand the Roman Catholic author Karl Erickson implored people to praise 'Mary, Did You Know?' as a 'beautiful expression of God’s love for all of us' and responded to criticism of the piece, stating that 'Mary, Did You Know is a song and not a theological essay.'",
      icon: "https://media2.giphy.com/media/m3BSyICMtAfra/giphy.gif?cid=ecf05e47df4a9d1965f4b43f6801b97fdb055dbf345ca207&rid=giphy.gif",
    },
    three={
      title: "It's the Most Wonderful Time of the Year",
      video_id: "SFGC_YgeQ5w",
      blurb: "The song is a celebration and description of activities associated with the Christmas season, focusing primarily on get-togethers between friends and families. Among the activities included in the song is the telling of 'scary ghost stories,' a Victorian Christmas tradition that has mostly fallen into disuse, but survives in the seasonal popularity of numerous adaptations of Charles Dickens' A Christmas Carol. Other activities mentioned include hosting parties, spontaneous visits from friends, universal social gaiety, spending time with loved ones, sledding for children, roasting marshmallows, sharing stories about previous Christmases, and singing Christmas carols in winter weather.",
      icon: "https://media0.giphy.com/media/xULW8DoK3l8siZT2JW/giphy.gif?cid=ecf05e476141355839ddd95e880d66ee904187304e15b105&rid=giphy.gif",
    },
    four={
      title: "Angels We Have Heard On High",
      video_id: "PrLoWt2tfqg",
      blurb: "Angels We Have Heard on High is a Christmas carol with the lyrics written by James Chadwick, Bishop of Hexham and Newcastle, to the music from a French song called Les Anges Dans Nos Campagnes. The music is the same as the original song, though Chadwick's lyrics albeit unique and original are clearly derived and inspired, and in parts a loose translation. The song's subject is the birth of Jesus Christ narrated in the Gospel of Luke, specifically the scene in which shepherds outside Bethlehem encounter a multitude of angels singing and praising the newborn child.",
      icon: "https://media0.giphy.com/media/sRHYw4VwrFPEDWn2a9/giphy.gif?cid=ecf05e47j4tduifkc1zc4nu0c36ka3zdtctx636l9m2iwlxv&rid=giphy.gif",
    },
    five={
      title: "Rudolph The Red-Nosed Reindeer",
      video_id: "c9ps42Frh6Y",
      blurb: "Popularly known as 'Santa's ninth reindeer', is a fabled reindeer created by Robert Lewis May. Rudolph is usually depicted as the lead reindeer pulling Santa's sleigh on Christmas Eve, though he is a young buck who has only adolescent antlers and a glowing red nose. Though he receives scrutiny for it, the luminosity of his nose is so great that it illuminates the team's path through harsh winter weather. Rudolph first appeared in a 1939 booklet written by Robert L. May and published by Montgomery Ward, the department store.",
      icon: "https://media1.giphy.com/media/bxJRigovhEPhC/giphy.gif?cid=ecf05e47cnkwwxdlwuj91jidc7c15nq518lpgwt9d7yosr3q&rid=giphy.gif",
    },
    six={
      title: "The Little Drummer Boy",
      video_id: "_6p5icEYBus",
      blurb: "A popular Christmas song written by the American classical music composer and teacher Katherine Kennicott Davis in 1941. First recorded in 1951 by the Trapp Family Singers, the song was further popularized by a 1958 recording by the Harry Simeone Chorale; the Simeone version was re-released successfully for several years and the song has been recorded many times since.",
      icon: "https://media1.giphy.com/media/Pk9MbQukhKhxKvuTDY/giphy.gif?cid=ecf05e47mrhm0ry8x8mo4vcnw4msdm8qgstdx3u1xw2n5vyv&rid=giphy.gif",
    },
    seven={
      title: "Frosty the Snowman",
      video_id: "vjscH2WBWjw",
      blurb: "Written by Walter 'Jack' Rollins and Steve Nelson, and first recorded by Gene Autry and the Cass County Boys in 1950 and later recorded by Jimmy Durante, releasing it as a single. It was written after the success of Autry's recording of 'Rudolph the Red-Nosed Reindeer' the previous year; Rollins and Nelson shipped the new song to Autry, who recorded 'Frosty' in search of another seasonal hit. Like 'Rudolph', 'Frosty' was subsequently adapted to other media including a popular television special by Rankin/Bass Productions (formerly known as Videocraft International), Frosty the Snowman.",
      icon: "https://media0.giphy.com/media/l4JzdolOiRAkrNcru/giphy.gif?cid=ecf05e47neyek4ee25a9rmb7pk0cqk5ndmdkf3w7ap2o3zk2&rid=giphy.gif",
    },
    eight={
      title: "Do You Hear What I Hear?",
      video_id: "Aq55N3777NI",
      blurb: "Written in October 1962, with lyrics by Noel Regney and music by Gloria Shayne Baker. The pair, married at the time, wrote it as a plea for peace during the Cuban Missile Crisis. Regney had been invited by a record producer to write a Christmas song, but he was hesitant due to the commercialism of the Christmas holiday. It has sold tens of millions of copies and has been covered by hundreds of artists.",
      icon: "https://media4.giphy.com/media/dejmNXDWTU7gmy2Y0N/giphy.gif?cid=ecf05e472111d8wdacx70nccshi79aos78jv4rsjbvmt9dg0&rid=giphy.gif",
    },
    nine={
      title: "Jingle Bells",
      video_id: "hLf0-lro8X8",
      blurb: "Although originally intended for the Thanksgiving season, and having no connection to Christmas, it became associated with Christmas music and the holiday season in general decades after it was first performed on Washington Street in Boston in 1857. Some area choirs adopted it as part of their repertoire in the 1860s and 1870s, and it was featured in a variety of parlor song and college anthologies in the 1880s. It was first recorded in 1889 on an Edison cylinder.",
      icon: "https://media1.giphy.com/media/l2YWwYchqnNv9DTAQ/giphy.gif?cid=ecf05e47e520c7b0a214ebb8c6e963b5fdc30c7492e3caee&rid=giphy.gif",
    },
    ten={
      title: "God Rest Ye Merry Gentlemen",
      video_id: "ZlsJD8RlhbI",
      blurb: "It is one of the oldest extant carols, dated to the 16th century or earlier. The earliest known printed edition of the carol is in a broadsheet dated to c. 1760. The traditional English melody is in the minor mode; the earliest printed edition of the melody appears to be in a parody, in the 1829 Facetiae of William Hone. It had been traditional and associated with the carol since at least the mid-18th century, when it was recorded by James Nares under the title 'The Old Christmas Carol'.",
      icon: "https://media1.giphy.com/media/zjLFUJrA34LyU/giphy.gif?cid=ecf05e470df340e3a622938a1402c0a32810ead9eb8c9ba2&rid=giphy.gif",
    },
    eleven={
      title: "Have Yourself A Merry Little Christmas",
      video_id: "CreWsnhQwzY?start=40",
      blurb: "Introduced by Judy Garland in the 1944 MGM musical Meet Me in St. Louis. Frank Sinatra later recorded a version with modified lyrics. In 2007, ASCAP ranked 'Have Yourself a Merry Little Christmas' the third most performed Christmas song during the preceding five years that had been written by ASCAP members. In 2004 it finished at No. 76 in AFI's 100 Years...100 Songs rankings of the top tunes in American cinema.",
      icon: "https://media4.giphy.com/media/vSLIADRSTBuSI/giphy.gif?cid=ecf05e470fb1881353058faac3d0964709c047416a901757&rid=giphy.gif",
    },
    twelve={
      title: "Away In a Manger",
      video_id: "Rl1Kq8bGLfI?start=30",
      blurb: "First published in the late nineteenth century and used widely throughout the English-speaking world. In Britain, it is one of the most popular carols; a 1996 Gallup Poll ranked it joint second. Although it was long claimed to be the work of German religious reformer Martin Luther, the carol is now thought to be wholly American in origin.",
      icon: "https://media1.giphy.com/media/1KN12xnXumlvq/giphy.gif?cid=ecf05e479af981aea23d628303b29ac80cf04dc83ddb131f&rid=giphy.gif",
    },
    thirteen={
      title: "I'll Be Home For Christmas",
      video_id: "igScPXNahf0",
      blurb: "The song is sung from the point of view of a soldier stationed overseas during World War II, writing a letter to his family. In the message, he tells the family he will be coming home and to prepare the holiday for him, and requests snow, mistletoe, and presents on the tree. The song ends on a melancholy note, with the soldier saying, 'I'll be home for Christmas, if only in my dreams'. The flip side of the original recording (Decca 18570B) was 'Danny Boy'.",
      icon: "https://media3.giphy.com/media/l0HlJNxDNkTqxJCGk/giphy.gif?cid=ecf05e4772duntpk9nngjue5g2w91vzlfvf7e71sqr5lfa29&rid=giphy.gif",
    },
    fourteen={
      title: "Joy To The World",
      video_id: "DLT9dSt8cwg",
      blurb: "The version of this carol usually heard today is from the edition by Lowell Mason for The National Psalmist (Boston, 1848), his fourth revision of the tune he named ANTIOCH and attributed as 'arranged from Handel'. This tune has the first four notes in common with the chorus Lift up your heads from Messiah (premiered 1742), and the third line recalls the arioso Comfort ye from the same oratorio, but this resemblance is dismissed as 'chance resemblance' by Handel scholars today. A 1986 article by John Wilson showed ANTIOCH's close resemblance to a predecessor titled COMFORT and associated with Wesley's hymn 'O Joyful Sound', with one publication firmly dated 1833, three years earlier than Mason's first version.",
      icon: "https://media0.giphy.com/media/ndOEKTqUOEPq8/giphy.gif?cid=ecf05e47b444v1tjut1g6rnob08cta6uuodktix8kqph8pzg&rid=giphy.gif",
    },
    fifteen={
      title: "Little Saint Nick",
      video_id: "P-vAZabkn3U",
      blurb: "The idea for the song was partly inspired by record producer Phil Spector's plans to record a Christmas album. Wilson recalled: 'I wrote the lyrics to it while I was out on a date and then I rushed home to finish the music.' Some of its rhythm and structure derives from the group's 'Little Deuce Coupe', also co-written by Wilson and released as a single six months earlier. Love was not originally listed as the co-writer of 'Little Saint Nick'. His credit was awarded after a 1990s lawsuit.",
      icon: "https://media4.giphy.com/media/LNE01Z89j9gis/giphy.gif?cid=ecf05e47stkr588phltmu29ounba94u1zd4jj5qjf31uo12n&rid=giphy.gif",
    },
    sixteen={
      title: "O Holy Night",
      video_id: "cZ-8jYpa1-o",
      blurb: "In Roquemaure at the end of 1843, the church organ had recently been renovated. To celebrate the event, the parish priest asked wine merchant and poet, Placide Cappeau, a native of the town, to write a Christmas poem, even though the latter had never showed any interest in religion, and Cappeau obliged. Soon afterwards that same year, Adolphe Adam composed the music. The song was premiered in Roquemaure in 1847 by the opera singer Emily Laurey. Unitarian minister John Sullivan Dwight, editor of Dwight's Journal of Music, translated the song into English lyrics in 1855.",
      icon: "https://media2.giphy.com/media/IwFp8OXJLG492/giphy.gif?cid=ecf05e47b431e4448d183042f380f8ef49965f747c99bfe7&rid=giphy.gif",
    },
    seventeen={
      title: "All I Want for Christmas Is You",
      video_id: "yXQViqx6GMY",
      blurb: "Performed by American singer and songwriter Mariah Carey. She wrote and produced the song alongside Walter Afanasieff. Columbia Records released it on November 1, 1994, as the lead single from her fourth studio album and first holiday album, Merry Christmas (1994). The track is an uptempo love song that includes bell chimes, heavy back-up vocals, and synthesizers. It is also considered the best-selling modern day Christmas song of all time.",
      icon: "https://media1.giphy.com/media/26u49pk6wiIkj2tEY/giphy.gif?cid=ecf05e47ma2wfyerxp9d7ql08g8vts11780ntg6s86d3ztos&rid=giphy.gif",
    },
    eighteen={
      title: "What Child Is This",
      video_id: "EbvwwwTqeRo",
      blurb: "At the time of composing the carol, Dix worked as an insurance company manager and had been struck by a severe illness. While recovering, he underwent a spiritual renewal that led him to write several hymns, including lyrics to this carol that was subsequently set to the tune of 'Greensleeves', a traditional English folk song. Although it was written in Great Britain, the carol is more popular in the United States than in its country of origin today.",
      icon: "https://media4.giphy.com/media/TgMRwkBQTIMTUyYBbE/giphy.gif?cid=ecf05e47eb6fac74d174a5ac58cee0b6bc3a190270bc8d36&rid=giphy.gif",
    },
    nineteen={
      title: "The Christmas Waltz",
      video_id: "Kr_zo8ivUCY",
      blurb: "Cahn recalls, 'One day during a very hot spell in Los Angeles the phone rang and it was Jule Styne to say, 'Frank wants a Christmas song.'' Cahn resisted, explaining that any notion of attempting a holiday hit so closely on the heels of Irving Berlin's hugely successful 'White Christmas' was 'ridiculous', but Styne was emphatic. ''Frank wants a Christmas song.''",
      icon: "https://media4.giphy.com/media/ejHCFHxAlZfl6/giphy.gif?cid=ecf05e47iuyf387avh3oixngcayyjtqrrm3rd25y3tft22ai&rid=giphy.gif",
    },
    twenty={
      title: "Oh, Come, All Ye Faithful",
      video_id: "Wjl-KIGrOWA",
      blurb: "The original text consisted of four Latin verses, and it was with these that the hymn was originally published. John Francis Wade had written the hymn in Latin in 1744, and was first published in 1751. The Abbe Jean-Francois-Etienne Borderies (fr) wrote an additional three verses in the 18th century; these are normally printed as the third to fifth of seven verses, while another, anonymous, additional Latin verse is rarely printed. The text has been translated innumerable times, but the most used version today is the English 'O Come, All Ye Faithful'. This is a combination of one of Frederick Oakeley's translations of the original four verses and William Thomas Brooke's of the three additional ones, which was first published in Murray's Hymnal in 1852. Oakeley originally titled the song 'Ye Faithful, approach ye' when it was sung at his Margaret Church in Marylebone before it was altered to its current form.",
      icon: "https://media2.giphy.com/media/3ohs4di3nBNQjv7RhS/giphy.gif?cid=ecf05e47ve6s320odug7jx5pff5pe29xlihmxua7nk616hhe&rid=giphy.gif",
    },
    twentyone={
      title: "White Christmas",
      video_id: "2QW65Amj0vM",
      blurb: "Accounts vary as to when and where Berlin wrote the song. One story is that he wrote it in 1940, in warm La Quinta, California, while staying at the La Quinta Hotel, a frequent Hollywood retreat also favored by writer-director-producer Frank Capra, although the Arizona Biltmore also claims the song was written there. He often stayed up all night writing-he told his secretary, 'Grab your pen and take down this song. I just wrote the best song I've ever written-heck, I just wrote the best song that anybody's ever written! The version sung by Bing Crosby is the world's best-selling single with estimated sales in excess of 100 million copies worldwide.",
      icon: "https://media2.giphy.com/media/E1v4GJ5LkcPHa/giphy.gif?cid=ecf05e4773290355e6111c001057702e068db734e8068d28&rid=giphy.gif",
    },
    twentytwo={
      title: "It Came Upon The Midnight Clear",
      video_id: "6Zs9A88YQyM",
      blurb: "According to Ken Sawyer, Sears' song is remarkable for its focus not on Bethlehem, but on his own time, and on the contemporary issue of war and peace. Written in 1849, it has long been assumed to be Sears' response to the just ended Mexican–American War. The song has been included in many of the Christmas albums recorded by numerous singers in the modern era.",
      icon: "https://media2.giphy.com/media/A8hGDygXMfOta/giphy.gif?cid=ecf05e479522837eb07ba029905d6caa3bc9d237146f7c6f&rid=giphy.gif",
    },
    twentythree={
      title: "The Christmas Song",
      video_id: "hwacxSnc4tI",
      blurb: "According to Torme, the song was written during a blistering hot summer. In an effort to 'stay cool by thinking cool', the most-performed (according to BMI) Christmas song was born. 'I saw a spiral pad on his (Wells') piano with four lines written in pencil', Torme recalled. 'They started, 'Chestnuts roasting..., Jack Frost nipping..., Yuletide carols..., Folks dressed up like Eskimos.' Bob didn't think he was writing a song lyric. He said he thought if he could immerse himself in winter he could cool off. Forty minutes later that song was written. I wrote all the music and some of the lyrics.'",
      icon: "https://media1.giphy.com/media/H4H3NtVEWcoHS/giphy.gif?cid=ecf05e47k2clovb2vkqduut5l5gy84264ugrj38g2lm6hh8l&rid=giphy.gif",
    },
    twentyfour={
      title: "Silent Night",
      video_id: "sMvURdq8V6U",
      blurb: "Composed in 1818 by Franz Xaver Gruber to lyrics by Joseph Mohr in the small town of Oberndorf bei Salzburg, Austria. It was declared an intangible cultural heritage by UNESCO in 2011. The song has been recorded by a large number of singers from every music genre. The version sung by Bing Crosby is the third best-selling single of all-time.",
      icon: "https://media2.giphy.com/media/oUM2k2cif7jSE/giphy.gif?cid=ecf05e479bm6bnknt8h4zas8h41hyi06l82jm87hpu1cg2dn&rid=giphy.gif",
    },
  ]
</script>

## responsive-advent-calendar-house.markdown

      
    Raw
  

              responsive-advent-calendar-house.markdown
            
          
    Responsive Advent Calendar House

A Pen by Kit Jenson on CodePen.
License.

  
## script.js
console.clear()
var casa = document.querySelector('#advent_house')
var block_count = 24

var dateObj = new Date();
var month = dateObj.getMonth() + 1; //months from 1-12
var day = dateObj.getDate();
// console.log(month+' / '+day)
// day = 5
document.querySelector('#todays_date span').innerHTML = day

function blocks() {
  var b = document.createElement('div')
  b.className = 'block'

  var wf = document.createElement('div')
  wf.className = 'window_frame'
  wf.style.backgroundImage = 'url('+songs[i].icon+')'

  var w = document.createElement('div')
  w.className = 'window'

  var n = document.createElement('div')
  n.className = 'number'
  n.innerText = i+1

  casa.appendChild(b).appendChild(wf).append(n,w)
}

for(var i=0;i<block_count;i++){
  blocks()
}

var goods = document.querySelector('#the_days_goods')
var content = document.querySelector('#goods_content')
var yt = 'https://www.youtube.com/embed/'
setTimeout(function(){
  var win = document.querySelectorAll('.window_frame')
  win.forEach(function(elm){
    elm.addEventListener('click', function(e){
      var num = Number(elm.children[0].innerHTML) - 1
      if(num + 1 <= day || e.ctrlKey || e.metaKey){
        if(!elm.children[1].classList.contains('open_window')){
          content.children[0].innerHTML = songs[num].title
          content.children[1].src = yt+songs[num].video_id
          content.children[2].innerHTML = songs[num].blurb

          elm.children[1].classList.toggle('open_window')
          goods.classList.toggle('show_goods')
        } else {
          content.children[0].innerHTML = songs[num].title
          content.children[1].src = yt+songs[num].video_id
          content.children[2].innerHTML = songs[num].blurb

          goods.classList.toggle('show_goods')
        }
      }
    })
  })

  window.addEventListener('dblclick', function(){
    var open_windows = document.querySelectorAll('.open_window')
    open_windows.forEach(function(el){
      el.classList.toggle('open_window')
    })

    if(localStorage.getItem('advent_calender')) {
      localStorage.removeItem('advent_calender')
    }
  })
},250)

var close_goods = document.querySelector('#close_goods')
close_goods.addEventListener('click', function(){
  close_goods.parentElement.classList.toggle('show_goods')
  content.children[0].innerHTML = ""
  content.children[1].src = ""
  content.children[2].innerHTML = ""
})

function openPreviousWindows() {
  var windows = document.querySelectorAll('.window')
  var n = localStorage.getItem('advent_calender')
  if(n > 23) {
    n = 23
  }
  for(var i=0;i<n-1;i++){
    windows[i].classList.toggle('open_window')
    windows[n].scrollIntoView({behavior: "smooth", block: "end"});
  }
  localStorage.setItem('advent_calender', (day))
}

setTimeout(function(){
  if(localStorage.getItem('advent_calender')) {
    openPreviousWindows()
  } else {
    localStorage.setItem('advent_calender', day)
  }
},500)

## style.css
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
  width: 10px;
}
*::-webkit-scrollbar-track {
  background: white;
}
*::-webkit-scrollbar-thumb {
  background-color: gray;
  border-radius: 20px;
  border: 3px solid white;
}
#the_days_goods::-webkit-scrollbar {
  width: 0px;
}
body {
  padding:0;
  font-size:0;
  margin:0;
  width:100%;
  overflow-x:hidden;
  position:relative;
  background:linear-gradient(to top, #004, #000);
  font-family:'Montserrat', sans-serif;
}

#helpful_info {
  font-size:12px;
  background:white;
  color:#a00;
  position:fixed;
  top:0;
  right:-200px;
  box-sizing:border-box;
  padding:10px;
  width:200px;
  transition:.5s;
  cursor:pointer;
}
#helpful_info:before {
  content:'i';
  width:30px;
  height:30px;
  font-size:20px;
  text-align:center;
  line-height:30px;
  background:white;
  position:absolute;
  top:0;
  left:0;
  transform:translateX(-100%);
}
#helpful_info:hover {
  right:0;
}
#helpful_info ul {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 20px;
}
#helpful_info li:first-child {
  margin-bottom:10px;
}

#logo_box {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(180deg);
  width:100%;
  height:100%;
  box-sizing:border-box;
  padding-top:20px;
  background:rgba(255,255,255,.5);
}

#advent_logo {
  width:100%;
  max-width:600px;
  position:relative;
  margin:0 auto;
}
#advent_logo img {
    width:100%;
}
#advent_logo span {
  display:block;
  font-size:100px;
  line-height:100%;
  letter-spacing:5px;
  color:#a00;
  text-shadow:12px 12px rgba(0,0,0,.1);
}
#top_text {
  width:90%;
  max-width:473px;
  font-size:20px;
  line-height:150%;
  font-family:'Mali', 'Montserrat', sans-serif;
  color:#030;
  text-align:center;
  position:relative;
  margin:40px auto 0 auto;
}

#advent_house {
  width:95%;
  max-width:1300px;
  margin:0 auto 0 auto;
  padding:50px;
  box-sizing:border-box;
  background-color: silver;
  background-image: linear-gradient(335deg, #a00 23px, transparent 23px),
    linear-gradient(155deg, #b00 23px, transparent 23px),
    linear-gradient(335deg, #b00 23px, transparent 23px),
    linear-gradient(155deg, #b00 23px, transparent 23px);
  background-size: 58px 58px;
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
  background-blend-mode:multiply;
  text-align:center;
  position:relative;
  transform-origin:top center;
  /*   transform:scale(.75); */
}
#roof {
  width:100%;
  max-width:1400px;
  height:33.33vh;
  background-color:white;
  /*background-image:radial-gradient(circle at 50% 75%, #efefef 30px, transparent);*/
  background-size: 50px 50px;
  content:'';
  position:relative;
  margin:0 auto;
  margin-top:50px;
  transform:rotate(180deg);
  clip-path:polygon(20% 100%, 80% 100%, 100% 0%, 0% 0%);
}
#roof_base {
  width:100%;
  max-width:1400px;
  height:40px;
  background-color:#fff;
  position:relative;
  margin:0 auto;
  box-shadow:0 10px 10px rgba(0,0,0,.5);
  z-index:9;
}
#todays_date {
  font-size:14px;
  text-align:center;
  color:#a00;
  line-height:40px;
}

#south_lawn {
  width:100vw;
  background:white;
  position:relative;
}

#south_lawn_text {
  font-family: 'Mali', serif;
  color: #a00;
  font-size: 36px;
  font-weight: 900;
  margin: 0 auto;
  width: 95%;
  max-width: 1300px;
  user-select: none;
  padding:25px 10px;
}
#south_lawn span {
  display: block;
  font-size: 14px;
  color: #a00;
  font-weight: 100;
  padding-bottom: 20px;
}
#south_lawn a {
  color:#a00;
}

#snow_box {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  pointer-events:none;
  background:url('https://i.gifer.com/3nRI.gif');
  opacity:.5;
}

.inside {
  width:100%;
  height:100%;
  background:white;
  /*   box-shadow:0 0 5px rgba(0,0,0,.13); */
}
.block {
  width:100%;
  max-width:250px;
  height:33.33vh;
  /*   outline:1px solid lightgray; */
  margin:25px;
  display:inline-block;
  font-size:36px;
  text-align:center;
  font-family:'Montserrat', cursive;
  color:lightgray;
  box-sizing:border-box;
  padding:40px;
  user-select:none;
}

.window_frame {
  width:100%;
  max-width:200px;
  height:100%;
  background-color:lightgray;
  background-position:50% 50%;
  background-repeat: no-repeat;
  background-size:cover;
  position:relative;
  box-shadow:inset 0 15px 15px rgba(0,0,0,.75);
  border:8px solid #410;
  border-bottom:0;
  box-shadow:16px 16px 0 rgba(0,0,0,.25);
  perspective:1000px;
  cursor:pointer;
  margin:0 auto;
  box-sizing:border-box;
  font-size:14px;
  color:black;
}

.window_frame:before {
  content:'';
  width:116%;
  height:40px;
  background:#410;
  position:absolute;
  left:-8%;
  top:-40px;
  clip-path:polygon(50% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%);
  z-index:-1;
}
.window_frame:after {
  content:'';
  width:116%;
  height:40px;
  background:var(--snowy-ledge), linear-gradient(to bottom, #410 30px, transparent 20px);
  background-size:100% 100%;
  position:absolute;
  left:-8%;
  top:100%;
  z-index:-1;
}

.window {
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  background:inherit;
  transition:.5s;
  transform-origin:left;
  transform:rotateY(0deg);
  overflow: hidden;
}
.window:before {
  content:'';
  width:100%;
  height:100%;
  background:inherit;
  position:absolute;
  left:0;
  top:0;
  box-shadow: inset 0 0 0 200px rgba(255,255,255,0.5);
  filter: blur(10px);
}
.window:after {
  width:100%;
  height:100%;
  background:#efefef;
  position:absolute;
  left:0;top:0;
  box-shadow:inset 0 0 0 1px black, inset 0 0 0 8px #410;
  border-bottom:3px solid black;
  background:linear-gradient(to right, transparent 90%, #410 90%), linear-gradient(to bottom, transparent 90%, #410 90%);
  background-size:50% 33.33%;
  content:'';
}
.open_window {
  transform:rotateY(-105deg);
}
.open_window:before {
  box-shadow: inset 0 0 0 200px rgba(255,255,255,0.6);
}

.number {
  width:30px;
  height:30px;
  position:absolute;
  top:0%;
  left:50%;
  transform:translate(-60%,-110%);
  font-size:20px;
  line-height:30px;
  z-index:0;
  pointer-events:none;
  /*   background:#520; */
  border-radius:50%;
  color:#efefef;
}

#the_days_goods {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:rgba(0,0,0,.98);
  overflow:auto;
  opacity:0;
  pointer-events:none;
  overscroll-behavior: contain;
  box-sizing:border-box;
  padding:40px 15px;
  z-index:999;
}

.show_goods {
  animation:show_goods 1s linear .5s forwards;
  pointer-events:auto !important;
}
@keyframes show_goods {
  100% { opacity:1;  }
}

#close_goods {
  font-size:48px;
  line-height:48px;
  position:absolute;
  top:0;
  right:15px;
  font-weight:300;
  cursor:pointer;
  z-index:99;
  color:white;
}

#goods_content {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  /*   overflow: hidden;  */
  max-width: 800px;
  max-height:450px;
  box-sizing:border-box;
  margin:0 auto;
  font-size:20px;
}

#goods_content h1 {
  font-size:36px;
  line-height:100%;
  color:white;
  padding-top:60%;
}

#goods_content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height:450px;
  background:url('https://upload.wikimedia.org/wikipedia/commons/a/ad/YouTube_loading_symbol_3_%28transparent%29.gif');
  background-size:150px 150px;
  background-position:50% 50%;
  background-repeat:no-repeat;
}

#goods_content p {
  color:white;
  font-size:14px;
  line-height:200%;
  max-width:600px;
  padding-bottom:50px;
}

@media screen and (max-width:750px) {
  #roof {
      clip-path:polygon(5% 100%, 95% 100%, 100% 0%, 0% 0%);
      margin-top:25px;
  }
  #top_text {
      font-size:15px;
  }
  .block {
    width:100%;
    padding:40px 0;
    margin:25px auto;
  }
  #south_lawn_text {
    font-size:34px;
  }
  #helpful_info {
    display:none;
  }
}


:root {
  --snowy-ledge:url('data:image/png;base64,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');
}

	<link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,500,700,900&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Mali&display=swap" rel="stylesheet">

	<div id='roof'>
	<div id='logo_box'>
	<div id='advent_logo'><img src="http://www.kitjenson.com/christmas_advent/main_logo.png" alt="A song a day this h0liday"></div>
	<p id='top_text'>Below is an advent calendar to help you celebrate the season a little bit each day. Be sure to come back daily to see what's new!</p>
	</div>
	</div>
	<div id='roof_base'><div id='todays_date'>December <span>1</span>, 2020</div></div>
	<div id='advent_house'></div>
	<div id='south_lawn'>
	<p id='south_lawn_text'>Merry Christmas!
	<span>Built lovingly in 2020 by <a href="http://www.kitjenson.com">Kit Jenson</a> with HTML, CSS, & Javascript.</span>
	</p>

	</div>
	<div id='snow_box'></div>

	<div id='the_days_goods'>
	<div id='goods_content'>
	<h1></h1>
	<iframe placeholder="Loading..." src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	<p></p>
	</div>

	<div id='close_goods'>×</div>
	</div>
	<div id='helpful_info'>
	<ul>
	<li>Ctrl/Cmd+click to open window past today's date</li>
	<li>Double-click to close all windows</li>
	</ul>
	</div>

	<script>
	const songs = [
	one={
	title: "It's Beginning to Look a Lot Like Christmas",
	video_id: "WaNwEkCeZrE",
	blurb: "A popular belief in Yarmouth, Nova Scotia, holds that Willson wrote the song while staying in Yarmouth's Grand Hotel. The song makes reference to a 'tree in the Grand Hotel, one in the park as well...'; the park being Frost Park, directly across the road from the Grand Hotel, which still operates in a newer building on the same site as the old hotel.",
	icon: "https://media2.giphy.com/media/gNke2UrUTopOg/giphy.gif?cid=ecf05e47kzabsxmapxvutn086fhubq43xcozgof0evc2h6ra&rid=giphy.gif",
	},
	two={
	title: "Mary, Did You Know?",
	video_id: "ifCWN5pJGIE",
	blurb: "Some criticize it for what they perceive as a lack of scriptural or theological depth. For example, Lutheran writer Holly Scheer, in addressing the rhetorical-question title of the song writes that those familiar with 'the biblical account of Christ’s conception and birth shouldn’t need to ask if Mary knew, because the Bible plainly tells us she did.' On the other hand the Roman Catholic author Karl Erickson implored people to praise 'Mary, Did You Know?' as a 'beautiful expression of God’s love for all of us' and responded to criticism of the piece, stating that 'Mary, Did You Know is a song and not a theological essay.'",
	icon: "https://media2.giphy.com/media/m3BSyICMtAfra/giphy.gif?cid=ecf05e47df4a9d1965f4b43f6801b97fdb055dbf345ca207&rid=giphy.gif",
	},
	three={
	title: "It's the Most Wonderful Time of the Year",
	video_id: "SFGC_YgeQ5w",
	blurb: "The song is a celebration and description of activities associated with the Christmas season, focusing primarily on get-togethers between friends and families. Among the activities included in the song is the telling of 'scary ghost stories,' a Victorian Christmas tradition that has mostly fallen into disuse, but survives in the seasonal popularity of numerous adaptations of Charles Dickens' A Christmas Carol. Other activities mentioned include hosting parties, spontaneous visits from friends, universal social gaiety, spending time with loved ones, sledding for children, roasting marshmallows, sharing stories about previous Christmases, and singing Christmas carols in winter weather.",
	icon: "https://media0.giphy.com/media/xULW8DoK3l8siZT2JW/giphy.gif?cid=ecf05e476141355839ddd95e880d66ee904187304e15b105&rid=giphy.gif",
	},
	four={
	title: "Angels We Have Heard On High",
	video_id: "PrLoWt2tfqg",
	blurb: "Angels We Have Heard on High is a Christmas carol with the lyrics written by James Chadwick, Bishop of Hexham and Newcastle, to the music from a French song called Les Anges Dans Nos Campagnes. The music is the same as the original song, though Chadwick's lyrics albeit unique and original are clearly derived and inspired, and in parts a loose translation. The song's subject is the birth of Jesus Christ narrated in the Gospel of Luke, specifically the scene in which shepherds outside Bethlehem encounter a multitude of angels singing and praising the newborn child.",
	icon: "https://media0.giphy.com/media/sRHYw4VwrFPEDWn2a9/giphy.gif?cid=ecf05e47j4tduifkc1zc4nu0c36ka3zdtctx636l9m2iwlxv&rid=giphy.gif",
	},
	five={
	title: "Rudolph The Red-Nosed Reindeer",
	video_id: "c9ps42Frh6Y",
	blurb: "Popularly known as 'Santa's ninth reindeer', is a fabled reindeer created by Robert Lewis May. Rudolph is usually depicted as the lead reindeer pulling Santa's sleigh on Christmas Eve, though he is a young buck who has only adolescent antlers and a glowing red nose. Though he receives scrutiny for it, the luminosity of his nose is so great that it illuminates the team's path through harsh winter weather. Rudolph first appeared in a 1939 booklet written by Robert L. May and published by Montgomery Ward, the department store.",
	icon: "https://media1.giphy.com/media/bxJRigovhEPhC/giphy.gif?cid=ecf05e47cnkwwxdlwuj91jidc7c15nq518lpgwt9d7yosr3q&rid=giphy.gif",
	},
	six={
	title: "The Little Drummer Boy",
	video_id: "_6p5icEYBus",
	blurb: "A popular Christmas song written by the American classical music composer and teacher Katherine Kennicott Davis in 1941. First recorded in 1951 by the Trapp Family Singers, the song was further popularized by a 1958 recording by the Harry Simeone Chorale; the Simeone version was re-released successfully for several years and the song has been recorded many times since.",
	icon: "https://media1.giphy.com/media/Pk9MbQukhKhxKvuTDY/giphy.gif?cid=ecf05e47mrhm0ry8x8mo4vcnw4msdm8qgstdx3u1xw2n5vyv&rid=giphy.gif",
	},
	seven={
	title: "Frosty the Snowman",
	video_id: "vjscH2WBWjw",
	blurb: "Written by Walter 'Jack' Rollins and Steve Nelson, and first recorded by Gene Autry and the Cass County Boys in 1950 and later recorded by Jimmy Durante, releasing it as a single. It was written after the success of Autry's recording of 'Rudolph the Red-Nosed Reindeer' the previous year; Rollins and Nelson shipped the new song to Autry, who recorded 'Frosty' in search of another seasonal hit. Like 'Rudolph', 'Frosty' was subsequently adapted to other media including a popular television special by Rankin/Bass Productions (formerly known as Videocraft International), Frosty the Snowman.",
	icon: "https://media0.giphy.com/media/l4JzdolOiRAkrNcru/giphy.gif?cid=ecf05e47neyek4ee25a9rmb7pk0cqk5ndmdkf3w7ap2o3zk2&rid=giphy.gif",
	},
	eight={
	title: "Do You Hear What I Hear?",
	video_id: "Aq55N3777NI",
	blurb: "Written in October 1962, with lyrics by Noel Regney and music by Gloria Shayne Baker. The pair, married at the time, wrote it as a plea for peace during the Cuban Missile Crisis. Regney had been invited by a record producer to write a Christmas song, but he was hesitant due to the commercialism of the Christmas holiday. It has sold tens of millions of copies and has been covered by hundreds of artists.",
	icon: "https://media4.giphy.com/media/dejmNXDWTU7gmy2Y0N/giphy.gif?cid=ecf05e472111d8wdacx70nccshi79aos78jv4rsjbvmt9dg0&rid=giphy.gif",
	},
	nine={
	title: "Jingle Bells",
	video_id: "hLf0-lro8X8",
	blurb: "Although originally intended for the Thanksgiving season, and having no connection to Christmas, it became associated with Christmas music and the holiday season in general decades after it was first performed on Washington Street in Boston in 1857. Some area choirs adopted it as part of their repertoire in the 1860s and 1870s, and it was featured in a variety of parlor song and college anthologies in the 1880s. It was first recorded in 1889 on an Edison cylinder.",
	icon: "https://media1.giphy.com/media/l2YWwYchqnNv9DTAQ/giphy.gif?cid=ecf05e47e520c7b0a214ebb8c6e963b5fdc30c7492e3caee&rid=giphy.gif",
	},
	ten={
	title: "God Rest Ye Merry Gentlemen",
	video_id: "ZlsJD8RlhbI",
	blurb: "It is one of the oldest extant carols, dated to the 16th century or earlier. The earliest known printed edition of the carol is in a broadsheet dated to c. 1760. The traditional English melody is in the minor mode; the earliest printed edition of the melody appears to be in a parody, in the 1829 Facetiae of William Hone. It had been traditional and associated with the carol since at least the mid-18th century, when it was recorded by James Nares under the title 'The Old Christmas Carol'.",
	icon: "https://media1.giphy.com/media/zjLFUJrA34LyU/giphy.gif?cid=ecf05e470df340e3a622938a1402c0a32810ead9eb8c9ba2&rid=giphy.gif",
	},
	eleven={
	title: "Have Yourself A Merry Little Christmas",
	video_id: "CreWsnhQwzY?start=40",
	blurb: "Introduced by Judy Garland in the 1944 MGM musical Meet Me in St. Louis. Frank Sinatra later recorded a version with modified lyrics. In 2007, ASCAP ranked 'Have Yourself a Merry Little Christmas' the third most performed Christmas song during the preceding five years that had been written by ASCAP members. In 2004 it finished at No. 76 in AFI's 100 Years...100 Songs rankings of the top tunes in American cinema.",
	icon: "https://media4.giphy.com/media/vSLIADRSTBuSI/giphy.gif?cid=ecf05e470fb1881353058faac3d0964709c047416a901757&rid=giphy.gif",
	},
	twelve={
	title: "Away In a Manger",
	video_id: "Rl1Kq8bGLfI?start=30",
	blurb: "First published in the late nineteenth century and used widely throughout the English-speaking world. In Britain, it is one of the most popular carols; a 1996 Gallup Poll ranked it joint second. Although it was long claimed to be the work of German religious reformer Martin Luther, the carol is now thought to be wholly American in origin.",
	icon: "https://media1.giphy.com/media/1KN12xnXumlvq/giphy.gif?cid=ecf05e479af981aea23d628303b29ac80cf04dc83ddb131f&rid=giphy.gif",
	},
	thirteen={
	title: "I'll Be Home For Christmas",
	video_id: "igScPXNahf0",
	blurb: "The song is sung from the point of view of a soldier stationed overseas during World War II, writing a letter to his family. In the message, he tells the family he will be coming home and to prepare the holiday for him, and requests snow, mistletoe, and presents on the tree. The song ends on a melancholy note, with the soldier saying, 'I'll be home for Christmas, if only in my dreams'. The flip side of the original recording (Decca 18570B) was 'Danny Boy'.",
	icon: "https://media3.giphy.com/media/l0HlJNxDNkTqxJCGk/giphy.gif?cid=ecf05e4772duntpk9nngjue5g2w91vzlfvf7e71sqr5lfa29&rid=giphy.gif",
	},
	fourteen={
	title: "Joy To The World",
	video_id: "DLT9dSt8cwg",
	blurb: "The version of this carol usually heard today is from the edition by Lowell Mason for The National Psalmist (Boston, 1848), his fourth revision of the tune he named ANTIOCH and attributed as 'arranged from Handel'. This tune has the first four notes in common with the chorus Lift up your heads from Messiah (premiered 1742), and the third line recalls the arioso Comfort ye from the same oratorio, but this resemblance is dismissed as 'chance resemblance' by Handel scholars today. A 1986 article by John Wilson showed ANTIOCH's close resemblance to a predecessor titled COMFORT and associated with Wesley's hymn 'O Joyful Sound', with one publication firmly dated 1833, three years earlier than Mason's first version.",
	icon: "https://media0.giphy.com/media/ndOEKTqUOEPq8/giphy.gif?cid=ecf05e47b444v1tjut1g6rnob08cta6uuodktix8kqph8pzg&rid=giphy.gif",
	},
	fifteen={
	title: "Little Saint Nick",
	video_id: "P-vAZabkn3U",
	blurb: "The idea for the song was partly inspired by record producer Phil Spector's plans to record a Christmas album. Wilson recalled: 'I wrote the lyrics to it while I was out on a date and then I rushed home to finish the music.' Some of its rhythm and structure derives from the group's 'Little Deuce Coupe', also co-written by Wilson and released as a single six months earlier. Love was not originally listed as the co-writer of 'Little Saint Nick'. His credit was awarded after a 1990s lawsuit.",
	icon: "https://media4.giphy.com/media/LNE01Z89j9gis/giphy.gif?cid=ecf05e47stkr588phltmu29ounba94u1zd4jj5qjf31uo12n&rid=giphy.gif",
	},
	sixteen={
	title: "O Holy Night",
	video_id: "cZ-8jYpa1-o",
	blurb: "In Roquemaure at the end of 1843, the church organ had recently been renovated. To celebrate the event, the parish priest asked wine merchant and poet, Placide Cappeau, a native of the town, to write a Christmas poem, even though the latter had never showed any interest in religion, and Cappeau obliged. Soon afterwards that same year, Adolphe Adam composed the music. The song was premiered in Roquemaure in 1847 by the opera singer Emily Laurey. Unitarian minister John Sullivan Dwight, editor of Dwight's Journal of Music, translated the song into English lyrics in 1855.",
	icon: "https://media2.giphy.com/media/IwFp8OXJLG492/giphy.gif?cid=ecf05e47b431e4448d183042f380f8ef49965f747c99bfe7&rid=giphy.gif",
	},
	seventeen={
	title: "All I Want for Christmas Is You",
	video_id: "yXQViqx6GMY",
	blurb: "Performed by American singer and songwriter Mariah Carey. She wrote and produced the song alongside Walter Afanasieff. Columbia Records released it on November 1, 1994, as the lead single from her fourth studio album and first holiday album, Merry Christmas (1994). The track is an uptempo love song that includes bell chimes, heavy back-up vocals, and synthesizers. It is also considered the best-selling modern day Christmas song of all time.",
	icon: "https://media1.giphy.com/media/26u49pk6wiIkj2tEY/giphy.gif?cid=ecf05e47ma2wfyerxp9d7ql08g8vts11780ntg6s86d3ztos&rid=giphy.gif",
	},
	eighteen={
	title: "What Child Is This",
	video_id: "EbvwwwTqeRo",
	blurb: "At the time of composing the carol, Dix worked as an insurance company manager and had been struck by a severe illness. While recovering, he underwent a spiritual renewal that led him to write several hymns, including lyrics to this carol that was subsequently set to the tune of 'Greensleeves', a traditional English folk song. Although it was written in Great Britain, the carol is more popular in the United States than in its country of origin today.",
	icon: "https://media4.giphy.com/media/TgMRwkBQTIMTUyYBbE/giphy.gif?cid=ecf05e47eb6fac74d174a5ac58cee0b6bc3a190270bc8d36&rid=giphy.gif",
	},
	nineteen={
	title: "The Christmas Waltz",
	video_id: "Kr_zo8ivUCY",
	blurb: "Cahn recalls, 'One day during a very hot spell in Los Angeles the phone rang and it was Jule Styne to say, 'Frank wants a Christmas song.'' Cahn resisted, explaining that any notion of attempting a holiday hit so closely on the heels of Irving Berlin's hugely successful 'White Christmas' was 'ridiculous', but Styne was emphatic. ''Frank wants a Christmas song.''",
	icon: "https://media4.giphy.com/media/ejHCFHxAlZfl6/giphy.gif?cid=ecf05e47iuyf387avh3oixngcayyjtqrrm3rd25y3tft22ai&rid=giphy.gif",
	},
	twenty={
	title: "Oh, Come, All Ye Faithful",
	video_id: "Wjl-KIGrOWA",
	blurb: "The original text consisted of four Latin verses, and it was with these that the hymn was originally published. John Francis Wade had written the hymn in Latin in 1744, and was first published in 1751. The Abbe Jean-Francois-Etienne Borderies (fr) wrote an additional three verses in the 18th century; these are normally printed as the third to fifth of seven verses, while another, anonymous, additional Latin verse is rarely printed. The text has been translated innumerable times, but the most used version today is the English 'O Come, All Ye Faithful'. This is a combination of one of Frederick Oakeley's translations of the original four verses and William Thomas Brooke's of the three additional ones, which was first published in Murray's Hymnal in 1852. Oakeley originally titled the song 'Ye Faithful, approach ye' when it was sung at his Margaret Church in Marylebone before it was altered to its current form.",
	icon: "https://media2.giphy.com/media/3ohs4di3nBNQjv7RhS/giphy.gif?cid=ecf05e47ve6s320odug7jx5pff5pe29xlihmxua7nk616hhe&rid=giphy.gif",
	},
	twentyone={
	title: "White Christmas",
	video_id: "2QW65Amj0vM",
	blurb: "Accounts vary as to when and where Berlin wrote the song. One story is that he wrote it in 1940, in warm La Quinta, California, while staying at the La Quinta Hotel, a frequent Hollywood retreat also favored by writer-director-producer Frank Capra, although the Arizona Biltmore also claims the song was written there. He often stayed up all night writing-he told his secretary, 'Grab your pen and take down this song. I just wrote the best song I've ever written-heck, I just wrote the best song that anybody's ever written! The version sung by Bing Crosby is the world's best-selling single with estimated sales in excess of 100 million copies worldwide.",
	icon: "https://media2.giphy.com/media/E1v4GJ5LkcPHa/giphy.gif?cid=ecf05e4773290355e6111c001057702e068db734e8068d28&rid=giphy.gif",
	},
	twentytwo={
	title: "It Came Upon The Midnight Clear",
	video_id: "6Zs9A88YQyM",
	blurb: "According to Ken Sawyer, Sears' song is remarkable for its focus not on Bethlehem, but on his own time, and on the contemporary issue of war and peace. Written in 1849, it has long been assumed to be Sears' response to the just ended Mexican–American War. The song has been included in many of the Christmas albums recorded by numerous singers in the modern era.",
	icon: "https://media2.giphy.com/media/A8hGDygXMfOta/giphy.gif?cid=ecf05e479522837eb07ba029905d6caa3bc9d237146f7c6f&rid=giphy.gif",
	},
	twentythree={
	title: "The Christmas Song",
	video_id: "hwacxSnc4tI",
	blurb: "According to Torme, the song was written during a blistering hot summer. In an effort to 'stay cool by thinking cool', the most-performed (according to BMI) Christmas song was born. 'I saw a spiral pad on his (Wells') piano with four lines written in pencil', Torme recalled. 'They started, 'Chestnuts roasting..., Jack Frost nipping..., Yuletide carols..., Folks dressed up like Eskimos.' Bob didn't think he was writing a song lyric. He said he thought if he could immerse himself in winter he could cool off. Forty minutes later that song was written. I wrote all the music and some of the lyrics.'",
	icon: "https://media1.giphy.com/media/H4H3NtVEWcoHS/giphy.gif?cid=ecf05e47k2clovb2vkqduut5l5gy84264ugrj38g2lm6hh8l&rid=giphy.gif",
	},
	twentyfour={
	title: "Silent Night",
	video_id: "sMvURdq8V6U",
	blurb: "Composed in 1818 by Franz Xaver Gruber to lyrics by Joseph Mohr in the small town of Oberndorf bei Salzburg, Austria. It was declared an intangible cultural heritage by UNESCO in 2011. The song has been recorded by a large number of singers from every music genre. The version sung by Bing Crosby is the third best-selling single of all-time.",
	icon: "https://media2.giphy.com/media/oUM2k2cif7jSE/giphy.gif?cid=ecf05e479bm6bnknt8h4zas8h41hyi06l82jm87hpu1cg2dn&rid=giphy.gif",
	},
	]
	</script>
	console.clear()
	var casa = document.querySelector('#advent_house')
	var block_count = 24

	var dateObj = new Date();
	var month = dateObj.getMonth() + 1; //months from 1-12
	var day = dateObj.getDate();
	// console.log(month+' / '+day)
	// day = 5
	document.querySelector('#todays_date span').innerHTML = day

	function blocks() {
	var b = document.createElement('div')
	b.className = 'block'

	var wf = document.createElement('div')
	wf.className = 'window_frame'
	wf.style.backgroundImage = 'url('+songs[i].icon+')'

	var w = document.createElement('div')
	w.className = 'window'

	var n = document.createElement('div')
	n.className = 'number'
	n.innerText = i+1

	casa.appendChild(b).appendChild(wf).append(n,w)
	}

	for(var i=0;i<block_count;i++){
	blocks()
	}

	var goods = document.querySelector('#the_days_goods')
	var content = document.querySelector('#goods_content')
	var yt = 'https://www.youtube.com/embed/'
	setTimeout(function(){
	var win = document.querySelectorAll('.window_frame')
	win.forEach(function(elm){
	elm.addEventListener('click', function(e){
	var num = Number(elm.children[0].innerHTML) - 1
	if(num + 1 <= day \|\| e.ctrlKey \|\| e.metaKey){
	if(!elm.children[1].classList.contains('open_window')){
	content.children[0].innerHTML = songs[num].title
	content.children[1].src = yt+songs[num].video_id
	content.children[2].innerHTML = songs[num].blurb

	elm.children[1].classList.toggle('open_window')
	goods.classList.toggle('show_goods')
	} else {
	content.children[0].innerHTML = songs[num].title
	content.children[1].src = yt+songs[num].video_id
	content.children[2].innerHTML = songs[num].blurb

	goods.classList.toggle('show_goods')
	}
	}
	})
	})

	window.addEventListener('dblclick', function(){
	var open_windows = document.querySelectorAll('.open_window')
	open_windows.forEach(function(el){
	el.classList.toggle('open_window')
	})

	if(localStorage.getItem('advent_calender')) {
	localStorage.removeItem('advent_calender')
	}
	})
	},250)

	var close_goods = document.querySelector('#close_goods')
	close_goods.addEventListener('click', function(){
	close_goods.parentElement.classList.toggle('show_goods')
	content.children[0].innerHTML = ""
	content.children[1].src = ""
	content.children[2].innerHTML = ""
	})

	function openPreviousWindows() {
	var windows = document.querySelectorAll('.window')
	var n = localStorage.getItem('advent_calender')
	if(n > 23) {
	n = 23
	}
	for(var i=0;i<n-1;i++){
	windows[i].classList.toggle('open_window')
	windows[n].scrollIntoView({behavior: "smooth", block: "end"});
	}
	localStorage.setItem('advent_calender', (day))
	}

	setTimeout(function(){
	if(localStorage.getItem('advent_calender')) {
	openPreviousWindows()
	} else {
	localStorage.setItem('advent_calender', day)
	}
	},500)
	* {
	scrollbar-width: thin;
	scrollbar-color: blue orange;
	}

	/* Works on Chrome/Edge/Safari */
	*::-webkit-scrollbar {
	width: 10px;
	}
	*::-webkit-scrollbar-track {
	background: white;
	}
	*::-webkit-scrollbar-thumb {
	background-color: gray;
	border-radius: 20px;
	border: 3px solid white;
	}
	#the_days_goods::-webkit-scrollbar {
	width: 0px;
	}
	body {
	padding:0;
	font-size:0;
	margin:0;
	width:100%;
	overflow-x:hidden;
	position:relative;
	background:linear-gradient(to top, #004, #000);
	font-family:'Montserrat', sans-serif;
	}

	#helpful_info {
	font-size:12px;
	background:white;
	color:#a00;
	position:fixed;
	top:0;
	right:-200px;
	box-sizing:border-box;
	padding:10px;
	width:200px;
	transition:.5s;
	cursor:pointer;
	}
	#helpful_info:before {
	content:'i';
	width:30px;
	height:30px;
	font-size:20px;
	text-align:center;
	line-height:30px;
	background:white;
	position:absolute;
	top:0;
	left:0;
	transform:translateX(-100%);
	}
	#helpful_info:hover {
	right:0;
	}
	#helpful_info ul {
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 20px;
	}
	#helpful_info li:first-child {
	margin-bottom:10px;
	}

	#logo_box {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%) rotate(180deg);
	width:100%;
	height:100%;
	box-sizing:border-box;
	padding-top:20px;
	background:rgba(255,255,255,.5);
	}

	#advent_logo {
	width:100%;
	max-width:600px;
	position:relative;
	margin:0 auto;
	}
	#advent_logo img {
	width:100%;
	}
	#advent_logo span {
	display:block;
	font-size:100px;
	line-height:100%;
	letter-spacing:5px;
	color:#a00;
	text-shadow:12px 12px rgba(0,0,0,.1);
	}
	#top_text {
	width:90%;
	max-width:473px;
	font-size:20px;
	line-height:150%;
	font-family:'Mali', 'Montserrat', sans-serif;
	color:#030;
	text-align:center;
	position:relative;
	margin:40px auto 0 auto;
	}

	#advent_house {
	width:95%;
	max-width:1300px;
	margin:0 auto 0 auto;
	padding:50px;
	box-sizing:border-box;
	background-color: silver;
	background-image: linear-gradient(335deg, #a00 23px, transparent 23px),
	linear-gradient(155deg, #b00 23px, transparent 23px),
	linear-gradient(335deg, #b00 23px, transparent 23px),
	linear-gradient(155deg, #b00 23px, transparent 23px);
	background-size: 58px 58px;
	background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
	background-blend-mode:multiply;
	text-align:center;
	position:relative;
	transform-origin:top center;
	/* transform:scale(.75); */
	}
	#roof {
	width:100%;
	max-width:1400px;
	height:33.33vh;
	background-color:white;
	/background-image:radial-gradient(circle at 50% 75%, #efefef 30px, transparent);/
	background-size: 50px 50px;
	content:'';
	position:relative;
	margin:0 auto;
	margin-top:50px;
	transform:rotate(180deg);
	clip-path:polygon(20% 100%, 80% 100%, 100% 0%, 0% 0%);
	}
	#roof_base {
	width:100%;
	max-width:1400px;
	height:40px;
	background-color:#fff;
	position:relative;
	margin:0 auto;
	box-shadow:0 10px 10px rgba(0,0,0,.5);
	z-index:9;
	}
	#todays_date {
	font-size:14px;
	text-align:center;
	color:#a00;
	line-height:40px;
	}

	#south_lawn {
	width:100vw;
	background:white;
	position:relative;
	}

	#south_lawn_text {
	font-family: 'Mali', serif;
	color: #a00;
	font-size: 36px;
	font-weight: 900;
	margin: 0 auto;
	width: 95%;
	max-width: 1300px;
	user-select: none;
	padding:25px 10px;
	}
	#south_lawn span {
	display: block;
	font-size: 14px;
	color: #a00;
	font-weight: 100;
	padding-bottom: 20px;
	}
	#south_lawn a {
	color:#a00;
	}

	#snow_box {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	pointer-events:none;
	background:url('https://i.gifer.com/3nRI.gif');
	opacity:.5;
	}

	.inside {
	width:100%;
	height:100%;
	background:white;
	/* box-shadow:0 0 5px rgba(0,0,0,.13); */
	}
	.block {
	width:100%;
	max-width:250px;
	height:33.33vh;
	/* outline:1px solid lightgray; */
	margin:25px;
	display:inline-block;
	font-size:36px;
	text-align:center;
	font-family:'Montserrat', cursive;
	color:lightgray;
	box-sizing:border-box;
	padding:40px;
	user-select:none;
	}

	.window_frame {
	width:100%;
	max-width:200px;
	height:100%;
	background-color:lightgray;
	background-position:50% 50%;
	background-repeat: no-repeat;
	background-size:cover;
	position:relative;
	box-shadow:inset 0 15px 15px rgba(0,0,0,.75);
	border:8px solid #410;
	border-bottom:0;
	box-shadow:16px 16px 0 rgba(0,0,0,.25);
	perspective:1000px;
	cursor:pointer;
	margin:0 auto;
	box-sizing:border-box;
	font-size:14px;
	color:black;
	}

	.window_frame:before {
	content:'';
	width:116%;
	height:40px;
	background:#410;
	position:absolute;
	left:-8%;
	top:-40px;
	clip-path:polygon(50% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%);
	z-index:-1;
	}
	.window_frame:after {
	content:'';
	width:116%;
	height:40px;
	background:var(--snowy-ledge), linear-gradient(to bottom, #410 30px, transparent 20px);
	background-size:100% 100%;
	position:absolute;
	left:-8%;
	top:100%;
	z-index:-1;
	}

	.window {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background:inherit;
	transition:.5s;
	transform-origin:left;
	transform:rotateY(0deg);
	overflow: hidden;
	}
	.window:before {
	content:'';
	width:100%;
	height:100%;
	background:inherit;
	position:absolute;
	left:0;
	top:0;
	box-shadow: inset 0 0 0 200px rgba(255,255,255,0.5);
	filter: blur(10px);
	}
	.window:after {
	width:100%;
	height:100%;
	background:#efefef;
	position:absolute;
	left:0;top:0;
	box-shadow:inset 0 0 0 1px black, inset 0 0 0 8px #410;
	border-bottom:3px solid black;
	background:linear-gradient(to right, transparent 90%, #410 90%), linear-gradient(to bottom, transparent 90%, #410 90%);
	background-size:50% 33.33%;
	content:'';
	}
	.open_window {
	transform:rotateY(-105deg);
	}
	.open_window:before {
	box-shadow: inset 0 0 0 200px rgba(255,255,255,0.6);
	}

	.number {
	width:30px;
	height:30px;
	position:absolute;
	top:0%;
	left:50%;
	transform:translate(-60%,-110%);
	font-size:20px;
	line-height:30px;
	z-index:0;
	pointer-events:none;
	/* background:#520; */
	border-radius:50%;
	color:#efefef;
	}

	#the_days_goods {
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:rgba(0,0,0,.98);
	overflow:auto;
	opacity:0;
	pointer-events:none;
	overscroll-behavior: contain;
	box-sizing:border-box;
	padding:40px 15px;
	z-index:999;
	}

	.show_goods {
	animation:show_goods 1s linear .5s forwards;
	pointer-events:auto !important;
	}
	@keyframes show_goods {
	100% { opacity:1; }
	}

	#close_goods {
	font-size:48px;
	line-height:48px;
	position:absolute;
	top:0;
	right:15px;
	font-weight:300;
	cursor:pointer;
	z-index:99;
	color:white;
	}

	#goods_content {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	/* overflow: hidden; */
	max-width: 800px;
	max-height:450px;
	box-sizing:border-box;
	margin:0 auto;
	font-size:20px;
	}

	#goods_content h1 {
	font-size:36px;
	line-height:100%;
	color:white;
	padding-top:60%;
	}

	#goods_content iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height:450px;
	background:url('https://upload.wikimedia.org/wikipedia/commons/a/ad/YouTube_loading_symbol_3_%28transparent%29.gif');
	background-size:150px 150px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	}

	#goods_content p {
	color:white;
	font-size:14px;
	line-height:200%;
	max-width:600px;
	padding-bottom:50px;
	}

	@media screen and (max-width:750px) {
	#roof {
	clip-path:polygon(5% 100%, 95% 100%, 100% 0%, 0% 0%);
	margin-top:25px;
	}
	#top_text {
	font-size:15px;
	}
	.block {
	width:100%;
	padding:40px 0;
	margin:25px auto;
	}
	#south_lawn_text {
	font-size:34px;
	}
	#helpful_info {
	display:none;
	}
	}


	:root {
	--snowy-ledge:url('data:image/png;base64,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');
	}