/*
{
"name": “Shared System CSS”,
"description": “A shared CSS module for a dynamic, visual text art series inscribed on Bitcoin Ordinals.”,
"author": "OnChainDoc",
"version": "1.0",
"created": "2024-10-2,
"type": “CSS Module",
"tags": ["bitcoin", "ordinals", “text art", “generative art”, ”particles"],
"dependencies": [],
"license": "MIT"
}
*/
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.fullscreen-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.centered-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
font-family: Arial, sans-serif;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
/* Loading Indicator */
#loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
/* Image Rendering */
.square-image {
width: 100%;
height: 100%;
object-fit: contain;
max-width: 576px;
max-height: 576px;
}
.pixelated {
image-rendering: pixelated;
}
/* For AVIF and JPEG XL */
.smooth {
image-rendering: auto;
}
/* Particle Styles */
.particle {
position: absolute;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
pointer-events: none;
}
/* Responsive Design */
@media (max-width: 576px) {
.square-image {
width: 100vmin;
height: 100vmin;
}
}
/* Styles for different seasons */
.spring { background-color: rgba(255, 182, 193, 0.2); }
.summer { background-color: rgba(152, 251, 152, 0.2); }
.autumn { background-color: rgba(210, 105, 30, 0.2); }
.winter { background-color: rgba(240, 248, 255, 0.2); }
/* Styles for day/night transition */
.day { background-color: #87CEEB; }
.night { background-color: #191970; }