body{
    background-color: #69333d;    /**/
}

.adventcalendar{
    position: relative;
    background-color: #744b53;
    height: auto;
    width: calc(100% + var(--paddingX) + var(--paddingX) );
    margin: calc( var(--paddingX) * -1 );
    display: grid;
  /*  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); */
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: row dense;
    box-shadow: 2px 2px 10px #000;
}


.adventcalendar>.day{
    display: inline-block ;
    position: relative;
    width: 1fr;
    height: auto;    
    cursor: grab;
}
.adventcalendar>.day:active{
    cursor: grabbing;
}
.adventcalendar>.day24{
    grid-column: span 2;
}
.adventcalendar>.day.day24::before{
    padding-bottom: 50%;
}
/*  
.adventcalendar>.start:hover>.door,
.adventcalendar>.close:hover>.door{
    background-position: 25% center;
}*/
.adventcalendar>.locked{
    cursor: not-allowed;
}
.adventcalendar>.day>.door{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0% center;
    z-index: 2;
}
.adventcalendar>.day>.animation{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: contain;
}
.adventcalendar>.open>.door{
    background-position: 100% center;
    animation-name: dooropener;
    animation-duration: 0.4s;
    animation-timing-function: step-end;
}
.adventcalendar>.close>.door{
    background-position: 0% center;
    animation-name: dooropener;
    animation-duration: 0.4s;
    animation-timing-function: step-end;    
    animation-direction: reverse;    
}
@keyframes dooropener{
    0%  { background-position:  0% center; }    
    25%  { background-position:  25% center; }   
    50%  { background-position:  50% center; }   
    75%  { background-position:  75% center; }    
    100%  { background-position:  100% center; }
}
.adventcalendar>.day::before{
    display: block;
    content: '';
    width: 0;
    padding-bottom: 100%;
}
.adventcalendar>.filler{
    background-image: url("doors/door0.png");
    background-size: contain;
    order: 1;
    cursor:initial;
}
.adventcalendar>.filler.two{
    order: 0;
}
.adventcalendar>.day.filler::before {
    padding-bottom: 50%;
}
.headline{
    background-image: url("doors/header.png");
    background-size: contain;
    grid-column: span 3;
}
.adventcalendar>.day.headline::before {
    padding-bottom: calc(50% / 3);
}

@media only screen and (min-width: 1200px) {
    .adventcalendar{
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
    .adventcalendar>.filler{
        order: 0;
    }
    .day1{ order:24; }
    .day2{ order:53; }
    .day3{ order:54; }
    .day4{ order:15; }
    .day5{ order:42; }
    .day6{ order:15; }
    .day7{ order:52; }
    .day8{ order:41; }
    .day9{ order:31; }
    .day10{ order:10; }
    .day11{ order:63; }
    .day12{ order:45; }
    .day13{ order:65; }
    .day14{ order:55; }
    .day15{ order:51; }
    .day16{ order:62; }
    .day17{ order:14; }
    .day18{ order:20; }
    .day19{ order:15; }
    .day20{ order:22; }
    .day21{ order:60; }
    .day22{ order:23; }
    .day23{ order:64; }
    .day24{ order:43; } /**/
}