:root {
    --bg-color: #1a1a1a;
}

body,html{
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
}
h1,h2,h3,p,a{
    color: #ffffff;
}

header{
    height: 50vh;
    margin: 0;
    background-image:
        linear-gradient(#1a1a1a2a, #1a1a1ac5),
        url("https://kotoca.net/KOTOCA.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    transition: height 0.4s ease, padding 0.4s ease;
    border-radius: 0 0 20px 20px;
}
header img{
    display: none;
    transition: opacity 0.4s ease;
    opacity: 0;
}
header h1{
    margin: 0;
    text-align: center;
}
#top_status{
    padding: 20px;
    border-radius: 5px;
}
.top_status_up{
    background-color: #159740;
}
.top_status_warn{
    background-color: #bb9f00;
}
.top_status_down{
    background-color: #b61e1e;
}
#top_status p{
    margin: 0;
    color: #fff;
}
.to_top_link{
    margin-left: 20px;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
}
.to_top_link:hover{
    background-color: #ffffff22;
}

main{
    margin: 10px auto;
    width: 90vw;
    max-width: 800px;
}
#incidents a{
    text-decoration: none;
    display: block;
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 10px;
}
#incidents a h3, #incidents a p{
    margin: 0;
    color: #fff;
}
.incident_error{
    background-color: #cc0000;
    border: #aa0000 solid 2px;
    border-left: #aa0000 solid 5px;
}
.incident_error:hover{
    background-color: #e60101;
}
.incident_warn{
    background-color: #dbba00;
    border: #8f8300 solid 2px;
    border-left: #8f8300 solid 5px;
}
.incident_warn:hover{
    background-color: #f1ce05;
}
.incident_info{
    background-color: #108ec9;
    border: #108ec9 solid 2px;
    border-left: #0275aa solid 5px;
}
.incident_info:hover{
    background-color: #0a9add;
}

.se_content{
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: #ffffff22 0px 0px 10px;
}
.se_content h3{
    margin: 0 0 10px 0;
}
.se_div{
    display: flex;
    width: 100%;
    overflow-x: scroll;
    scrollbar-width: thin;
    justify-content: end;
}
.se_a{
    width: 5px;
    margin-left: 5px;
    height: 20px;
    min-width: 5px;
    flex-shrink: 0;
}
.se_operational{
    background-color: #159740;
}
.se_degraded{
    background-color: #978e15;
}
.se_down{
    background-color: #971515;
}

#pastincident_div a{
    text-decoration: none;
    display: block;
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 10px;
}

#pastincident_div a h3, #pastincident_div a p{
    margin: 0;
    color: #ffffff;
}
.past_incident_error{
    border: #aa0000 solid 2px;
    border-left: #aa0000 solid 5px;
}
.past_incident_error:hover{
    background-color: #e6010130;
}
.past_incident_warn{
    border: #8f8300 solid 2px;
    border-left: #8f8300 solid 5px;
}
.past_incident_warn:hover{
    background-color: #dfbe0530;
}
.past_incident_info{
    border: #108ec9 solid 2px;
    border-left: #0275aa solid 5px;
}
.past_incident_info:hover{
    background-color: #0a9add30;
}

footer p {
    text-align: center;
}

body.scrolled{
    padding-top: 300px;
}
body.scrolled.incidents_body{
    padding-top: 50px;
}
body.scrolled header{
    height: 60px;
    position: fixed;
    top: 10px;
    left: 10px;
    padding: 0 10px;
    width: calc(100% - 40px);
    border-radius: 10px;
    background: none;
    display: flex;
    flex-direction: row;
    justify-content: left;
    background-color: #1a1a1a;
    box-shadow: #ffffff22 0px 0px 10px;
}
body.scrolled header img{
    display: block;
    opacity: 1;
    width: 40px;
    height: 40px;
}
body.scrolled header div{
    display: block;
    margin-left: 10px;
}
body.scrolled header h1{
    margin: 0;
    font-size: 25px;
}
body.scrolled header p{
    margin: 0 0 0 10px;
    font-size: 8px;
}
body.scrolled #top_status{
    display: none;
}