html,
body{
    overflow: hidden;
    padding: 0;
    margin: auto;
    
    max-width: 100%;
    max-height: 100%;

    color: #C6C5B9;

    background: 
        linear-gradient(45deg, #615c68, #3e4064),
        url("../image/backgrounds/argyle.png");
    background-repeat: repeat;
    background-blend-mode: overlay
}

/* *{
    border: 2px solid red;
} */


p{
    font-size: 20px;
    font-weight: 550
}

.large-card{
    min-width: 300px;
    min-height: 300px;
}

 /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 226px;
    height: 226px;

    /* Idk how to remove the subtle border when flipped. Pls write me a comment if you know dear reader on my neocity site, love HonigCake  */
    border: 0px solid #e65c5c00;

    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    position: absolute;
    cursor: pointer;
    
    z-index: 1; /* Basic stacking context */

    transform: translate3d(0, 0, 0); /* Initial transform */
    transition: transform 0.1s ease;

    /* Make text unselectable */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */


    /*Hover effect */
    &:hover {
        transform: scale(1.06);
        transition: transform 0.2s ease;
        z-index: 2;
    }

}

  /* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;

    box-shadow: .5rem .5rem 0rem #0a0e16d7;
	box-sizing: border-box;
}
  

/* Remove transition during drag for responsive movement */
.flip-card:active {
    transition: none;
}

/* Add hover effect to bring card to front, incease of overlappping*/

.flip-card.flipped .flip-card-inner{
    transform: rotateY(180deg);

}
  
/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}


  /* Style the front side (fallback if image is missing) */
.flip-card-front {
    background: transparent;
    color: black;

    /* Lined paper effect */
    background-image: 
    repeating-linear-gradient(
        transparent,
        transparent 24px,
        rgba(0,0,0,0.1) 24px,
        rgba(0,0,0,0.1) 25px
    );
}
  
  /* Style the back side */
.flip-card-back {
    background: #ffd866;
    color: rgb(0, 0, 0);
    transform: rotateY(180deg);
    background-image: 
    repeating-linear-gradient(
        #ffd866,
        #ffd866 24px,
        rgba(0,0,0,0.1) 24px,
        rgba(0,0,0,0.1) 25px
    );

    text-align: center;
} 

.flip-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



#cards-container {
    position: relative;
    width: 87vw;
    height: 80vh;
    overflow: hidden;
    padding: 8rem; /* keep cards away from edges */
}