63 lines
1.2 KiB
CSS
63 lines
1.2 KiB
CSS
|
:root {
|
||
|
--var-background: #fff;
|
||
|
--var-color: #000;
|
||
|
--var-background-inverted: #000
|
||
|
}
|
||
|
@media (prefers-color-scheme: dark) {
|
||
|
:root {
|
||
|
--var-background: #000;
|
||
|
--var-color: #fff;
|
||
|
--var-background-inverted: #fff
|
||
|
}
|
||
|
}
|
||
|
|
||
|
html, body {
|
||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
background-color: var(--var-background);
|
||
|
color: var(--var-color);
|
||
|
text-align: center;
|
||
|
font-size: larger;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
@media screen and (max-width: 600px) {
|
||
|
html, body {
|
||
|
font-size: medium;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
h1, span img {
|
||
|
vertical-align: middle;
|
||
|
}
|
||
|
|
||
|
#comparison {
|
||
|
text-align: left;
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
#name {
|
||
|
background-size: cover;
|
||
|
}
|
||
|
|
||
|
#retrying[hidden=false] {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
height: 100%;
|
||
|
width: 100%;
|
||
|
z-index: 100;
|
||
|
background: var(--var-background-inverted);
|
||
|
color: inverted(var(--var-color));
|
||
|
}
|