⚙️
MAINTENANCE IN PROGRESS
We’ll Be Back Soon.
We’re currently solving some backend issues and upgrading
our frontend to give you a better and more secure experience.
Backend security improvements • Frontend upgrades
```
### `style.css`
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
font-family: Arial, Helvetica, sans-serif;
background: #f7f7f5;
color: #171717;
display: flex;
align-items: center;
justify-content: center;
}
.maintenance {
width: min(620px, 90%);
text-align: center;
padding: 50px 30px;
}
.icon {
width: 80px;
height: 80px;
margin: 0 auto 30px;
border: 1px solid #ddd;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
animation: rotate 4s linear infinite;
}
.status {
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
color: #777;
margin-bottom: 18px;
}
h1 {
font-size: clamp(42px, 7vw, 72px);
line-height: 0.95;
letter-spacing: -3px;
margin-bottom: 25px;
}
.description {
max-width: 500px;
margin: 0 auto;
font-size: 17px;
line-height: 1.7;
color: #666;
}
.progress {
width: 260px;
height: 4px;
background: #ddd;
margin: 35px auto 18px;
overflow: hidden;
}
.progress-bar {
width: 45%;
height: 100%;
background: #171717;
animation: progress 2s ease-in-out infinite;
}
.small-text {
font-size: 12px;
color: #888;
}
.footer {
margin-top: 50px;
font-size: 13px;
color: #999;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes progress {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(350%);
}
}
@media (max-width: 600px) {
.maintenance {
padding: 30px 20px;
}
h1 {
letter-spacing: -2px;
}
.description {
font-size: 15px;
}
}
```