Spaces:
Running
on
Zero
Running
on
Zero
:root { | |
--title-font-size: clamp(1.5rem, 6vw, 3rem); | |
--subtitle-font-size: clamp(1rem, 2vw, 1.2rem); | |
--title-color: #FF0000; /* Bright red title */ | |
--primary-color: #333333; /* Dark gray */ | |
--secondary-color: #FFFFFF; /* Changed to white for subtitle */ | |
--accent-color: #666666; /* Light gray */ | |
--text-color: #2B2B2B; /* Near black for text */ | |
--light-accent: #E0E0E0; /* Very light gray */ | |
} | |
h1 { | |
text-align: center; | |
font-size: var(--title-font-size); | |
display: block; | |
color: var(--primary-color); | |
} | |
h2 { | |
text-align: center; | |
font-size: 2rem; | |
display: block; | |
color: var(--primary-color); | |
} | |
p { | |
color: var(--text-color); | |
} | |
#duplicate-button { | |
display: block; | |
margin: 1rem auto; | |
color: #fff; | |
background: var(--primary-color); | |
border-radius: 100vh; | |
padding: 0.5rem 1rem; | |
transition: background-color 0.3s ease; | |
} | |
#duplicate-button:hover { | |
background: var(--accent-color); | |
} | |
#component-0 { | |
max-width: 85%; | |
margin: 2rem auto; | |
padding: 2rem; | |
} | |
@media (max-width: 600px) { | |
#component-0 { | |
max-width: 100%; | |
padding: 0.5rem; | |
} | |
} | |
#title-container { | |
text-align: center; | |
padding: 2rem 0; | |
} | |
#title { | |
font-size: var(--title-font-size); | |
color: var(--title-color); | |
font-family: 'Helvetica Neue', sans-serif; | |
text-transform: uppercase; | |
background: transparent; | |
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); | |
} | |
#title span { | |
background: linear-gradient(45deg, #EF4E4E, #b42828); | |
background-clip: text; | |
-webkit-background-clip: text; | |
color: transparent; | |
} | |
#subtitle { | |
text-align: center; | |
font-size: var(--subtitle-font-size); | |
margin-top: 1rem; | |
color: #FFFFFF; /* Direct white color for better visibility */ | |
} | |
/* Additional text elements styling */ | |
label { | |
color: var(--text-color); | |
} | |
input, textarea { | |
color: var(--text-color); | |
border: 1px solid var(--accent-color); | |
background-color: rgba(255, 255, 255, 0.9); | |
} | |
input:focus, textarea:focus { | |
border-color: var(--primary-color); | |
outline: none; | |
box-shadow: 0 0 5px var(--light-accent); | |
} | |
button { | |
color: #fff; | |
background: var(--primary-color); | |
transition: background-color 0.3s ease; | |
} | |
button:hover { | |
background: var(--accent-color); | |
} | |
/* Links styling */ | |
a { | |
color: var(--primary-color); | |
text-decoration: none; | |
transition: color 0.3s ease; | |
} | |
a:hover { | |
color: var(--accent-color); | |
} | |
/* List items styling */ | |
li { | |
color: var(--text-color); | |
} | |
/* Selection styling */ | |
::selection { | |
background: var(--light-accent); | |
color: var(--primary-color); | |
} | |
/* Form elements */ | |
select, input[type="text"], input[type="number"], textarea { | |
border: 1px solid var(--accent-color); | |
padding: 8px; | |
border-radius: 4px; | |
color: var(--text-color); | |
background-color: white; | |
} | |
select:focus, input[type="text"]:focus, input[type="number"]:focus, textarea:focus { | |
border-color: var(--primary-color); | |
outline: none; | |
box-shadow: 0 0 3px var(--accent-color); | |
} | |
/* Tables if needed */ | |
table { | |
border-collapse: collapse; | |
width: 100%; | |
margin: 1rem 0; | |
} | |
th, td { | |
border: 1px solid var(--accent-color); | |
padding: 8px; | |
text-align: left; | |
color: var(--text-color); | |
} | |
th { | |
background-color: var(--light-accent); | |
color: var(--primary-color); | |
} | |
/* Code blocks if needed */ | |
code { | |
background-color: var(--light-accent); | |
padding: 2px 4px; | |
border-radius: 3px; | |
color: var(--primary-color); | |
} | |
/* Alert messages if needed */ | |
.alert { | |
padding: 1rem; | |
margin: 1rem 0; | |
border-radius: 4px; | |
border: 1px solid var(--accent-color); | |
background-color: var(--light-accent); | |
color: var(--text-color); | |
} | |
/* Loading indicators if needed */ | |
.loading { | |
color: var(--secondary-color); | |
} |