body {
    margin: 0;
    font-family: "Verdana", sans-serif;
    font-size: 16px;
    background-color: #111111; /* Dark background */
    color: #ffffff; /* Light text */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Keyframes for the fade-in and slide-down effect */
@keyframes fadeInSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px); /* Start slightly above */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* End at the original position */
    }
}

/* Apply the animation to the container */
.container {
    max-width: 800px;
    padding: 20px;
    border-radius: 8px;
    text-align: center; /* Center the content */
    padding-bottom: 5%;
    animation: fadeInSlideDown 2s ease-out; /* Animation duration and easing */
}


h1 {
    font-family: "League Script", sans-serif; /* Use a fancy font */
    font-weight: normal; /* Normal weight */
    font-size: 4em; /* Large text size */
    margin: 0; /* Remove default margin */
    color: #ffffff; /* Color of the text */
}

p {
    margin: 20px 0;
    font-size: 1.2em; /* Larger, readable font size */
    line-height: 1.6; /* Add spacing for readability */
    font-weight: 400; /* Normal weight */
}

#drawing {
    max-width: 100%; /* Ensure the image fits within the container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Softer shadow for contrast */
    margin-top: 20px; /* Add some space below the text */
}