body,html{margin:0;padding:0;font-family:Bahnschrift,Roboto,Sans;min-height:100%}body{background:url(images/background.jpg) 50%/cover no-repeat;background-color:#2f4f4f;background-blend-mode:hard-light;will-change:opacity}#particles-js{position:absolute;top:0;left:0;z-index:0;opacity:.6}#frosted-glass{top:20px;background:inherit;width:100%;height:90px;position:relative;overflow:hidden;opacity:.95;margin-bottom:4em}#frosted-glass:before{content:"";background:inherit;position:absolute;width:calc(100% + 50px);height:140px;right:0;top:-25px;left:-25px;bottom:0;-webkit-box-shadow:inset 0 0 0 600px hsla(0,0%,51%,.2);box-shadow:inset 0 0 0 600px hsla(0,0%,51%,.2);-webkit-filter:blur(10px);filter:blur(10px)}.header{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.title{text-transform:uppercase;text-align:center;color:#f5f5f5;font-size:2.5em}.btn,.title{position:relative}.btn{border:none;width:90px;height:50%;background:transparent 50%/contain no-repeat;margin:0 30px;cursor:pointer}.btn,.btn:active,.btn:focus{outline:none}#shuffle-btn{background-image:url(images/shuffle-icon.svg)}#mute-btn{background-image:url(images/mute-icon.svg)}.door-wrapper{position:relative;height:100%;width:90%;margin:0 auto;display:-ms-grid;display:grid;grid-template:repeat(8,17rem)/repeat(3,1fr);grid-gap:15px;-ms-grid-columns:(1fr 15px)[2] 1fr;-ms-grid-rows:(12em 15px)[7] 12em}.door{background:url(images/xmas-ball.png) 50%/cover no-repeat;background-color:rgba(0,0,0,.9);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;border-radius:5%;cursor:pointer}.door-1,.door-4,.door-7,.door-10,.door-13,.door-16,.door-19,.door-22{-ms-grid-column:1}.door-2,.door-5,.door-8,.door-11,.door-14,.door-17,.door-20,.door-23{-ms-grid-column:3}.door-3,.door-6,.door-9,.door-12,.door-15,.door-18,.door-21,.door-24{-ms-grid-column:5}.door-1,.door-2,.door-3{-ms-grid-row:1}.door-4,.door-5,.door-6{-ms-grid-row:3}.door-7,.door-8,.door-9{-ms-grid-row:5}.door-10,.door-11,.door-12{-ms-grid-row:7}.door-13,.door-14,.door-15{-ms-grid-row:9}.door-16,.door-17,.door-18{-ms-grid-row:11}.door-19,.door-20,.door-21{-ms-grid-row:13}.door-22,.door-23,.door-24{-ms-grid-row:15}.door:active p,.door:hover{text-shadow:2px 1px 4px #789}.door:active p{color:rgba(184,20,34,.85)}.date{font-size:4em;font-weight:700;margin:0 0 8% 8%;color:#f5f5f5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.content-wrapper{position:relative;height:100%;width:90%;margin:0 auto}.header-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:20px;background-color:rgba(0,0,0,.8);padding:2% 5%}#back-btn{background-image:url(images/back-icon.svg);height:60px;width:60px;margin:0}.header-wrapper h2{font-size:3em;font-weight:700;margin:0}.content-wrapper p,.header-wrapper h2{color:#f5f5f5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.content-wrapper p{font-size:2em;line-height:1.3em;font-weight:lighter;padding:2% 5%;border-radius:20px;background-color:rgba(0,0,0,.8)}@media screen and (min-width:1224px){body{background-attachment:fixed}.door-wrapper,.header,.header-wrapper{max-width:1200px}.door-wrapper{grid-template:repeat(4,1fr) 25px/repeat(6,1fr);grid-gap:.75%;height:800px;width:80%;-ms-grid-columns:(1fr 15px)[5] 1fr;-ms-grid-rows:(1fr 15px)[3] 1fr}.door:active,.door:hover{background-image:url(images/xmas-ball.gif)}.door-1,.door-7,.door-13,.door-19{-ms-grid-column:1}.door-2,.door-8,.door-14,.door-20{-ms-grid-column:3}.door-3,.door-9,.door-15,.door-21{-ms-grid-column:5}.door-4,.door-10,.door-16,.door-22{-ms-grid-column:7}.door-5,.door-11,.door-17,.door-23{-ms-grid-column:9}.door-6,.door-12,.door-18,.door-24{-ms-grid-column:11}.door-1,.door-2,.door-3,.door-4,.door-5,.door-6{-ms-grid-row:1}.door-7,.door-8,.door-9,.door-10,.door-11,.door-12{-ms-grid-row:3}.door-13,.door-14,.door-15,.door-16,.door-17,.door-18{-ms-grid-row:5}.door-19,.door-20,.door-21,.door-22,.door-23,.door-24{-ms-grid-row:7}.content-wrapper{max-width:1200px;height:400px;width:80%}.content-wrapper p{font-size:1.4em;line-height:1.3em}}@media screen and (max-width:1224px){.title{font-size:3.5em}#frosted-glass{height:160px;background-position:top}#frosted-glass:before{height:210px}}.disabled,.disabled:active,.disabled:hover{cursor:default;background-image:url(images/xmas-ball.png)}.disabled:active p,.disabled p{color:grey}.hidden{display:none}