/* These are very stylish */

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
    #background-color: #f4f4f9;
}

#fortune-cookie-container {
    position: relative;
    text-align: center;
}

.cookie-image-unopened {
    width: 300px;
    height: auto;
    padding-top:11px;
    padding-bottom:11px;
}

.cookie-image-cracked {
    width: 450px;
    height: auto;
}

#fortune-text {
    position: absolute;
    top: 20%;
    left: 25%;
    transform: translate(-20%, -20%);
    color: darkred;
    font-size: 16px;
    width: 43%;
    text-align: center;
    font-weight: bold; 
    font-family: cursive;
}

#reveal-btn {
    margin-top: 20px;
    padding: 12px 24px;
    font-size: 18px;
    cursor: pointer;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    color: white;
    border: none;
    border-radius: 25px;
    transition: background 0.3s, transform 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#reveal-btn:hover {
    background: linear-gradient(to right, #feb47b, #ff7e5f);
    transform: scale(1.05);
}

#reveal-btn:active {
    transform: scale(1);
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wobble {
    animation: wobble 1s ease-in-out;
}

@keyframes wobble {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(10deg); }
    80% { transform: rotate(-10deg); }
}