45 lines
906 B
CSS
45 lines
906 B
CSS
.color {
|
|
border: solid var(--color-text);
|
|
border-radius: 0 2rem 0 2rem;
|
|
width: 50%;
|
|
margin: 1rem auto;
|
|
text-align: center;
|
|
padding: .5rem;
|
|
font-weight: 900;
|
|
}
|
|
|
|
@media (max-width: 1050px) {
|
|
.color {
|
|
width: 70%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 650px) {
|
|
.color {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
#dark { background-color: var(--color-dark); }
|
|
#light { background-color: var(--color-light); }
|
|
#purple-dark { background-color: var(--color-purple-dark); }
|
|
#purple-light { background-color: var(--color-purple-light); }
|
|
#pink-dark { background-color: var(--color-pink-dark); }
|
|
#pink-light { background-color: var(--color-pink-light); }
|
|
#orange-dark { background-color: var(--color-orange-dark); }
|
|
#orange-light { background-color: var(--color-orange-light); }
|
|
|
|
#dark,
|
|
#purple-dark,
|
|
#pink-dark,
|
|
#orange-dark {
|
|
color: var(--color-light);
|
|
}
|
|
|
|
#light,
|
|
#purple-light,
|
|
#pink-light,
|
|
#orange-light {
|
|
color: var(--color-dark);
|
|
}
|
