body {
    font-family: Arial, sans-serif;
    background-color: #373c3e;
    color: #333;
    margin: 40px;
    line-height: 1.6;
    text-align: center;
}

.container {
    position: relative;
    max-width: 800px;
    margin: 50px auto;
    padding: 10px;
    background-color: #0d0d0d;
    border-radius: 12px;
    box-shadow: 0 0 10px black, 0 0 20px violet, 0 0 30px palevioletred;
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* Added bottom padding to make space for the bottom cat */
    padding-bottom: 120px; 
}

.cat {
    width: 150px;
    height: 150px;
    object-fit: cover;
    position: absolute;
    /* Changed top property for all cats to allow specific placement in other classes */
    top: -40px; 
    border: 5px solid #ffc107;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}


/* Left cat: tilted right & up */

.cat-left {
    left: -80px;
    transform: rotate(15deg);
}


/* Right cat: tilted left & up */

.cat-right {
    right: -80px;
    transform: rotate(-15deg);
}

/* ===== NEW BOTTOM CAT STYLE ===== */

.cat-bottom {
    bottom: -80px; /* Position it below the container */
    left: 50%; /* Start at the horizontal center of the container */
    transform: translateX(-50%); /* Move back half of its own width to truly center it */
    top: auto; /* Override the 'top: -40px' from the general .cat class */
}


h1 {
    color: #909090;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    display: inline-block;
}

p {
    margin-bottom: 30px;
    font-style: italic;
    color: #909090;
}


/* ===== CARDS ===== */

.cards {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cards a {
    text-decoration: none;
}

.demo-card {
    padding: 15px;
    border-radius: 8px;
    width: 160px;
    transition: all 0.4s ease-in-out;
    color: #fff;
    background-color: #1a1a1a;
    text-align: center;
    cursor: pointer;
}

.demo-card img {
    width: 100%;
    height: 90px;
    object-fit: contain;
    border-radius: 6px;
    margin-bottom: 10px;
    border: none;
    box-shadow: none;
    outline: none;
}

.demo-card h3 {
    margin: 5px 0;
    font-size: 1.1em;
}

.demo-card p {
    font-size: 0.85em;
    opacity: 0.8;
}


/* Left tilt */

.card-one:hover {
    transform: scale(1.1) rotate(-7deg) perspective(500px) rotateY(10deg);
    background-color: #6a3960;
    box-shadow: 0 0 15px rgba(106, 57, 96, 0.8);
}

.card-one:active {
    transform: scale(1) rotate(-7deg) perspective(500px) rotateY(10deg);
}


/* Right tilt */

.card-two:hover {
    transform: scale(1.1) rotate(7deg) perspective(500px) rotateY(-10deg);
    background-color: #6a3960;
    box-shadow: 0 0 15px rgba(106, 57, 96, 0.8);
}

.card-two:active {
    transform: scale(1) rotate(7deg) perspective(500px) rotateY(-10deg);
}

img {
    border: 5px solid #ffc107;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}