:root {
    --def-text-color: #cdcdcd
}
body {
    background: #0A1121;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--def-text-color);
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}
.container {
    width: 90%;
    max-width: 800px;

    .block {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 25px;
        margin: 15px 0;
        border-radius: 10px;
        background: linear-gradient(45deg, #161E31, #242f47);
        color: var(--def-text-color);
    }

    .errblock {
        background: linear-gradient(45deg, #ff6b6b6f, #e29f9f51) !important;
    }

    #sub {
        .status {
            font-size: 17px;
        }
        .name {
            font-size: 32px;
            font-weight: 900;
            letter-spacing: 1px;
            margin: 4px 0 15px 0;
            color: #ebebeb;
        }
        .devices, .date {
            font-size: 16px;
            margin: 2px 0;
        }

        .conf {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 17px;
            height: 40px;
            padding: 0 15px;
            box-sizing: border-box;
            border: var(--def-text-color) 1px solid;
            opacity: 0.7;
            border-radius: 5px;
            cursor: pointer;
        }
    }

    #about, #tutorial, #support {
        display: none;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        padding: 10px;

        > img {
            width: 28px;
            aspect-ratio: 1/1;
            margin-right: 10px;
            opacity: 0.2;
        }
    }
}

red {
    color: rgb(225, 67, 67);
}
green {
    color: rgb(74, 225, 74);
}