/* Logout Styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    text-align: center;
    padding: 50px;
}

.loading {
    display: none;
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    position: fixed; /* Position it at the center of the screen */
    top: 50%;
    left: 50%;
    margin-top: -30px; /* Half of height */
    margin-left: -30px; /* Half of width */
    z-index: 1000; /* On top of everything else */
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.logout-container {
    display: none; /* Initially hidden */
    text-align: center; /* Center the text */
    margin-top: 50px; /* Some margin */
    box-shadow: 0 4px 20px purple;
}

.quote {
    font-style: italic;
    color: #777;
}

.sad-face {
    width: 100px; /* Adjust size */
}

.tears {
    position: relative;
    height: 20px; /* Height for tears */
    margin-top: 10px; /* Space above tears */
}

.tear {
    width: 5px; /* Width of a tear */
    height: 10px; /* Height of a tear */
    background-color: #00f; /* Blue color for tears */
    border-radius: 5px; /* Rounded edges */
    position: absolute;
}

.tear:nth-child(1) {
    left: 30%; /* Position of the first tear */
    animation: fall 1s infinite; /* Falling animation */
}

.tear:nth-child(2) {
    left: 60%; /* Position of the second tear */
    animation: fall 1.2s infinite; /* Falling animation with a delay */
}

@keyframes fall {
    0% { transform: translateY(0); }
    100% { transform: translateY(20px); } /* Change this for how far the tear falls */
}
button {
    background:orange;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}