:root{--columns:6;--rows:4;--bg-secondary:#333}body{margin:0;padding:2rem;background:url(../../assets/img/csl_christmas_bg.jpg?h=dce28808da8f686cdfd701d5c12a6bcc) top left/cover no-repeat;min-height:100vh}.app{display:grid;grid-template-columns:repeat(var(--columns),1fr);grid-template-rows:repeat(var(--rows),1fr);gap:2rem;font:24pt sans-serif}.doorlet{display:grid;height:20vh;perspective:1000px;background:gray;box-shadow:inset .3em .3em .9em #000;border-radius:.15rem;position:relative;font-size:10pt;color:#fff;text-decoration:none;padding:3vh;line-height:1.3em;place-items:center;text-align:center}.content{transition:transform .4s;transform-style:preserve-3d;transform-origin:left;pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;font-size:24pt}.doorlet[data-locked=false]:focus-within .content,.doorlet[data-locked=false]:hover .content{transform:rotateY(-25deg)}.doorlet[data-locked=false][data-state=open] .content{transform:rotateY(-150deg);box-shadow:.5em .1em .5em rgba(0,0,0,.2)}.doorlet:focus-within+.doorlet[data-state=open] .content,.doorlet:hover+.doorlet[data-state=open] .content{transform:rotateY(-90deg)}.back,.front{position:absolute;width:100%;height:100%;border:1px inset silver;display:grid;place-items:center;backface-visibility:hidden;background:#fff;color:#000;box-sizing:border-box;pointer-events:none;border-radius:.05em;transition:border .3s}.front{color:snow;text-shadow:0 0 2px #000,0 0 2px #000,0 0 15px snow;font-size:xxx-large;font-weight:700}.doorlet:focus-within .front,.doorlet:hover .front{border:1px outset silver}.back{transform:rotateY(180deg)}#detail{display:none}#detail>iframe{border:1rem solid #fff;width:inherit;height:inherit;box-sizing:border-box;background:gray}#detail>.closeBtn{display:grid;place-items:center;position:absolute;top:0;right:0;width:2em;height:2em;padding:.3rem;transform:translate(25%,-25%);text-decoration:none;font-size:xx-large;font-weight:700;color:#fff;background:#483d8b;border-radius:50%;box-shadow:0 0 3px #000}#detail[data-open=true]{display:block;position:fixed;z-index:1;top:.5rem;left:.5rem;width:calc(100vw - 1rem);height:calc(100vh - 1rem);box-shadow:0 0 3px rgba(0,0,0,.5)}@media screen and (orientation:portrait){body{--columns:3;--rows:8}.app{gap:1rem}.doorlet{height:8.5vh}}@media (max-width:768px){.doorlet{font-size:.5rem;padding:.3rem}}.modal-content{background:#a80b02!important;border-radius:0;color:#fff}.modal-header{border-top:.5em solid #fff!important;border-radius:0}.modal-footer{background:url(../../assets/img/pattern.png?h=085bcb494f04fa0dc48e4eec128e5941) 0 40px/20px repeat-x}h4{font-weight:300;font-size:1.7em}.doorlet:focus-within,.doorlet:hover{color:#ddd}.doorlet[data-locked=false]:focus-within .front:after,.doorlet[data-locked=false]:hover .front:after{content:'';position:absolute;width:inherit;height:inherit;animation:.3s ease-in shine;background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.5) 50%,transparent 100%) no-repeat;background-position:-100%;background-size:0}@keyframes shine{0%{background-position:100%;background-size:100% 100%}100%{background-position:200%;background-size:0 100%}}