body {
    
    background: linear-gradient(180deg, #0f0530 0%, #000000 100%); 
    color: #e0f7fa; 
    font-family: 'Consolas', 'Lucida Console', monospace; 
    line-height: 1.5;
}




header {
    background: rgba(15, 5, 48, 0.8); 
    border-bottom: 1px solid #4a148c; 
    backdrop-filter: blur(5px); 
    color: #ffffff;
}

.company-name {
    color: #ffeb3b; 
    text-shadow: 0 0 5px rgba(255, 235, 59, 0.5); 
}

.status-type {
    color: #b39ddb; 
}

.logo {
    
    background: radial-gradient(#8e24aa, #4a148c); 
    border-radius: 50%; 
    box-shadow: 0 0 10px #8e24aa; 
}

footer {
    border-top: 1px dashed #212121;
    background: transparent; 
    color: #9e9e9e;
    padding: 10px 0;
}

footer a {
    color: #80deea; 
    text-decoration: none;
}




.section-title {
    color: #80deea; 
    border-bottom: 2px solid #00acc1;
    background: transparent;
    padding: 8px 0;
    margin-top: 25px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.service {
    
    background: rgba(10, 10, 30, 0.7); 
    border: 1px solid #4a148c;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(179, 157, 219, 0.3); 
    transform: perspective(1000px) rotateX(1deg); 
}

.service:hover {
    background: rgba(10, 10, 40, 0.8); 
    border: 1px solid #ff4081; 
    box-shadow: 0 0 20px #ff4081;
    transition: all 0.3s ease;
    transform: perspective(1000px) rotateX(0deg);
}

.service-info h3 {
    color: #e0f7fa;
    border-bottom: 1px solid #4a148c;
}

.uptime-percentage {
    color: #ffeb3b; 
    font-weight: 700; 
    text-shadow: 0 0 8px rgba(255, 235, 59, 0.7);
}




.badge-operational {
    background: #00897b; 
    color: #e0f7fa;
    border: 1px solid #4db6ac;
    box-shadow: 0 0 5px #4db6ac;
}
.dot-up {
    background: #4db6ac;
    box-shadow: 0 0 5px #4db6ac;
}


.badge-degraded {
    background: #fbc02d; 
    color: #444444;
    border: 1px solid #ffd54f;
    box-shadow: 0 0 5px #ffd54f;
}

.badge-outage {
    background: #e53935; 
    color: #e0f7fa;
    border: 1px solid #ff8a80;
    box-shadow: 0 0 5px #ff8a80;
}




.chart-container {
    
    border: 2px solid #8e24aa;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(179, 157, 219, 0.5);
}