1  /* styles.css */
 2  
 3  /* Existing styles */
 4  
 5  body {
 6    margin: 0;
 7    padding: 0;
 8    display: flex;
 9    justify-content: center;
10    align-items: center;
11    min-height: 100vh;
12    background-color: #000000;
13  }
14  
15  #canvas-container {
16    width: 100%; /* Adjust this percentage as needed */
17    max-width: 2600px; /* Set a max width for very large screens */
18    padding: 20px;
19    background-color: #000000;
20    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
21    box-sizing: border-box;
22  }
23  
24  .container {
25    display: flex;
26    justify-content: center;
27    align-items: center;
28    margin-bottom: 150px;
29    flex-direction: row;
30  }
31  
32  .media {
33    flex: 1;
34    max-width: 50%;
35    object-fit: contain;
36    margin-left: 50px;
37    margin-right: 50px;
38  }
39  
40  .text {
41    flex: 0 0 500px; /* Fixed width for readability */
42    max-width: 600px;
43    padding: 10px;
44    color: white;
45    text-align: left;
46    font-size: 34px;
47  }
48  
49  /* New styles for fixing image height and text container */
50  .standalone-media {
51    display: block;
52    max-width: 1000px;
53    margin: auto; /* Center the image */
54    height: auto; /* Ensure image height matches its natural height */
55  }
56  
57  .text-container {
58    display: flex;
59    margin: auto; /* Center the text container */
60    justify-content: center;
61    align-items: center;
62    margin-bottom: 20px;
63    flex-direction: column;
64  }
65  
66  .text-container .text {
67    margin: 0; /* Remove any default margin */
68  }