* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
background-color: #FAFAFA;
}
.hero {
padding: 0 20px;
text-align: center;
}
.hero h1 {
margin-bottom: 0.75em;
color: rgba(0, 0, 0, 1);
}
.hero p {
margin-bottom: 2em;
color: rgba(0, 0, 0, 0.4);
}
.status {
display: inline-flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
border-radius: 50%;
background-color: #FFFFFF;
box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05);
}
.status:before {
content: "\01F31D";
font-size: 3em;
}
@media screen and (prefers-color-scheme: dark)
{
body {
background-color: #121212;
}
.hero h1 {
color: rgba(255, 255, 255, 1);
}
.hero p {
color: rgba(255, 255, 255, 0.4);
}
.status {
background-color: #1D1D1D;
}
.status:before {
content: "\01F31A";
}
}