/* AutoVibe CSS for project 1743945832174 - Iteration 2 - Durandale sword animation */

:root {
    --bg-color: #181818;
    --container-bg-color: #222;
    --container-border-color: #333;
    --text-color: #eee;
}

body {
    font-family: 'Arial', sans-serif;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden; /* Prevent scrollbars if animation goes slightly outside viewport */
}

#sword-container {
    position: relative;
    width: 80vw; /* Use viewport width for responsiveness */
    max-width: 800px; /* Maximum width for larger screens */
    height: 80vh; /* Use viewport height for responsiveness */
    max-height: 600px; /* Maximum height for larger screens */
    background-color: var(--container-bg-color);
    border: 2px solid var(--container-border-color);
    overflow: hidden; /* Clip sword if it goes outside container */
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); /* Subtle shadow for depth */
    aspect-ratio: 4 / 3; /* Maintain 4:3 aspect ratio */
}

#sword-canvas {
    display: block; /* Ensure canvas behaves as a block element */
    width: 100%; /* Canvas takes full width of container */
    height: 100%; /* Canvas takes full height of container */
}