@font-face{
    font-family:DerailedBold;
    src:url("../../fonts/derailed-bold-webfont.woff") format('woff');
    font-weight:normal;
}

@font-face{
    font-family:BariolRegular;
    src:url("../../fonts/Bariol_Regular.woff") format('woff');
    font-weight:normal;
}

@font-face{
    font-family:FASolid;
    src:url("../../fonts/fa-solid-900.woff") format('woff');
    font-weight:normal;
}

body{
    margin:0;
    font-family:DerailedBold;
}

#advent-calendar{
    background-color:#EDEDED;
    position:relative;
    height:calc(200px * 4);
}

.window{
    width:calc(100% / 6);
    display:inline-block;
    position:absolute;
    height:200px;
    font-size:1.6rem;
    color:#4c4c4c;
    outline:1px solid #FFFFFF;
    text-decoration:none;
    text-shadow: 3px 2px 3px rgba(255,255,255,1);
    background-image:url("advent-calendar-background-image.jpg?cachebuster=2022");
    background-size:600% 400%;
    /*display:none;*/
}

.window.today:hover{
    transition:.2s all linear;
}

.window.today:hover,
.window.opened{
    -ms-transform: skewY(5deg); /* IE 9 */
    -webkit-transform: skewY(5deg); /* Safari */
    transform: skewY(5deg); /* Standard syntax */
    -ms-transform-origin:0 0; /* IE 9 */
    transform-origin:0 0;
    box-shadow:2px 2px 15px rgba(0,0,0,.7);
    width:calc(100% / 6 + 5px);
}

.window.opened{
    transition:.1s all linear;
}

.window.opened:hover{
    -ms-transform: skewY(7deg); /* IE 9 */
    -webkit-transform: skewY(7deg); /* Safari */
    transform: skewY(7deg); /* Standard syntax */ 
}

.window span{
    display:block;
    padding:1rem;
}

.window.today:not(.opened) span{
    animation:today-pulse 2s;
    animation-iteration-count:infinite;
}

@keyframes today-pulse{
    0%{font-size:1.6rem;}
    50%{font-size:2.4rem;}
    100%{font-size:1.6rem;}
}

.window:not(.today):not(.opened)::before{
    transition:.2s all linear;
    content:"";
    background-color:black;
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    background-image:url("locked.png");
    background-repeat:no-repeat;
    background-size:20%;
    background-position:center center;
}

.window:not(.today):not(.opened):hover::before{
    opacity:.5;
}

#today-popup-container{
    position:absolute;
    width:100%;
    height:100%;
    z-index:100;
    background-color:rgba(255,255,255,.9);
    display:flex;
    justify-content:center;
    align-items:center;
    display:none;
}

#today-popup-container>a{
    position:absolute;
    top:3rem;
    right:3rem;
    width:3rem;
    height:3rem;
    text-indent:-1000px;
    color:transparent;
    background-image:url("../../images/icon-close-dark.svg");
    background-repeat:no-repeat;
    background-size:100%;
    opacity:.7;
    transition:.2s opacity linear;
}

#today-popup-container>a:hover{
    opacity:1;
}

#today-popup-content{
    text-align:center;
}

#today-popup-content h1{
    font-size:2.5rem;
    margin-top:0;
}

#today-popup-content p{
    font-size:1.3rem;
}

#today-popup-content a{
    background-color:#007494;
    padding:1rem 4.5rem .9rem 1.5rem;
    color:#FFFFFF;
    display:inline-block;
    margin-top:.7rem;
    text-decoration:none;
    transition:.2s all linear;
    font-family:BariolRegular;
    font-size:1.5rem;
    position:relative;
    margin-bottom:5rem;
}

#today-popup-content a:after{
    content:"\f054";
    font-family:FASolid;
    transition:right .3s ease-in-out;
    position:absolute;
    top:1.05rem;
    right:1.5rem;
}

#today-popup-content a:hover:after{
    right:1rem;
}

#today-popup-content a:hover{
    background-color:#000000;
}

#accessible_text_version{
    display:none;
}

/* medium desktops */
@media screen and (max-width:72rem){ 
    #advent-calendar{
        height:calc(175px * 4);
    }
    .window{
        height:175px;
    }
}

/* smaller desktops */
@media screen and (max-width:64rem){ 
    #advent-calendar{
        height:calc(150px * 4);
    }
    .window{
        height:150px;
    }
}

/* mobile desktops */
@media screen and (max-width:48rem){
    #advent-calendar{
        height:calc(100px * 4);
    }
    .window{
        height:100px;
    }
}