*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
}
body{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
    }

    .slideshow {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .slideshow img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        opacity: 0;
        animation: slideAnimation 36s infinite;
    }

    .slideshow img:nth-child(1) {
        animation-delay: 0s;
    }

    .slideshow img:nth-child(2) {
        animation-delay: 6s;
    }

    .slideshow img:nth-child(3) {
        animation-delay: 12s;
    }

    .slideshow img:nth-child(4) {
        animation-delay: 18s;
    }

    .slideshow img:nth-child(5) {
        animation-delay: 24s;
    }

    .slideshow img:nth-child(6) {
        animation-delay: 30s;
    }

    @keyframes slideAnimation {
        0% {
            opacity: 0;
        }

        16.67% {
            opacity: 1;
        }

        25% {
            opacity: 1;
        }

        41.67% {
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }
.container{
    height: 64%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index: 1;
    background: rgba(243, 246, 248, 0.592);
    gap: 3px;
    perspective: 1000px;
    

}
.box{
    cursor: pointer;
    width: 18%;
    height: 18%;
    position: relative;
    margin: 1.4% 1.9%;
    scale: 1;
    transform-style: preserve-3d;  
    transition: transform .5s;
    box-shadow: 2px 2px 4px 4px rgb(234, 235, 185);
    border: 2px solid transparent;
    animation: neonBorder 1.5s ease-in-out infinite alternate;
    
}
@keyframes neonBorder {
    0% {
        box-shadow: 0 0 5px rgb(242, 66, 136), 0 0 10px #f06, 0 0 15px rgb(72, 255, 0), 0 0 20px #f06;
    }

    100% {
        box-shadow: 0 0 10px #ff6, 0 0 20px #ff6, 0 0 10px #ff6, 0 0 20px #ff6;
    }
}
/* for clicking effect on the boxes */
.box:active{
    scale: 0.97;
    transition: tranform .3s;
}
#back{
    width:100%;
    height: 100%;
    border: 2px solid rgb(233, 195, 168);
    background: rgba(230, 55, 55, 0.3);
    
}


.pic{
    position: absolute;
    width: 100%;
    height: 100%;
    top:50%;
    left:50%;
    transform: translate(-50% , -50%);
    backface-visibility: hidden;
}
#front{
    transform: rotateY(180deg) scale(1.5);
    left:0;
    top:0;
    filter: contrast(1.4);
    width: 80%;
    height: 80%;
}

.box.flip{
   transform: rotateY(180deg);
}
.btn{
    margin-top: 0.5%;
    background-color: rgba(195, 233, 25, 0.29);
    min-height: 4%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    top:81%;
}
.btn button {
    position: relative;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: larger;
    color: #fff;
    background: linear-gradient(45deg, #ff0000, #ff9900);
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.566);
    
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    outline: none;
}

button:hover {
    background: linear-gradient(45deg, #ff3300, #ffcc00);
    transform: scale(1.03);
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
}
button:active{
    color: black
}