/* Reset default margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure the html and body are full-height and prevent scrolling */
html, body {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Prevent scrolling */
    font-family: 'Lato', sans-serif;
}

/* Container should take up the full viewport */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Ensure full viewport height */
    width: 100vw;  /* Ensure full viewport width */
}

/* The card container should also take up the full viewport */
.card-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px; /* Perspective to give a 3D effect */
    overflow: hidden;
}

/* Card structure with front and back faces */
.card-text {
    width: 90%; /* Text box now takes 90% of the screen width */
    max-width: 600px; /* Set a max width for larger screens */
    height: 60%; /* Adjust the height to fit well on screen */
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s ease-in-out; /* Smoother and longer animation */
    transform: rotateY(0); /* Default state */
}

.card-text.flipped {
    transform: rotateY(180deg); /* Rotate 180 degrees when flipped */
}

/* Front and Back of the card */
.card-text > div {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden; /* Ensure the back face doesn't show when flipping */
    color: #ffffff;
    font-size: 3rem;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Front Face of the Card */
.card-text .front {
    background: rgba(0, 0, 0, 0.1); /* Light background */
}

/* Back Face of the Card */
.card-text .back {
    background: rgba(0, 0, 0, 0.1); /* Light background */
    transform: rotateY(180deg); /* Rotate the back face by 180 degrees */
}

/* Color classes to fill the entire screen */
.green {
    background-color: #084C61;
}

.red {
    background-color: #db4d52;
}

.yellow {
    background-color: #f9cf3b;
}

.blue {
    background-color: #49b0e4;
}

.purple {
    background-color: #996ce2;
}