38 lines
1.3 KiB
CSS
38 lines
1.3 KiB
CSS
|
body { margin: 0; overflow: hidden; }
|
||
|
|
canvas { display: block; }
|
||
|
|
/*#status { position: absolute; top: 10px; right: 10px;
|
||
|
|
background: rgba(0,0,0,0.7); color: #fff; padding: .5em 1em;
|
||
|
|
border-radius: 4px; font-family: sans-serif; }*/
|
||
|
|
|
||
|
|
|
||
|
|
#subtitle-container {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 8%;
|
||
|
|
left: 15%; /* Changed from 50% to 5% to start closer to left edge */
|
||
|
|
right: 15%; /* Added right property to extend closer to right edge */
|
||
|
|
/* width: 100%; */
|
||
|
|
max-width: 95%; /* Increased to 95% to get closer to screen edges */
|
||
|
|
|
||
|
|
/* left: 50%; */
|
||
|
|
transform: translateY(5%); /* Removed translateX(-50%) since we're using left/right positioning */
|
||
|
|
|
||
|
|
text-align: center;
|
||
|
|
font-size: 30px;
|
||
|
|
color: whitesmoke;
|
||
|
|
/* background: rgba(0, 0, 0, 0.6); */
|
||
|
|
background: rgba(0, 0, 0, 0.0);
|
||
|
|
-webkit-text-stroke: 2px rgba(197, 40, 34, 0.651); /* width and color */
|
||
|
|
|
||
|
|
/* text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red; red text outline; */
|
||
|
|
pointer-events: none;
|
||
|
|
font-family: 'Coiny Regular', sans-serif;
|
||
|
|
z-index: 10;
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
||
|
|
/* transform: translateY(10px); */
|
||
|
|
}
|
||
|
|
|
||
|
|
#subtitle-container.visible {
|
||
|
|
opacity: 1;
|
||
|
|
/* transform: translateY(0); */
|
||
|
|
}
|