@import url('https://fonts.cdnfonts.com/css/konstruktor');

body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    height: 100vh;
    margin: 0;
    background-color: #b22222; /* Deep red background */
    font-family: "Arial Black", sans-serif; /* Bold font for emphasis */
    color: #ffd700; /* Gold text color */
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

h1 {
    font-size: 4vw;
    font-weight: bold;
    color: #ffd700; /* Gold color for text */
    text-shadow: 2px 2px 4px #000; /* Subtle shadow for depth */
    margin: -70vh 0 0 0;
    animation: pulse 2s infinite;
    position: absolute; /* Positioning for centering */
    /* top: 50%; Center vertically */
}

p.message {
    font-size: 1.5rem;
    font-family: Konstruktor, sans-serif; /* Custom font for the message */
    color: #ffd700; /* Gold color for text */
    /* text-shadow: 1px 1px 2px #000; Subtle shadow for depth */
    /* margin-top: 20px; Space between heading and paragraph */
    position: absolute; 
    top: 78vh; /* Position below the card */
}

.card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    width: 90%; /* Responsive width */
    max-width: 500px; /* Limit maximum width */
    margin: auto; /* Center the container */
}

.card {
    width: 100%; /* Full width of container */
    height: auto; /* Maintain aspect ratio */
    aspect-ratio: 4 / 3; /* Responsive aspect ratio */
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s;
    cursor: pointer;
    border: 2px solid #ffd700; /* Gold border */
    border-radius: 15px; /* Rounded edges */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); /* Stronger shadow for depth */
}

.card.is-flipped {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    width: 100%; /* Full width of the card */
    height: 100%; /* Full height of the card */
    backface-visibility: hidden;
    padding: 5%; /* Responsive padding */
    box-sizing: border-box; /* Ensure padding doesn't affect dimensions */
    border-radius: 15px; /* Apply rounded edges to the padding */
}

.card-front {
    background: url('images/front.png') no-repeat center;
    background-size: calc(100% - 10%); /* Adjust size to account for padding */
    background-color: white; /* White background for empty spaces */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    color: #b22222; /* Red text color */
    /* position: relative; Enable positioning for child elements */
}

.card-front::after {
    content: "click↩";
    /* font-size: 1px; */
    position: absolute;
    bottom: 10px; /* Position near the bottom */
    right: 10px; /* Position near the right */
    font-size: 1rem; /* Adjust font size */
    color: #191919; /* Grey font color */
    font-weight: normal; /* Remove bold styling */
    background: none; /* Remove background */
    border: none; /* Remove borders */
    padding: 0; /* Remove padding */
    font-family: 'Times New Roman', Times, serif
}

.card-back {
    background: url('images/back.png') no-repeat center;
    background-size: calc(100% - 10%); /* Adjust size to account for padding */
    background-color: white; /* White background for empty spaces */
    transform: rotateY(180deg);
}

.card-back::after {
    content: "XVLWFNKC5LW96X63";
    position: absolute;
    bottom: 10px; 
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem; /* Adjust font size */
    color: #191919; /* Grey font color */
    font-weight: normal; /* Remove bold styling */
    background: none; /* Remove background */
    border: none; /* Remove borders */
    padding: 0; /* Remove padding */
    font-family: 'Times New Roman', Times, serif
}
/* Media Query for Smaller Screens */
@media (max-width: 768px) {
    h1 {
        margin: -300px 0 0 0;
        font-size: 6vw;
    } 

    .card-front::after {
        font-size: 0.8rem; /* Increase font size for better visibility */
        /* bottom: 20px; Adjust position for smaller screens */
        /* right: 20px; Adjust position for smaller screens */
    }

    .card-container {
        width: 100vw; /* Full width on smaller screens */
        justify-content: center; 
        align-items: center; /* Center vertically */
    }

    .card {
        max-width: 300px; 
    }

    p.message {
        /* font-size: 1.2rem; Adjust font size for smaller screens */
        top: 65vh; /* Adjust position for smaller screens */
    }
}