body { background-color: #4b234b; margin: 0; padding: 0; }

main { width: 100%; height: calc(100vh - 80px); padding: 40px 0; }

#scroll { position: fixed; background-color: rgba(0, 0, 0, 0.7); width: 56px; height: 56px; line-height: 56px; text-align: center; font-size: 20px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease-in-out; color: white; z-index: 100; }

#scroll:hover { transition: all 0.3s ease-in-out; background-color: rgba(0, 0, 0, 0.9); }

#scroll { bottom: 48px; right: 48px; }

#comment { bottom: 120px; right: 48px; }

@media only screen and (max-width: 768px) { #scroll { right: 24px; font-size: 16px; width: 48px; height: 48px; line-height: 48px; bottom: 24px; } }

/* Intro Page */
#intro { display: flex; flex-direction: column; justify-content: center; align-items: center; }

#intro-display { position: relative; top: 0; transition: all 0.3s ease-in-out; border-radius: 100%; z-index: 0; width: 300px; margin: 0 auto; margin-bottom: 40px; /* added small blur every 6 snowflakes*/ }

#intro-display:hover { top: -20px; transition: all 0.3s ease-in-out; }

#intro-display #snow-globe { position: relative; aspect-ratio: 1; border-radius: 100%; z-index: 0; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.38); display: flex; align-items: center; justify-content: center; }

#intro-display #snow-globe .snow-text { text-align: center; font-family: "Balsamiq Sans"; font-weight: 700; font-style: italic; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; border-radius: 100%; overflow: hidden; background: rgba(255, 255, 255, 0.22); background: -webkit-linear-gradient(300deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)); background: -moz-linear-gradient(300deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)); background: -o-linear-gradient(300deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)); background: linear-gradient(300deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)); font-size: 3em; position: absolute; }

#intro-display #snow-globe .snow-intro { position: absolute; top: 0; overflow: hidden; width: 100%; height: 100%; position: relative; }

#intro-display #snow-globe .snow-intro #house { transform-origin: center; transform: scale(0.8); left: -8%; top: 5px; position: relative; }

#intro-display #snow-globe .snow-intro #house .tree1 { height: 0; width: 0; border-bottom: 120px solid #5b6b09; border-left: 20px solid transparent; border-right: 20px solid transparent; position: relative; left: 70px; top: 120px; }

#intro-display #snow-globe .snow-intro #house .tree2 { height: 0; width: 0; border-bottom: 90px solid #718710; border-left: 24px solid transparent; border-right: 24px solid transparent; position: relative; left: 90px; top: 30px; }

#intro-display #snow-globe .snow-intro #house .house { position: relative; bottom: 78px; left: 146px; }

#intro-display #snow-globe .snow-intro #house .roof1 { height: 60px; width: 12px; background-color: #7e110f; transform: skew(30deg); -webkit-transform: skew(30deg); position: relative; left: 112px; bottom: 18.5px; }

#intro-display #snow-globe .snow-intro #house .wall1 { height: 0; width: 0; border-bottom: 53px solid #c44e0e; border-left: 30px solid transparent; border-right: 31px solid transparent; position: relative; bottom: 75px; left: 68px; }

#intro-display #snow-globe .snow-intro #house .wall2 { height: 70px; background-color: #c44e0e; width: 150px; position: relative; bottom: 75px; right: 21px; }

#intro-display #snow-globe .snow-intro #house .wall3 { background-color: #b40f0c; height: 60px; width: 105px; transform: skew(-30deg); -webkit-transform: skew(-30deg); position: relative; bottom: 201.5px; right: 16.5px; }

#intro-display #snow-globe .snow-intro #house .light { background-color: #ef7421; width: 90px; height: 50px; position: relative; top: 20px; }

#intro-display #snow-globe .snow-intro #house .b1 { background-color: #460701; height: 60px; width: 3px; position: relative; left: 9px; }

#intro-display #snow-globe .snow-intro #house .b2 { background-color: #460701; height: 6px; width: 10px; position: relative; bottom: 6px; }

#intro-display #snow-globe .snow-intro #house .b4 { background-color: #460701; height: 59px; width: 3px; position: relative; left: 103px; bottom: 5px; }

#intro-display #snow-globe .snow-intro #house .b3 { background-color: #7b0f0c; height: 5px; width: 106px; position: relative; top: 55px; }

#intro-display #snow-globe .snow-intro #house .w1, #intro-display #snow-globe .snow-intro #house .w2 { background-color: #700205; height: 30px; width: 25px; position: relative; }

#intro-display #snow-globe .snow-intro #house .w1 { top: 5px; left: 20px; }

#intro-display #snow-globe .snow-intro #house .w2 { bottom: 25px; left: 50px; }

#intro-display #snow-globe .snow-intro #house .window { background-color: #89c6c5; height: 23px; width: 19px; border: 2px solid white; position: relative; top: 2px; left: 3px; }

#intro-display #snow-globe .snow-intro #house .glass { height: 0; width: 0; border-top: 23px solid rgba(255, 255, 255, 0.5); border-right: 17px solid transparent; }

#intro-display #snow-globe .snow-intro #house .w3 { background-color: #982c19; height: 18px; width: 16px; position: relative; top: 40px; right: 3px; z-index: 1; }

#intro-display #snow-globe .snow-intro #house .window1 { background-color: #89c6c5; height: 10px; width: 10px; border: 1.3px solid white; position: relative; top: 2.5px; }

#intro-display #snow-globe .snow-intro #house .glass1 { height: 0; width: 0; border-top: 10px solid rgba(255, 255, 255, 0.3); border-right: 10px solid transparent; }

#intro-display #snow-globe .snow-intro #house .door { background-color: #7f1414; height: 40px; width: 20px; position: relative; bottom: 20px; left: 112px; border-right: 2px solid #ef2021; }

#intro-display #snow-globe .snow-intro #house .handle { height: 8px; width: 4px; background-color: #cccccc; position: relative; top: 16px; left: 3px; }

#intro-display #snow-globe .snow-intro #house .chimney { background-color: #c85012; height: 22px; width: 20px; transform: skew(30deg); -webkit-transform: skew(30deg); position: relative; bottom: 75px; left: 55px; }

#intro-display #snow-globe .snow-intro #house .shne1 { background-color: #ef7421; height: 14px; width: 14px; position: relative; bottom: 20px; left: 5px; }

#intro-display #snow-globe .snow-intro #house .shne2 { background-color: #ef7421; height: 10px; width: 20px; position: relative; bottom: 47px; }

#intro-display #snow-globe .snow-intro #house .top { background-color: #c85012; height: 10px; width: 28px; position: relative; bottom: 5px; right: 4px; }

#intro-display #snow-globe .snow-intro #house .s1, #intro-display #snow-globe .snow-intro #house .s2, #intro-display #snow-globe .snow-intro #house .s3 { background-color: #423f3f; height: 10px; opacity: 0.2; border-radius: 10px; position: relative; margin-bottom: 2px; }

#intro-display #snow-globe .snow-intro #house .s1 { width: 35px; }

#intro-display #snow-globe .snow-intro #house .s2 { width: 27px; left: 8px; }

#intro-display #snow-globe .snow-intro #house .s3 { height: 7px; width: 15px; left: 25px; }

#intro-display #snow-globe .snow-intro #house .cover { background-color: rgba(255, 255, 255, 0.2); height: 350px; width: 350px; border-radius: 50%; position: relative; bottom: 842px; }

#intro-display #snow-globe .snow-intro #house .bottom { background-color: #c1272e; height: 70px; width: 260px; position: relative; bottom: 880px; left: 47px; }

#intro-display #snow-globe .snow-intro #house .sn { background-color: white; width: 40px; height: 5px; transform: skew(30deg); -webkit-transform: skew(30deg); border-radius: 5px; position: relative; bottom: 36px; left: 5px; }

#intro-display #snow-globe .snow-intro #house .sn1 { background-color: white; width: 30px; height: 5px; transform: skew(30deg); -webkit-transform: skew(30deg); border-radius: 5px; position: relative; bottom: 41px; left: 55px; }

#intro-display #snow-globe .snow-intro #house .dr1, #intro-display #snow-globe .snow-intro #house .dr2, #intro-display #snow-globe .snow-intro #house .dr3, #intro-display #snow-globe .snow-intro #house .dr4 { background-color: white; border-radius: 5px; position: relative; height: 10px; width: 4px; }

#intro-display #snow-globe .snow-intro #house .dr1 { top: 4px; left: 5px; }

#intro-display #snow-globe .snow-intro #house .dr2 { bottom: 8px; left: 15px; }

#intro-display #snow-globe .snow-intro #house .dr3 { height: 8px; width: 8px; border-radius: 50%; left: 29px; bottom: 19px; }

#intro-display #snow-globe .snow-intro #house .dr4 { left: 22px; }

#intro-display #snow-globe .snow-intro #house .snw1 { background-color: white; height: 15px; width: 25px; position: relative; bottom: 30px; left: 7px; border-radius: 20px 20px 0 0; }

#intro-display #snow-globe .snow-intro #house .snw2 { background-color: white; height: 12px; width: 12px; position: relative; bottom: 40px; left: 31px; border-radius: 50%; }

#intro-display #snow-globe .snow-intro #house .sh1, #intro-display #snow-globe .snow-intro #house .sh2, #intro-display #snow-globe .snow-intro #house .sh3, #intro-display #snow-globe .snow-intro #house .sh4, #intro-display #snow-globe .snow-intro #house .sh5 { background-color: #d33c3c; height: 6px; transform: skew(30deg); -webkit-transform: skew(30deg); width: 23px; border-radius: 15px; position: relative; }

#intro-display #snow-globe .snow-intro #house .sh1 { bottom: 56px; left: 70px; }

#intro-display #snow-globe .snow-intro #house .sh2 { bottom: 68px; left: 2px; }

#intro-display #snow-globe .snow-intro #house .sh3 { bottom: 95px; left: 47px; }

#intro-display #snow-globe .snow-intro #house .sh4 { bottom: 108px; left: 6px; }

#intro-display #snow-globe .snow-intro #house .sh5 { bottom: 95px; left: 38px; }

#intro-display #snow-globe .snow-intro #house .fence { position: relative; bottom: 1008px; left: 103px; }

#intro-display #snow-globe .snow-intro #house .fn1, #intro-display #snow-globe .snow-intro #house .fn2, #intro-display #snow-globe .snow-intro #house .fn3 { background-color: #b40f0c; height: 25px; width: 7px; position: relative; border-radius: 25px 25px 0 0; }

#intro-display #snow-globe .snow-intro #house .fn2 { bottom: 25px; left: 12px; }

#intro-display #snow-globe .snow-intro #house .fn3 { bottom: 50px; left: 24px; }

#intro-display #snow-globe .snow-intro #house .screw { background-color: #cccccc; height: 3px; width: 3px; position: relative; border-radius: 50%; left: 1.6px; top: 11px; z-index: 2; }

#intro-display #snow-globe .snow-intro #house .stck { background-color: #7d151f; position: relative; width: 46px; height: 6px; right: 8px; bottom: 65px; }

#intro-display #snow-globe .snow-intro .snow-floor { background-color: white; width: 200px; height: 50px; border-radius: 16px; position: absolute; bottom: 0; left: 50px; }

#intro-display .snowflake-intro { --size: 1vw; width: var(--size); height: var(--size); background: white; border-radius: 50%; position: absolute; top: -5vh; }

#intro-display .snowflake-intro:nth-child(1) { --size: 4px; --left-ini: -44px; --left-end: 252px; left: 172px; animation: snowfall 8s linear infinite; animation-delay: -9s; }

#intro-display .snowflake-intro:nth-child(2) { --size: 6px; --left-ini: -43px; --left-end: 258px; left: 255px; animation: snowfall 10s linear infinite; animation-delay: -4s; }

#intro-display .snowflake-intro:nth-child(3) { --size: 6px; --left-ini: -41px; --left-end: 258px; left: 207px; animation: snowfall 11s linear infinite; animation-delay: -4s; }

#intro-display .snowflake-intro:nth-child(4) { --size: 4px; --left-ini: -46px; --left-end: 255px; left: 272px; animation: snowfall 12s linear infinite; animation-delay: -7s; }

#intro-display .snowflake-intro:nth-child(5) { --size: 8px; --left-ini: -45px; --left-end: 256px; left: 260px; animation: snowfall 8s linear infinite; animation-delay: -3s; }

#intro-display .snowflake-intro:nth-child(6) { --size: 8px; --left-ini: -49px; --left-end: 256px; left: 92px; animation: snowfall 13s linear infinite; animation-delay: -3s; }

#intro-display .snowflake-intro:nth-child(7) { --size: 10px; --left-ini: -47px; --left-end: 251px; left: 125px; animation: snowfall 6s linear infinite; animation-delay: -6s; }

#intro-display .snowflake-intro:nth-child(8) { --size: 4px; --left-ini: -44px; --left-end: 257px; left: 45px; animation: snowfall 8s linear infinite; animation-delay: -2s; }

#intro-display .snowflake-intro:nth-child(9) { --size: 10px; --left-ini: -47px; --left-end: 258px; left: 167px; animation: snowfall 7s linear infinite; animation-delay: -4s; }

#intro-display .snowflake-intro:nth-child(10) { --size: 2px; --left-ini: -47px; --left-end: 258px; left: 156px; animation: snowfall 14s linear infinite; animation-delay: -4s; }

#intro-display .snowflake-intro:nth-child(11) { --size: 6px; --left-ini: -49px; --left-end: 256px; left: 169px; animation: snowfall 11s linear infinite; animation-delay: -10s; }

#intro-display .snowflake-intro:nth-child(12) { --size: 10px; --left-ini: -44px; --left-end: 258px; left: 127px; animation: snowfall 14s linear infinite; animation-delay: -7s; }

#intro-display .snowflake-intro:nth-child(13) { --size: 10px; --left-ini: -45px; --left-end: 259px; left: 276px; animation: snowfall 12s linear infinite; animation-delay: -3s; }

#intro-display .snowflake-intro:nth-child(14) { --size: 2px; --left-ini: -44px; --left-end: 252px; left: 293px; animation: snowfall 9s linear infinite; animation-delay: -10s; }

#intro-display .snowflake-intro:nth-child(15) { --size: 10px; --left-ini: -41px; --left-end: 258px; left: 183px; animation: snowfall 10s linear infinite; animation-delay: -10s; }

#intro-display .snowflake-intro:nth-child(16) { --size: 2px; --left-ini: -48px; --left-end: 255px; left: 70px; animation: snowfall 10s linear infinite; animation-delay: -6s; }

#intro-display .snowflake-intro:nth-child(17) { --size: 8px; --left-ini: -49px; --left-end: 256px; left: 74px; animation: snowfall 13s linear infinite; animation-delay: -10s; }

#intro-display .snowflake-intro:nth-child(18) { --size: 10px; --left-ini: -40px; --left-end: 260px; left: 15px; animation: snowfall 13s linear infinite; animation-delay: -10s; }

#intro-display .snowflake-intro:nth-child(19) { --size: 8px; --left-ini: -48px; --left-end: 256px; left: 110px; animation: snowfall 9s linear infinite; animation-delay: -4s; }

#intro-display .snowflake-intro:nth-child(20) { --size: 2px; --left-ini: -43px; --left-end: 254px; left: 290px; animation: snowfall 14s linear infinite; animation-delay: -4s; }

#intro-display .snowflake-intro:nth-child(21) { --size: 6px; --left-ini: -40px; --left-end: 256px; left: 42px; animation: snowfall 6s linear infinite; animation-delay: -4s; }

#intro-display .snowflake-intro:nth-child(22) { --size: 8px; --left-ini: -44px; --left-end: 260px; left: 114px; animation: snowfall 10s linear infinite; animation-delay: -3s; }

#intro-display .snowflake-intro:nth-child(23) { --size: 10px; --left-ini: -43px; --left-end: 253px; left: 105px; animation: snowfall 10s linear infinite; animation-delay: -10s; }

#intro-display .snowflake-intro:nth-child(24) { --size: 6px; --left-ini: -40px; --left-end: 257px; left: 193px; animation: snowfall 9s linear infinite; animation-delay: -1s; }

#intro-display .snowflake-intro:nth-child(25) { --size: 6px; --left-ini: -42px; --left-end: 253px; left: 262px; animation: snowfall 6s linear infinite; animation-delay: -8s; }

#intro-display .snowflake-intro:nth-child(26) { --size: 2px; --left-ini: -46px; --left-end: 260px; left: 38px; animation: snowfall 10s linear infinite; animation-delay: -4s; }

#intro-display .snowflake-intro:nth-child(27) { --size: 8px; --left-ini: -47px; --left-end: 256px; left: 187px; animation: snowfall 15s linear infinite; animation-delay: -8s; }

#intro-display .snowflake-intro:nth-child(28) { --size: 10px; --left-ini: -46px; --left-end: 256px; left: 262px; animation: snowfall 10s linear infinite; animation-delay: -6s; }

#intro-display .snowflake-intro:nth-child(29) { --size: 6px; --left-ini: -46px; --left-end: 251px; left: 66px; animation: snowfall 6s linear infinite; animation-delay: -7s; }

#intro-display .snowflake-intro:nth-child(30) { --size: 2px; --left-ini: -40px; --left-end: 256px; left: 261px; animation: snowfall 12s linear infinite; animation-delay: -6s; }

#intro-display .snowflake-intro:nth-child(31) { --size: 4px; --left-ini: -40px; --left-end: 251px; left: 5px; animation: snowfall 11s linear infinite; animation-delay: -2s; }

#intro-display .snowflake-intro:nth-child(32) { --size: 4px; --left-ini: -47px; --left-end: 255px; left: 196px; animation: snowfall 8s linear infinite; animation-delay: -7s; }

#intro-display .snowflake-intro:nth-child(33) { --size: 4px; --left-ini: -43px; --left-end: 252px; left: 34px; animation: snowfall 7s linear infinite; animation-delay: -3s; }

#intro-display .snowflake-intro:nth-child(34) { --size: 8px; --left-ini: -45px; --left-end: 260px; left: 170px; animation: snowfall 15s linear infinite; animation-delay: -5s; }

#intro-display .snowflake-intro:nth-child(35) { --size: 2px; --left-ini: -43px; --left-end: 256px; left: 136px; animation: snowfall 7s linear infinite; animation-delay: -6s; }

#intro-display .snowflake-intro:nth-child(36) { --size: 2px; --left-ini: -40px; --left-end: 256px; left: 230px; animation: snowfall 14s linear infinite; animation-delay: -1s; }

#intro-display .snowflake-intro:nth-child(37) { --size: 2px; --left-ini: -44px; --left-end: 259px; left: 52px; animation: snowfall 6s linear infinite; animation-delay: -8s; }

#intro-display .snowflake-intro:nth-child(38) { --size: 6px; --left-ini: -44px; --left-end: 259px; left: 10px; animation: snowfall 10s linear infinite; animation-delay: -10s; }

#intro-display .snowflake-intro:nth-child(39) { --size: 2px; --left-ini: -49px; --left-end: 258px; left: 238px; animation: snowfall 10s linear infinite; animation-delay: -2s; }

#intro-display .snowflake-intro:nth-child(40) { --size: 4px; --left-ini: -47px; --left-end: 252px; left: 8px; animation: snowfall 6s linear infinite; animation-delay: -10s; }

#intro-display .snowflake-intro:nth-child(41) { --size: 8px; --left-ini: -47px; --left-end: 259px; left: 226px; animation: snowfall 13s linear infinite; animation-delay: -7s; }

#intro-display .snowflake-intro:nth-child(42) { --size: 10px; --left-ini: -45px; --left-end: 259px; left: 175px; animation: snowfall 7s linear infinite; animation-delay: -2s; }

#intro-display .snowflake-intro:nth-child(43) { --size: 10px; --left-ini: -48px; --left-end: 256px; left: 55px; animation: snowfall 14s linear infinite; animation-delay: -4s; }

#intro-display .snowflake-intro:nth-child(44) { --size: 4px; --left-ini: -46px; --left-end: 257px; left: 95px; animation: snowfall 14s linear infinite; animation-delay: -3s; }

#intro-display .snowflake-intro:nth-child(45) { --size: 8px; --left-ini: -44px; --left-end: 256px; left: 98px; animation: snowfall 6s linear infinite; animation-delay: -7s; }

#intro-display .snowflake-intro:nth-child(46) { --size: 2px; --left-ini: -46px; --left-end: 252px; left: 18px; animation: snowfall 11s linear infinite; animation-delay: -1s; }

#intro-display .snowflake-intro:nth-child(47) { --size: 10px; --left-ini: -43px; --left-end: 255px; left: 204px; animation: snowfall 14s linear infinite; animation-delay: -4s; }

#intro-display .snowflake-intro:nth-child(48) { --size: 6px; --left-ini: -41px; --left-end: 257px; left: 35px; animation: snowfall 6s linear infinite; animation-delay: -1s; }

#intro-display .snowflake-intro:nth-child(49) { --size: 4px; --left-ini: -46px; --left-end: 252px; left: 248px; animation: snowfall 10s linear infinite; animation-delay: -1s; }

#intro-display .snowflake-intro:nth-child(50) { --size: 8px; --left-ini: -40px; --left-end: 259px; left: 5px; animation: snowfall 10s linear infinite; animation-delay: -10s; }

#intro-display .snowflake-intro:nth-child(51) { --size: 10px; --left-ini: -43px; --left-end: 258px; left: 256px; animation: snowfall 14s linear infinite; animation-delay: -7s; }

#intro-display .snowflake-intro:nth-child(52) { --size: 10px; --left-ini: -46px; --left-end: 260px; left: 227px; animation: snowfall 8s linear infinite; animation-delay: -9s; }

#intro-display .snowflake-intro:nth-child(53) { --size: 4px; --left-ini: -40px; --left-end: 256px; left: 69px; animation: snowfall 6s linear infinite; animation-delay: -10s; }

#intro-display .snowflake-intro:nth-child(54) { --size: 2px; --left-ini: -44px; --left-end: 251px; left: 148px; animation: snowfall 15s linear infinite; animation-delay: -9s; }

#intro-display .snowflake-intro:nth-child(55) { --size: 8px; --left-ini: -40px; --left-end: 255px; left: 171px; animation: snowfall 13s linear infinite; animation-delay: -3s; }

#intro-display .snowflake-intro:nth-child(56) { --size: 8px; --left-ini: -49px; --left-end: 255px; left: 6px; animation: snowfall 9s linear infinite; animation-delay: -5s; }

#intro-display .snowflake-intro:nth-child(57) { --size: 6px; --left-ini: -43px; --left-end: 257px; left: 36px; animation: snowfall 7s linear infinite; animation-delay: -6s; }

#intro-display .snowflake-intro:nth-child(58) { --size: 6px; --left-ini: -41px; --left-end: 255px; left: 194px; animation: snowfall 14s linear infinite; animation-delay: -9s; }

#intro-display .snowflake-intro:nth-child(59) { --size: 2px; --left-ini: -41px; --left-end: 259px; left: 84px; animation: snowfall 6s linear infinite; animation-delay: -8s; }

#intro-display .snowflake-intro:nth-child(60) { --size: 2px; --left-ini: -41px; --left-end: 251px; left: 61px; animation: snowfall 14s linear infinite; animation-delay: -3s; }

#intro-display .snowflake-intro:nth-child(6n) { filter: blur(1px); }

#intro-display .bottom { background-color: #c1272e; height: 70px; width: 240px; left: 30px; position: relative; top: -30px; }

#intro-display .bottom .bt1, #intro-display .bottom .bt2 { background-color: #d33c3c; height: 20px; width: 260px; position: relative; right: 10px; border-radius: 10px; }

#intro-display .bottom .bt2 { bottom: -40px; }

@keyframes snowfall { 0% { transform: translate3d(var(--left-ini), 0, 0); }
  100% { transform: translate3d(var(--left-end), 300px, 0); } }

#message { text-align: center; font-family: "Jua"; color: white; max-width: 700px; width: 90%; font-size: 1.5em; word-break: keep-all; }

#nav { font-family: "Jua"; color: white; font-size: 1.5em; text-align: center; text-decoration: none; display: block; margin: 0 auto; }

/* Display Page */
#advent { margin: 40px auto; width: 90%; display: grid; max-width: 450px; aspect-ratio: 1/3; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(9, 1fr); gap: 12px; /* Patterns & colors */ }

#advent :nth-of-type(5n-4) .cover { background-color: #2f3029; color: #f5eed7; }

#advent :nth-of-type(5n-3) .cover { background-color: #b73a3b; color: #f5eed7; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 100 100'><circle cx='25' cy='25' r='15' fill='%239B2D2B'/><circle cx='75' cy='75' r='16' fill='%239B2D2B'/></svg>"); }

#advent :nth-of-type(5n-2) .cover { background-color: #f5eed7; color: #252721; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='47.5' height='47.5' viewBox='0 0 100 100'><path d='M 25 10 L 25 17 M 25 33 L 25 40 M 10 25 L 17 25 M 33 25 L 40 25' stroke='%23CD803D' stroke-width='6' stroke-linecap='round' /><circle cx='75' cy='75' r='4' fill='%23CD803D'/></svg>"); }

#advent :nth-of-type(5n-1) .cover { background-color: #b7c7b0; color: #252721; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 120 120'><polygon fill='%2393A891' points='120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120 '/></svg>"); }

#advent :nth-of-type(5n-0) .cover { background-color: #b73a3b; color: #f5eed7; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 100 100'><path d='M 0 25 L 25 0 M 0 50 L 50 0 M 0 75 L 75 0 M 0 100 L 100 0 M 0 125 L 125 0 M 0 150 L 150 0 M 0 175 L 175 0' stroke='%239B2D2B' stroke-width='6' /></svg>"); }

#advent .post { border-radius: 8px; position: relative; z-index: 1; place-self: stretch; cursor: pointer; }

#advent .post .cover, #advent .post .link { width: 100%; height: 100%; border-radius: 12px; display: flex; justify-content: center; align-items: center; }

#advent .post .cover { position: absolute; top: 0; left: 0; transition: 1s ease-in-out; transform-origin: left top; flex-direction: column; font-family: "Jua"; }

#advent .post .cover .to { font-size: 1.5em; margin-bottom: 8px; }

#advent .post .cover .to_twt { font-size: 0.8em; }

#advent .post .link { background-color: #f5eed7; font-family: "Jua"; }

#advent .post .link a { width: 100%; padding: 4px; height: 100%; display: flex; justify-content: center; align-items: center; text-decoration: none; text-align: center; word-break: keep-all; color: black; }

#advent .post .link a:hover { color: gray; }

#advent .post:hover, #advent .post:focus, #advent .post:active { z-index: 10; }

#advent .post:hover .cover, #advent .post:focus .cover, #advent .post:active .cover { transform: rotateY(-100deg); }

#advent :nth-of-type(1) { grid-column: 2; grid-row: 1/3; }

#advent :nth-of-type(6) { grid-column: 1/3; grid-row: 5; }

#advent :nth-of-type(9) { grid-column: 3; grid-row: 3/5; }

#advent :nth-of-type(12) { grid-column: 1; grid-row: 3/5; }

#advent :nth-of-type(13) { grid-column: 2/4; grid-row: 6; }

#advent :nth-of-type(17) { grid-column: 1; grid-row: 7/9; }

@media only screen and (max-width: 450px) { #message { font-size: 1em; } #advent .post .cover .to { font-size: 1em; margin-bottom: 8px; } #advent .post .cover .to_twt { font-size: 0.6em; } #advent .post .link a { font-size: 0.8em; } }

/* List Display */
#list { width: 80%; max-width: 700px; margin: 40px auto; }

#list .post { text-decoration: none; border-radius: 8px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; place-self: stretch; padding: 16px 0; margin-bottom: 1em; cursor: pointer; font-family: "Jua"; }

#list .post #wrapper { display: flex; justify-content: space-around; }

#list .post #wrapper .inner-wrapper { display: flex; flex-direction: column; align-items: center; margin: 0 20px; }

#list .post .cover, #list .post .link { width: 100%; height: 100%; border-radius: 12px; display: flex; justify-content: center; align-items: center; }

#list .post .to { font-size: 1em; margin-bottom: 8px; }

#list .post .to_twt { font-size: 0.8em; margin-bottom: 8px; }

#list .post .link { font-family: "Jua"; font-size: 1.5em; }

#list .post:nth-of-type(5n-4) { background-color: #2f3029; color: #f5eed7; }

#list .post:nth-of-type(5n-3) { background-color: #b73a3b; color: #f5eed7; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 100 100'><circle cx='25' cy='25' r='15' fill='%239B2D2B'/><circle cx='75' cy='75' r='16' fill='%239B2D2B'/></svg>"); }

#list .post:nth-of-type(5n-2) { background-color: #f5eed7; color: #252721; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='47.5' height='47.5' viewBox='0 0 100 100'><path d='M 25 10 L 25 17 M 25 33 L 25 40 M 10 25 L 17 25 M 33 25 L 40 25' stroke='%23CD803D' stroke-width='6' stroke-linecap='round' /><circle cx='75' cy='75' r='4' fill='%23CD803D'/></svg>"); }

#list .post:nth-of-type(5n-1) { background-color: #b7c7b0; color: #252721; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 120 120'><polygon fill='%2393A891' points='120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120 '/></svg>"); }

#list .post:nth-of-type(5n-0) { background-color: #b73a3b; color: #f5eed7; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 100 100'><path d='M 0 25 L 25 0 M 0 50 L 50 0 M 0 75 L 75 0 M 0 100 L 100 0 M 0 125 L 125 0 M 0 150 L 150 0 M 0 175 L 175 0' stroke='%239B2D2B' stroke-width='6' /></svg>"); }

/* Post page */
.post-page { background-color: white; padding: 16px 20px; font-size: 14px; margin-bottom: 20px; word-break: keep-all; overflow-wrap: break-word; font-family: "Noto Sans KR", sans-serif; width: 80%; max-width: 700px; margin: 0 auto 40px; padding: 36px; line-height: 1.4; }

.post-page #display { width: 90%; margin: 0 auto; }

.post-page strong { font-size: 18px; }

.post-page p img { width: 100%; height: auto; }

.post-page table { font-size: 14px; font-family: "Noto Sans KR", sans-serif; color: black; }

.post-page .return { display: block; color: black; text-decoration: none; display: block; margin-bottom: 32px; }

.post-page .return .fas { margin-right: 8px; }

.post-page br { display: block; /* makes it have a width */ content: ""; /* clears default height */ margin-top: 12px; /* change this to whatever height you want it */ }

.post-wrapper { margin: 8px auto 80px; display: grid; width: fit-content; justify-items: stretch; }

.post-to, .post-from { color: black; border: solid 2px #2b2d42; padding: 4px 12px; font-size: 14px; position: relative; margin: 4px auto; }

@media only screen and (max-width: 768px) { .post-page { margin: 48px auto; padding: 16px 20px; } .post-page #display { width: 100%; } }

.divider { border-right: solid 2px #2b2d42; padding: 5px 0; padding-right: 8px; margin-right: 4px; }

.post p { margin-bottom: 30px; font-family: "Noto Sans KR", sans-serif; color: black; }

/* Snow? */
.snow { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: -1; }

.snowflake { --size: 1vw; width: var(--size); height: var(--size); background: white; border-radius: 50%; position: absolute; top: -5vh; }

@keyframes snowfall { 0% { transform: translate3d(var(--left-ini), 0, 0); }
  100% { transform: translate3d(var(--left-end), 110vh, 0); } }

.snowflake:nth-child(1) { --size: 0.2vw; --left-ini: 1vw; --left-end: -7vw; left: 41vw; animation: snowfall 7s linear infinite; animation-delay: -8s; }

.snowflake:nth-child(2) { --size: 1vw; --left-ini: -8vw; --left-end: -1vw; left: 88vw; animation: snowfall 6s linear infinite; animation-delay: -9s; }

.snowflake:nth-child(3) { --size: 0.6vw; --left-ini: -4vw; --left-end: -3vw; left: 83vw; animation: snowfall 11s linear infinite; animation-delay: -4s; }

.snowflake:nth-child(4) { --size: 0.8vw; --left-ini: -3vw; --left-end: -4vw; left: 82vw; animation: snowfall 10s linear infinite; animation-delay: -5s; }

.snowflake:nth-child(5) { --size: 0.2vw; --left-ini: 2vw; --left-end: 2vw; left: 82vw; animation: snowfall 11s linear infinite; animation-delay: -5s; }

.snowflake:nth-child(6) { --size: 0.4vw; --left-ini: -2vw; --left-end: 9vw; left: 47vw; animation: snowfall 6s linear infinite; animation-delay: -1s; }

.snowflake:nth-child(7) { --size: 0.2vw; --left-ini: 9vw; --left-end: -2vw; left: 73vw; animation: snowfall 15s linear infinite; animation-delay: -9s; }

.snowflake:nth-child(8) { --size: 0.6vw; --left-ini: -7vw; --left-end: -5vw; left: 77vw; animation: snowfall 11s linear infinite; animation-delay: -9s; }

.snowflake:nth-child(9) { --size: 1vw; --left-ini: 7vw; --left-end: -2vw; left: 47vw; animation: snowfall 7s linear infinite; animation-delay: -1s; }

.snowflake:nth-child(10) { --size: 1vw; --left-ini: 10vw; --left-end: -8vw; left: 16vw; animation: snowfall 10s linear infinite; animation-delay: -8s; }

.snowflake:nth-child(11) { --size: 0.6vw; --left-ini: -9vw; --left-end: 3vw; left: 28vw; animation: snowfall 10s linear infinite; animation-delay: -8s; }

.snowflake:nth-child(12) { --size: 0.2vw; --left-ini: 4vw; --left-end: -6vw; left: 52vw; animation: snowfall 6s linear infinite; animation-delay: -6s; }

.snowflake:nth-child(13) { --size: 0.2vw; --left-ini: -9vw; --left-end: 2vw; left: 79vw; animation: snowfall 10s linear infinite; animation-delay: -7s; }

.snowflake:nth-child(14) { --size: 0.6vw; --left-ini: 8vw; --left-end: 0vw; left: 85vw; animation: snowfall 12s linear infinite; animation-delay: -9s; }

.snowflake:nth-child(15) { --size: 1vw; --left-ini: -5vw; --left-end: 7vw; left: 24vw; animation: snowfall 7s linear infinite; animation-delay: -10s; }

.snowflake:nth-child(16) { --size: 0.8vw; --left-ini: 9vw; --left-end: 10vw; left: 92vw; animation: snowfall 11s linear infinite; animation-delay: -6s; }

.snowflake:nth-child(17) { --size: 1vw; --left-ini: -3vw; --left-end: -4vw; left: 93vw; animation: snowfall 6s linear infinite; animation-delay: -2s; }

.snowflake:nth-child(18) { --size: 0.8vw; --left-ini: -1vw; --left-end: 9vw; left: 48vw; animation: snowfall 9s linear infinite; animation-delay: -10s; }

.snowflake:nth-child(19) { --size: 0.4vw; --left-ini: -3vw; --left-end: -8vw; left: 49vw; animation: snowfall 11s linear infinite; animation-delay: -4s; }

.snowflake:nth-child(20) { --size: 0.4vw; --left-ini: 0vw; --left-end: 0vw; left: 44vw; animation: snowfall 9s linear infinite; animation-delay: -9s; }

.snowflake:nth-child(21) { --size: 0.6vw; --left-ini: 7vw; --left-end: -4vw; left: 64vw; animation: snowfall 15s linear infinite; animation-delay: -7s; }

.snowflake:nth-child(22) { --size: 0.6vw; --left-ini: -2vw; --left-end: 1vw; left: 33vw; animation: snowfall 8s linear infinite; animation-delay: -5s; }

.snowflake:nth-child(23) { --size: 0.6vw; --left-ini: -9vw; --left-end: -6vw; left: 51vw; animation: snowfall 7s linear infinite; animation-delay: -7s; }

.snowflake:nth-child(24) { --size: 1vw; --left-ini: 0vw; --left-end: -5vw; left: 24vw; animation: snowfall 10s linear infinite; animation-delay: -6s; }

.snowflake:nth-child(25) { --size: 0.8vw; --left-ini: 2vw; --left-end: 1vw; left: 16vw; animation: snowfall 13s linear infinite; animation-delay: -9s; }

.snowflake:nth-child(26) { --size: 0.4vw; --left-ini: -7vw; --left-end: 5vw; left: 27vw; animation: snowfall 14s linear infinite; animation-delay: -2s; }

.snowflake:nth-child(27) { --size: 1vw; --left-ini: -9vw; --left-end: 10vw; left: 42vw; animation: snowfall 13s linear infinite; animation-delay: -6s; }

.snowflake:nth-child(28) { --size: 1vw; --left-ini: -1vw; --left-end: -1vw; left: 77vw; animation: snowfall 10s linear infinite; animation-delay: -6s; }

.snowflake:nth-child(29) { --size: 0.4vw; --left-ini: 0vw; --left-end: 1vw; left: 80vw; animation: snowfall 11s linear infinite; animation-delay: -4s; }

.snowflake:nth-child(30) { --size: 0.4vw; --left-ini: -8vw; --left-end: -8vw; left: 29vw; animation: snowfall 14s linear infinite; animation-delay: -10s; }

.snowflake:nth-child(31) { --size: 0.2vw; --left-ini: 3vw; --left-end: 6vw; left: 13vw; animation: snowfall 7s linear infinite; animation-delay: -4s; }

.snowflake:nth-child(32) { --size: 1vw; --left-ini: -6vw; --left-end: 0vw; left: 47vw; animation: snowfall 9s linear infinite; animation-delay: -1s; }

.snowflake:nth-child(33) { --size: 0.4vw; --left-ini: 5vw; --left-end: -2vw; left: 34vw; animation: snowfall 10s linear infinite; animation-delay: -5s; }

.snowflake:nth-child(34) { --size: 0.8vw; --left-ini: 1vw; --left-end: 5vw; left: 12vw; animation: snowfall 11s linear infinite; animation-delay: -6s; }

.snowflake:nth-child(35) { --size: 0.4vw; --left-ini: -1vw; --left-end: -2vw; left: 14vw; animation: snowfall 9s linear infinite; animation-delay: -9s; }

.snowflake:nth-child(36) { --size: 0.8vw; --left-ini: -1vw; --left-end: 8vw; left: 26vw; animation: snowfall 13s linear infinite; animation-delay: -7s; }

.snowflake:nth-child(37) { --size: 0.2vw; --left-ini: -2vw; --left-end: -8vw; left: 57vw; animation: snowfall 8s linear infinite; animation-delay: -1s; }

.snowflake:nth-child(38) { --size: 0.8vw; --left-ini: 10vw; --left-end: 10vw; left: 40vw; animation: snowfall 6s linear infinite; animation-delay: -4s; }

.snowflake:nth-child(39) { --size: 0.8vw; --left-ini: -9vw; --left-end: 3vw; left: 64vw; animation: snowfall 13s linear infinite; animation-delay: -3s; }

.snowflake:nth-child(40) { --size: 0.8vw; --left-ini: -3vw; --left-end: 3vw; left: 25vw; animation: snowfall 12s linear infinite; animation-delay: -9s; }

.snowflake:nth-child(41) { --size: 0.4vw; --left-ini: 9vw; --left-end: 7vw; left: 2vw; animation: snowfall 8s linear infinite; animation-delay: -9s; }

.snowflake:nth-child(42) { --size: 0.4vw; --left-ini: 0vw; --left-end: -7vw; left: 1vw; animation: snowfall 8s linear infinite; animation-delay: -8s; }

.snowflake:nth-child(43) { --size: 0.4vw; --left-ini: 2vw; --left-end: 3vw; left: 66vw; animation: snowfall 12s linear infinite; animation-delay: -10s; }

.snowflake:nth-child(44) { --size: 0.6vw; --left-ini: -9vw; --left-end: 0vw; left: 40vw; animation: snowfall 9s linear infinite; animation-delay: -2s; }

.snowflake:nth-child(45) { --size: 0.2vw; --left-ini: -1vw; --left-end: -7vw; left: 88vw; animation: snowfall 6s linear infinite; animation-delay: -4s; }

.snowflake:nth-child(46) { --size: 0.2vw; --left-ini: 6vw; --left-end: 2vw; left: 13vw; animation: snowfall 15s linear infinite; animation-delay: -9s; }

.snowflake:nth-child(47) { --size: 0.6vw; --left-ini: 2vw; --left-end: 7vw; left: 48vw; animation: snowfall 12s linear infinite; animation-delay: -7s; }

.snowflake:nth-child(48) { --size: 0.8vw; --left-ini: 9vw; --left-end: -5vw; left: 82vw; animation: snowfall 11s linear infinite; animation-delay: -10s; }

.snowflake:nth-child(49) { --size: 0.2vw; --left-ini: 3vw; --left-end: -6vw; left: 58vw; animation: snowfall 10s linear infinite; animation-delay: -9s; }

.snowflake:nth-child(50) { --size: 1vw; --left-ini: 1vw; --left-end: 10vw; left: 36vw; animation: snowfall 13s linear infinite; animation-delay: -6s; }

/* added small blur every 6 snowflakes*/
.snowflake:nth-child(6n) { filter: blur(1px); }

/*# sourceMappingURL=main.css.map */