*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Round';
    src: url('../font/fakoo/FakooRegular-lw5V.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Home Video';
    src: url('../font/home-video/HomeVideo-BLG6G.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #000;
    color: #fff;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden; /* Prevent scrollbars if content slightly exceeds viewport */
}

/* Menu Container for positioning button and dropdown */
#menu-container {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001; /* Ensure it's on top */
    font-family: 'Home Video', sans-serif;
}

/* Menu Button Styles */
#menu-button {
    background-color: #ee54b2;
    color: black;
    border: none;
    padding: 10px 15px;
    font-size: 18px;
    cursor: pointer;
    font-family: inherit; /* Inherit from menu-container */
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

#menu-button:hover {
    background-color: #d1429e;
}

/* Dropdown Menu Items Styles */
.menu-items {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Position right below the button */
    left: 0; /* Align with the left edge of the button */
    background-color: black;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 0; /* Adjust padding for dropdown */
    z-index: 1;
    border-radius: 5px;
    list-style: none; /* Remove list bullets */
    text-align: left; /* Align text within dropdown */
}

.menu-items.dropdown-open {
    display: block; /* Show when active */
    border: 1px solid white;
    margin-top: 20px;
}

.menu-items li {
    margin-bottom: 0; /* Adjust margin for dropdown */
}

.menu-items a {
    color: white;
    padding: 12px 16px; /* Adjust padding for clickable area */
    text-decoration: none;
    font-size: 15px;
    font-family: sans-serif;
    display: block;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-items a:hover {
    /* Removed background-color and color on hover */
}

@media (max-width: 800px) {
    /* No specific changes for dropdown on smaller screens yet, it will adapt */
    .marquee {
        margin-top: -200px; /* Adjusted for mobile */
    }
}

/* Remaining styles (marquee, content, text, animations) are kept */

@keyframes blur-animation {
  0% { filter: blur(0px); }
  50% { filter: blur(5px); }
  100% { filter: blur(0px); }
}

@keyframes bounce {
    0% {
        transform: translateY(0) rotate(-90deg);
    }
    50% {
        transform: translateY(calc(100vh - 50px)) rotate(-90deg); /* Assuming dodle is about 50px tall after rotation */
    }
    100% {
        transform: translateY(0) rotate(-90deg);
    }
}

#dodle {
    font-family: 'Round';
    font-size: 38px;
    animation: bounce 4s ease-in-out infinite alternate;
}

#dodle p {
    animation: blur-animation 4s infinite alternate; /* 4 seconds, infinite loop, alternates direction */
}