@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chango&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: 'Ubuntu', Arial, monospace;
}

html {
    background-color: black;
}

body {
    background: var(--body-bg);
    min-height: 100vh;
}

/* BUTTONS */

button.filled {
    padding: 10px;
    background-color: var(--button-bg);
    color: var(--button-fg);
    border-radius: 5px;
    border: 0px solid black;
    cursor: pointer;

    transition: 0.1s background, 0.1s color;
}

button.filled:hover {
    background-color: var(--button-bg-hover);
    color: var(--button-fg-hover);

    transition: 0.1s background, 0.1s color;
}

/* MESSAGES */

div.message {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 5px;
    margin: 10px;
    border-radius: 0px !important;
    align-items: center;
    color: var(--message-fg);
}
div.message.info {
    background-color: rgb(0, 155, 255, 0.1);
    border: 1px solid rgb(0, 155, 255);
}
div.message.success {
    background-color: rgb(9, 210, 36, 0.1);
    border: 1px solid rgb(9, 210, 36);
}
div.message.warn {
    background-color: rgb(238, 190, 41, 0.1);
    border: 1px solid rgb(238, 190, 41);
}
div.message.error {
    background-color: rgb(238, 74, 41, 0.1);
    border: 1px solid rgb(238, 74, 41);
}

div.message p {
    display: flex;
    flex-basis: 0;
    flex-grow: 4;
}

div.message a.link {
    text-decoration-line: none;
}
div.message a.link:hover {
    text-decoration-line: underline;
}
div.message.info a.link {
    color: rgb(0, 155, 255);
}
div.message.success a.link {
    color: rgb(9, 210, 36);
}
div.message.warn a.link {
    color: rgb(238, 190, 41);
}
div.message.error a.link {
    color: rgb(238, 74, 41);
}
div.message a.button, div.message button.button {
    padding: 12px !important;
    margin: 0 !important;
    font-size: 18px !important;
    color: white !important;
    text-decoration-line: none;
}
a.button.filled {
    flex-basis: 0;
    flex-grow: 1;
    background-color: var(--form-button-bg);
    text-align: center;
    padding: 10px;
    cursor: pointer;
}
div.message.info a.button, div.message.info button.button {
    background-color: rgb(0, 155, 255) !important;
}
div.message.success a.button, div.message.success button.button {
    background-color: rgb(9, 210, 36) !important;
}
div.message.warn a.button, div.message.warn button.button {
    background-color: rgb(238, 190, 41) !important;
}
div.message.error a.button, div.message.error button.button {
    background-color: rgb(238, 74, 41) !important;
}

/* WAITING */

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

div.waiting {
    position: relative;
    flex-basis: 0;
    flex-grow: 1;
}
div.waiting::before {
    position: absolute;
    content: "";
    inset: 0;
    background-color: var(--waiting-lock-bg);
}
div.waiting::after {
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--waiting-anim-bg);
    width: 50px;
    height: 2px;
    animation: rotating 0.75s ease-in-out infinite;
}