@import"https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&family=Roboto:wght@400;700&display=swap";:root{font-family:Roboto,sans-serif;line-height:1.5;font-weight:400;color:#2c3e50;background-color:#e74c3c}body{margin:0;min-width:320px;min-height:100vh}.door{position:relative;width:100%;aspect-ratio:1;perspective:1000px;cursor:pointer}.front,.back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:12px;transition:transform .8s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 10px 20px #0003;padding:15px;text-align:center;box-sizing:border-box}.front{background:linear-gradient(135deg,#27ae60,#2ecc71);color:#f1c40f;font-family:Mountains of Christmas,cursive;font-size:4rem;font-weight:700;border:4px solid #f1c40f;text-shadow:2px 2px 0 #2c3e50}.front:before{content:"";position:absolute;width:20px;height:100%;background:#c0392b;left:50%;transform:translate(-50%);box-shadow:0 0 5px #0003}.front:after{content:"";position:absolute;height:20px;width:100%;background:#c0392b;top:50%;transform:translateY(-50%);box-shadow:0 0 5px #0003}.number{z-index:2;background:#c0392b;padding:5px 15px;border-radius:50%;border:2px solid #f1c40f;box-shadow:0 2px 5px #0000004d}.back{background-color:#ecf0f1;color:#2c3e50;transform:rotateY(180deg);font-size:1rem;overflow:auto;border:4px solid #c0392b;background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23bdc3c7' fill-opacity='0.2' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E")}.grid-back-content{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.door.expanded{width:100%;height:auto;aspect-ratio:auto;min-height:400px;cursor:default}.door.expanded .front,.door.expanded .back{position:relative;height:auto;min-height:400px;transform:none!important;backface-visibility:visible}.door.expanded .front{display:none}.door.expanded .back{transform:none;display:flex;flex-direction:column;justify-content:center;align-items:center}.door:not(.expanded) .front,.door:not(.expanded) .back{position:absolute;width:100%;height:100%;backface-visibility:hidden}.door:not(.expanded).open .front{transform:rotateY(180deg)}.door:not(.expanded).open .back{transform:rotateY(0)}.joke{margin-bottom:15px;font-size:1.1rem;font-weight:500}.answer{color:#c0392b;font-size:1.2rem;margin-top:10px}.hints-section{margin:15px 0;width:100%;background:#fffc;padding:10px;border-radius:8px}.hint{font-size:.9rem;color:#7f8c8d;margin:4px 0;font-style:italic}.hint-btn{background-color:#3498db;color:#fff;border:none;padding:8px 12px;border-radius:20px;cursor:pointer;font-size:.85rem;margin-top:8px;transition:all .2s;box-shadow:0 2px 4px #0000001a}.hint-btn:hover{background-color:#2980b9;transform:translateY(-1px)}.solve-btn{background-color:#27ae60;color:#fff;border:none;padding:10px 20px;border-radius:25px;cursor:pointer;font-size:1rem;margin-top:15px;transition:all .2s;font-weight:700;box-shadow:0 4px 6px #0000001a}.solve-btn:hover{background-color:#219150;transform:translateY(-2px);box-shadow:0 6px 8px #00000026}.next-joke-btn{margin-top:15px;padding:8px 16px;background-color:#95a5a6;color:#fff;border:none;border-radius:20px;cursor:pointer;font-size:.9rem;transition:background-color .3s}.next-joke-btn:hover{background-color:#7f8c8d}.calendar-wrapper{max-width:1200px;margin:0 auto;transition:filter .3s ease;width:100%}.calendar-wrapper.blurred{filter:blur(5px) brightness(.7);pointer-events:none}.advent-calendar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;padding:40px;background:#ffffff0d;border-radius:20px;box-shadow:0 0 20px #0000001a;z-index:1;width:100%;box-sizing:border-box}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.overlay-content{width:90%;max-width:500px;position:relative;animation:zoomIn .3s cubic-bezier(.175,.885,.32,1.275)}.close-btn{margin-top:20px;background-color:#e74c3c;color:#fff;border:none;padding:10px 20px;border-radius:25px;cursor:pointer;font-size:1rem;font-weight:700;box-shadow:0 4px 6px #0003;transition:transform .2s}.close-btn:hover{transform:scale(1.05);background-color:#c0392b}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}body{background-color:#c0392b;background-image:radial-gradient(white 15%,transparent 16%),radial-gradient(white 15%,transparent 16%);background-size:60px 60px;background-position:0 0,30px 30px;color:#fff;font-family:Roboto,sans-serif;margin:0;min-height:100vh}.App{text-align:center;padding:20px;background:#0003;min-height:100vh}.App-header{margin-bottom:40px;padding:20px;background:#ffffff1a;border-radius:15px;display:inline-block;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:2px solid rgba(255,255,255,.2)}h1{font-family:Mountains of Christmas,cursive;font-size:4rem;color:#f1c40f;text-shadow:3px 3px 0px #c0392b,5px 5px 10px rgba(0,0,0,.5);margin:0}.error-page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;text-align:center;background-color:#2c3e50;color:#fff}.error-page h1{font-size:4rem;margin-bottom:20px;color:#e74c3c}.error-page p{font-size:1.5rem}@keyframes snow{0%{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0}to{background-position:500px 1000px,400px 400px,300px 300px,200px 500px,600px 800px,800px 600px,100px 900px}}.App:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(6px 6px at 100px 50px,#fff,transparent),radial-gradient(8px 8px at 200px 150px,#fff,transparent),radial-gradient(5px 5px at 300px 250px,#fff,transparent),radial-gradient(6px 6px at 400px 350px,#fff,transparent),radial-gradient(8px 8px at 500px 100px,#fff,transparent),radial-gradient(5px 5px at 50px 200px,#fff,transparent),radial-gradient(6px 6px at 150px 300px,#fff,transparent),radial-gradient(8px 8px at 250px 400px,#fff,transparent),radial-gradient(5px 5px at 350px 500px,#fff,transparent),radial-gradient(7px 7px at 450px 150px,#fff,transparent),radial-gradient(6px 6px at 50px 450px,#fff,transparent),radial-gradient(8px 8px at 300px 50px,#fff,transparent),radial-gradient(5px 5px at 150px 550px,#fff,transparent),radial-gradient(6px 6px at 600px 100px,#fff,transparent),radial-gradient(7px 7px at 700px 300px,#fff,transparent),radial-gradient(5px 5px at 800px 50px,#fff,transparent),radial-gradient(8px 8px at 900px 400px,#fff,transparent),radial-gradient(6px 6px at 1000px 200px,#fff,transparent),radial-gradient(7px 7px at 1100px 500px,#fff,transparent),radial-gradient(5px 5px at 1200px 100px,#fff,transparent),radial-gradient(9px 9px at 150px 50px,#fff,transparent),radial-gradient(6px 6px at 850px 150px,#fff,transparent),radial-gradient(8px 8px at 550px 450px,#fff,transparent),radial-gradient(5px 5px at 950px 250px,#fff,transparent),radial-gradient(7px 7px at 250px 650px,#fff,transparent),radial-gradient(6px 6px at 120px 80px,#fff,transparent),radial-gradient(8px 8px at 220px 180px,#fff,transparent),radial-gradient(5px 5px at 320px 280px,#fff,transparent),radial-gradient(6px 6px at 420px 380px,#fff,transparent),radial-gradient(8px 8px at 520px 130px,#fff,transparent),radial-gradient(5px 5px at 70px 230px,#fff,transparent),radial-gradient(6px 6px at 170px 330px,#fff,transparent),radial-gradient(8px 8px at 270px 430px,#fff,transparent),radial-gradient(5px 5px at 370px 530px,#fff,transparent),radial-gradient(7px 7px at 470px 180px,#fff,transparent),radial-gradient(6px 6px at 80px 480px,#fff,transparent),radial-gradient(8px 8px at 330px 80px,#fff,transparent),radial-gradient(5px 5px at 180px 580px,#fff,transparent),radial-gradient(6px 6px at 630px 130px,#fff,transparent),radial-gradient(7px 7px at 730px 330px,#fff,transparent),radial-gradient(5px 5px at 830px 80px,#fff,transparent),radial-gradient(8px 8px at 930px 430px,#fff,transparent),radial-gradient(6px 6px at 1030px 230px,#fff,transparent),radial-gradient(7px 7px at 1130px 530px,#fff,transparent),radial-gradient(5px 5px at 1230px 130px,#fff,transparent),radial-gradient(9px 9px at 180px 80px,#fff,transparent),radial-gradient(6px 6px at 880px 180px,#fff,transparent),radial-gradient(8px 8px at 580px 480px,#fff,transparent),radial-gradient(5px 5px at 980px 280px,#fff,transparent),radial-gradient(7px 7px at 280px 680px,#fff,transparent);background-size:550px 550px,350px 350px,250px 250px,450px 450px,650px 650px,500px 500px,700px 700px;animation:snow 8s linear infinite;z-index:2000;opacity:.9}.App:after{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(5px 5px at 50px 50px,#fff,transparent),radial-gradient(7px 7px at 150px 250px,#fff,transparent),radial-gradient(4px 4px at 250px 450px,#fff,transparent),radial-gradient(6px 6px at 350px 150px,#fff,transparent),radial-gradient(8px 8px at 450px 350px,#fff,transparent),radial-gradient(5px 5px at 550px 50px,#fff,transparent),radial-gradient(7px 7px at 650px 250px,#fff,transparent),radial-gradient(4px 4px at 750px 450px,#fff,transparent),radial-gradient(6px 6px at 850px 150px,#fff,transparent),radial-gradient(8px 8px at 950px 350px,#fff,transparent),radial-gradient(5px 5px at 1050px 50px,#fff,transparent),radial-gradient(7px 7px at 1150px 250px,#fff,transparent),radial-gradient(4px 4px at 1250px 450px,#fff,transparent),radial-gradient(6px 6px at 1350px 150px,#fff,transparent),radial-gradient(8px 8px at 1450px 350px,#fff,transparent),radial-gradient(5px 5px at 100px 400px,#fff,transparent),radial-gradient(7px 7px at 300px 100px,#fff,transparent),radial-gradient(4px 4px at 500px 300px,#fff,transparent),radial-gradient(6px 6px at 700px 500px,#fff,transparent),radial-gradient(8px 8px at 900px 200px,#fff,transparent),radial-gradient(5px 5px at 80px 80px,#fff,transparent),radial-gradient(7px 7px at 180px 280px,#fff,transparent),radial-gradient(4px 4px at 280px 480px,#fff,transparent),radial-gradient(6px 6px at 380px 180px,#fff,transparent),radial-gradient(8px 8px at 480px 380px,#fff,transparent),radial-gradient(5px 5px at 580px 80px,#fff,transparent),radial-gradient(7px 7px at 680px 280px,#fff,transparent),radial-gradient(4px 4px at 780px 480px,#fff,transparent),radial-gradient(6px 6px at 880px 180px,#fff,transparent),radial-gradient(8px 8px at 980px 380px,#fff,transparent),radial-gradient(5px 5px at 1080px 80px,#fff,transparent),radial-gradient(7px 7px at 1180px 280px,#fff,transparent),radial-gradient(4px 4px at 1280px 480px,#fff,transparent),radial-gradient(6px 6px at 1380px 180px,#fff,transparent),radial-gradient(8px 8px at 1480px 380px,#fff,transparent),radial-gradient(5px 5px at 130px 430px,#fff,transparent),radial-gradient(7px 7px at 330px 130px,#fff,transparent),radial-gradient(4px 4px at 530px 330px,#fff,transparent),radial-gradient(6px 6px at 730px 530px,#fff,transparent),radial-gradient(8px 8px at 930px 230px,#fff,transparent);background-size:400px 400px,600px 600px,800px 800px;animation:snow 12s linear infinite;z-index:2000;opacity:.8}.window-decor{position:fixed;top:0;bottom:0;width:80px;pointer-events:none;z-index:0;display:flex;flex-direction:column}.left-decor{left:0}.right-decor{right:0}.w-tree{position:absolute;font-size:3rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));animation:sway 4s ease-in-out infinite alternate}@media(max-width:1000px){.window-decor{display:none}}@media(max-width:1000px){.bg-tree{display:none}}.snow-ground{position:fixed;bottom:0;left:0;width:100%;height:40px;background:#fff;z-index:1500;pointer-events:none;filter:blur(4px)}.snow-ground:before{content:"";position:absolute;bottom:0;left:-10%;width:70%;height:100px;background:#fff;border-radius:50% 50% 0 0}.snow-ground:after{content:"";position:absolute;bottom:0;right:-10%;width:60%;height:120px;background:#fff;border-radius:50% 50% 0 0}