<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* Basic Reset and Body Styles */
body {
    display: grid;
    place-items: center; /* Center content in the single grid cell */
    margin: 0;
    //height: 100vh; /* Full viewport height */
    //width: 100vw; /* Full viewport width */
    //overflow: hidden; /* Prevents scrollbars */
}

/* Container for Canvas Elements */
.canvas-container {
    position: relative; /* Establishes positioning context for children */
    width: 80vw; /* Responsive width based on viewport */
    height: 60vh; /* Responsive height based on viewport */
    display: flex;
    justify-content: center; /* Center content horizontally within the container */
    align-items: center; /* Center content vertically within the container */
}

/* Canvas Styling */
canvas {
    width: 100%; /* Full width of the container */
    height: 100%; /* Full height of the container */
    //object-fit: contain; /* Ensures the content fits without being cropped or distorted */
    //position: absolute; /* Overlays canvases directly on top of each other within the container */
}

/* Styling for Interactive Elements (Input Fields, Textarea, Buttons) */
.input-fields, textarea, button {
    width: 90%; /* Responsive width based on viewport */
    margin-top: 20px; /* Adds space above these elements */
    display: block; /* Ensures elements are block level for margin auto to work */
    z-index: 2; /* Ensures these elements are accessible */
}

.input-fields {
    display: grid; /* Uses grid layout for arranging input fields */
    grid-template-columns: repeat(2, 1fr); /* Two columns of input fields */
    gap: 10px; /* Space between grid items */
}

/* Specific Styling for Input Fields */
input[type="text"], input[type="date"] {
    padding: 5px; /* Padding for better interaction */
    margin: 2px; /* Margin to prevent touching other elements */
    width: 100%; /* Full width of its container */
    box-sizing: border-box; /* Include padding and border in width */
}

/* Text Area Styling */
textarea {
    height: 150px; /* Specific height for text area */
    resize: vertical; /* Allows vertical resizing only */
}

/* Button Styling */
button {
    padding: 5px 10px; /* Comfortable padding for clicking */
    cursor: pointer; /* Indicates that the element is clickable */
    background-color: #f0f0f0; /* Light grey background for visibility */
    border: 1px solid #ccc; /* Subtle border styling */
    border-radius: 5px; /* Rounded corners for aesthetic */
}

</pre></body></html>