@charset "UTF-8";

body {
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    background-image: url("https://www.zys-cloud.top/images/background");
    background-repeat: no-repeat;
}

.nav-bar {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #58a8f1;
    padding-left: 8%;
    padding-right: 8%;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 20px;
}

.nav-bar a {
    color: #ffffff;
}

.block {
    background: #ffffff99;
    padding: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0 0 5px rgba(0,0,0,0.25);
}

.block-online {
    padding: 30px;
    background: #b2dba1;
    border-radius: 15px;
    border: 1px solid #ffffff;
}

.block-online:hover {
    padding: 30px;
    background: #d0e9c6;
    border-radius: 15px;
    border: 1px solid #ffffff;
}

.block-offline {
    padding: 30px;
    border: 1px solid #ffffff;
    border-radius: 15px;
    background: #f0ad4e;
}

.block-offline:hover {
    padding: 30px;
    border: 1px solid #ffffff;
    border-radius: 15px;
    background: #f5e79e;
}

.block-error {
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #ffffff;
    background: #dca7a7;
}

.block-error:hover {
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #ffffff;
    background: #ebccd1;
}

.block-other {
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #ffffff;
    background: #afd9ee;
}

.block-other:hover {
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #ffffff;
    background: #d9edf7;
}

.block-clickable {
    background: #ffffff;
}

.block-clickable-info {
    background: #d9edf7;
}

.block-clickable:hover {
    background: #dff0d8;
}

.block-clickable-info:hover {
    background: #dff0d8;
}

.removable a {
    color: rgba(255, 255, 255, 0);
}

.removable a:hover {
    color: red;
}