.Advent {
    min-height: 100vh;
}

.Advent [class*="col-"] {
    height: 15vH;
    perspective: 800px;
    transform-style: preserve-3d;
}

.door {
    margin: 1em;
    border: .1em dashed #fff;
    height: 100%;
    cursor: pointer;
    padding: 1em;

    position: relative;
    z-index: 999999;

    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur( 0px );
    background-color: transparent;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transform-origin: left 50%;

    transition: all 1s ease-in-out;
}
.door.open {
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur( 15px );
    background-color: #fff !important;
    transform: rotateY(-88deg);
    box-shadow: 0 .15em 1em rgba(0, 0, 0, 0.5);

    transition: all 1s ease-in-out;
}
.door:hover {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur( 8px );
    background-color: rgb(255 255 255 / 30%);

    transition: all 1s ease-in-out;
}
.door p {
    color: #fff;
    font-size: 1.5em;
}

.Secrets {
    perspective: 800px;
}
.secret {
    position: absolute;
    z-index: 99999;
    width: 0;
    height: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    opacity: 0;
    pointer-events: none;

    transform: translate(-50%, -50%) rotateY(180deg);

    transition: all .5s ease-in-out;
}
.secret.open {
    position: fixed;
    width: 95vw !important;
    height: auto !important;
    background-size: contain;
    position: fixed;
    top: 50vh !important;
    left: 50vw !important;
    transform: translate(-50%, -50%) rotateY(0deg) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.secret img {
    width: 100%;
    height: 100%;
    display: block;
}
.secret.open img {
    height: auto;
}
.secret.open img {
    box-shadow: 1em 1em 3em rgba(0, 0, 0, 0.7);
    display: block !important;
}
/* body {
    transform-style: preserve-3d;
    perspective: 1000px;
} */