body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
}

/* Toggle menu styles */
.menu-toggle {
    position: absolute; /* Position the menu toggle */
    top: 0; /* Set top position */
    left: 0; /* Set left position */
    margin: 10px; /* Add margin */
    z-index: 1; /* Set stacking order */
    cursor: pointer; /* Change cursor to pointer */
}

.dropdown-header {
    padding: 10px 20px; /* Add padding */
    font-weight: bold; /* Set font weight */
    color: #333; /* Set text color */
    text-transform: uppercase; /* Transform text to uppercase */
}

.dropdown-divider {
    border-bottom: 1px solid #ccc; /* Add border bottom */
    margin: 5px 0; /* Add margin */
}

/* Dropdown menu styles */
.dropdown-content {
    display: none; /* Hide the dropdown content by default */
    position: absolute; /* Position the dropdown */
    background-color: #fff; /* Set background color */
    min-width: 160px; /* Set minimum width */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Add shadow */
    padding: 10px 0; /* Add padding */
    z-index: 1; /* Set stacking order */
    top: 30px; /* Set top position */
    left: 0; /* Set left position */
    border-radius: 5px; /* Add border radius */
    animation: slideDown 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Define the animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown item styles */
.dropdown-content a {
    display: block; /* Display as block element */
    padding: 10px 20px; /* Add padding */
    color: #333; /* Set text color */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s; /* Add transition effect */
    transition: background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover effect for dropdown items */
.dropdown-content a:hover {
    background-color: #f1f1f1; /* Change background color on hover */
}

/* Show dropdown content when menu toggle is active */
.menu-toggle.active .dropdown-content {
    display: block; /* Display the dropdown content */
    opacity: 0; /* Start with opacity 0 */
    transform: translateY(-20px) scale(0.9); /* Start with translateY -20px and slightly smaller */
    animation: fadeInSlideDown 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes fadeInSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.95);
    }
    to {
        transform: scale(1);
    }
}
