html,body{margin:0;padding:0}body{font-size:15px;font-family:Tahoma,Helvetica,Verdana,sans-serif;color:#3a3a3a;background-color:#d6d6d6}header{position:sticky;top:0;left:0;right:0;display:flex;align-items:stretch;justify-content:space-between;background:#ff5400;color:#fff;border-bottom:1px solid #dc4800;padding:0 20px;z-index:250;font-size:12px}header ul{display:flex;gap:10px;margin:0;padding:0;list-style:none}header a{display:block;color:#fff;text-decoration:none;padding:5px 10px;padding-top:10px;border-bottom:4px solid transparent}header a:hover{border-bottom:4px solid #b43a00}#wrapper{position:relative;max-width:999px;margin:0 auto;background-color:#fff;box-shadow:0 0 15px #999}#wrapper:before{position:absolute;display:block;top:-1px;width:100%;height:1px;background:#ff5400;content:" ";z-index:210}#calendarHeader{padding:0 20px;padding-top:155px;margin-bottom:10px;background:url("/public/img/event/adventcalendar/header.png") no-repeat;font-size:3.3em}#calendarHeader h1{margin:0;padding:0;color:#f50;font-size:1em;font-weight:800;text-align:center;font-family:sans-serif}#calendarHeader div.header{color:#f50;font-size:.7em;text-align:center;display:flex;justify-content:space-between;align-items:flex-end}#calendarHeader div.header div{flex:1 0 33%;text-align:center}#calendarHeader div.header div.condition{font-size:12px;font-weight:normal;font-style:italic;text-align:right;color:#808080}#calendarGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:10px 40px;padding-bottom:15px}#calendarGrid .day{position:relative;background-color:#ffe4d6}#calendarGrid .day div.content{position:absolute;top:0;left:0;bottom:0;right:0;display:grid;margin:10px;place-items:center;overflow:hidden}#calendarGrid .day div.content div.prefix{font-size:12px;font-weight:bold;user-select:none}#calendarGrid .day div.content div.description{text-align:center;font-size:12px;user-select:none}#calendarGrid .day div.content div.code{color:#f50;font-family:"lucida Consolas","monospace";font-size:25px;font-weight:bold;text-transform:uppercase;text-align:center;white-space:nowrap;word-break:break-word;transition:width .2s ease,padding .2s ease;text-align:center;overflow:visible;width:20px;padding-right:5px}#calendarGrid .day div.content a.product{position:absolute;top:0;left:0;bottom:0;right:0;background:#fff;border-radius:5px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none}#calendarGrid .day div.content a.product[href]:hover img{max-width:85%}#calendarGrid .day div.content a.product div.prefix{position:absolute;text-align:center;top:7px;padding:3px 0;left:0;right:0;color:#000;background-color:rgba(255,255,255,0.5);backdrop-filter:blur(1px)}#calendarGrid .day div.content a.product .code{position:absolute;top:40%;right:0;width:100%;padding-right:0;padding-top:5px;padding-bottom:5px;text-shadow:1px 1px #000;background:rgba(233,233,233,0.48);backdrop-filter:blur(1px)}#calendarGrid .day div.content a.product img{max-width:80%;max-height:145px;margin:0 auto;object-fit:contain;flex:1 1 auto;transition:max-width .1s ease;user-select:none}#calendarGrid .day div.content a.product .name{display:block;padding:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold;color:#f50;background:rgba(199,199,199,0.15);border-top:1px solid #ddd;user-select:none}#calendarGrid .day img.card{position:relative;width:100%;height:auto;object-fit:cover;transition:transform .3s ease,box-shadow .5s ease,filter .2s ease;transform-origin:left;border:1px solid rgba(200,200,200,0.9);box-shadow:0 0 5px rgba(0,0,0,0.2);border-radius:4px;user-select:none}#calendarGrid .day[data-isPast='1'] .content{filter:grayscale(1)}#calendarGrid .day[data-isCurrent='1'] img.card{z-index:120;transform:perspective(900px) rotateY(-15deg);box-shadow:10px 4px 15px rgba(0,0,0,0.5);border-color:#f50;outline:7px solid #f50}#calendarGrid .day[data-isActive='1']:hover{cursor:pointer}#calendarGrid .day[data-isActive='1']:hover img.card{z-index:150;transform:perspective(700px) rotateY(-55deg);box-shadow:10px 4px 15px rgba(0,0,0,0.5)}#calendarGrid .day.open[data-isActive='1']{cursor:default}#calendarGrid .day.open[data-isActive='1'] div.content div.code{width:100%;padding-right:0}#calendarGrid .day.open[data-isActive='1'] img.card{z-index:200;transform:perspective(700px) rotateY(-110deg);filter:grayscale(1);box-shadow:0 10px 30px rgba(0,0,0,0.7)}#calendarGrid .day[data-isActive='0'] img.card{filter:grayscale(1)}@media only screen and (max-width:999px){#calendarGrid{grid-template-columns:repeat(3,1fr)}}@media only screen and (max-width:500px){#calendarHeader{font-size:2.5em}#calendarHeader div.header{display:block}#calendarHeader div.header div.condition{text-align:center}#calendarGrid{grid-template-columns:repeat(2,1fr)}}@media only screen and (max-width:350px){#calendarHeader{font-size:2em}#calendarGrid{grid-template-columns:1fr}}