*, *::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: 'Pixls';
    src: url('../font/pixls/Pixls.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 */
}

/* Fullscreen Menu Styles */
#fullscreen-menu {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 30%; /* Make it a sidebar on the left */
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Semi-transparent black background */
    flex-direction: column;
    justify-content: flex-start; /* Align content to the top */
    align-items: flex-start; /* Align content to the left */
    z-index: 1000; /* Ensure it's on top of other content */
    padding-left: 20px; /* Add some padding from the left edge */
}

@media (max-width: 800px) {
    #fullscreen-menu {
        width: 100%;
    }
    .marquee {
        margin-top: -200px; /* Adjusted for mobile */
    }
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Adjust width to fit new sidebar */
    max-width: none; /* Remove max-width constraint */
    margin-top: 40px;
    padding-bottom: 10px;
    border-bottom: none; /* Removed border under menu title */
}

.menu-title {
    font-family: 'Pixls', sans-serif; /* Use Pixls font */
    color: #ee54b2; /* Use specific pink color */
    font-size: 24px;
    margin: 0;
}

#close-menu-btn {
    background: none;
    border: none;
    color: white;
    font-size: 2em;
    cursor: pointer;
    padding: 10px;
}

.menu-items {
    list-style: none;
    padding: 0;
    text-align: left; /* Align text to the left */
    width: 100%; /* Adjust width to fill new sidebar */
    max-width: none; /* Remove max-width constraint */
}

.menu-items li {
    margin-bottom: 20px;
}

.menu-items a {
    color: white;
    text-decoration: none;
    font-size: 15px;
    font-family: sans-serif;
    transition: color 0.3s ease;
    text-align: left; /* Ensure text is left-aligned */
    display: block; /* Make the anchor tag a block element to take full width */
}

.menu-items a:hover {
    color: #3ec4e3;
}

.content {
    width: 95%;
    max-width: 40ch;
    padding: 3em 1em;
}

.text {
    margin-block: 2em;
}

@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 */
}