body{
    margin:0;
}

/* Container setup */
.flip-container {
    max-width: 100%;
    width: auto;
    height: 100%;
    display: block;
    position: relative;
    justify-content: center;
}

.flipper {
    transition: 0.6s;
    /* transform-style: preserve-3d; */
    position: relative;
}
.back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.uiicons{
    position: absolute;
    right: 10px;
    z-index: 9;
    top: 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    width: 20px;
}

svg.icon{
    width: 100%;
    fill:#8E3C1F;
}

svg.icon:nth-child(2){
    width: 80%;
    animation: bobbing 1s ease-in-out infinite;
}

@keyframes bobbing {
    0%, 100% {
        transform: translateY(4px);
    }
    50% {
        transform: translateY(-4px);
    }
}


/* Front Panel */
.front {
    text-align: center;
    display: flex;
    /* transform: rotateY(0deg); */
    align-items: center;
    justify-content: center;
    /* flex-direction: column; */
    height: 100vh;
}

/* Back Panel */
.back {
   opacity:0;
    transition:0.5s;
}

/* Flip effect when class 'flip' is added to the container */
.flip-container.flip .flipper .back {
    opacity:1;
}

img{
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: top;
}