:root {
    --color-primary-light: white;
    --color-primary-dark: #212121;
    --color-primary-gray: #404040;
    --color-primary-gray-light: #626262;
    --color-primary-gray-border: #969995;
    --color-primary-gray-link: #bdbdbd;
    --color-primary-gray-bg: #383838;
    --color-primary-red: #fa6c6d;
    --color-primary-dark-red: #c40000;
    --color-primary-light-red: #c24138;
    --color-primary-purple: #794b94;
    --color-primary-blue: #0706ffbd;
    --color-primary-white: #ffffff;
}

body {
    padding-block: 20px;
    padding-inline: 15px;
}

button {
    outline: none;
    border: none;
    padding: 6px;
    padding-inline: 22px;
    margin-block: 7px;
    transition: ease-in-out all 0.2s;
    background-color: var(--color-primary-dark);
    color: var(--color-primary-white);
    border-radius: 20px;
}

button:focus {
    outline: solid 3px var(--color-primary-purple);
}

button:active {
    transform: scale(0.85);
}

body {
    background-image: url("/assets/bg.png");
    font-family: "Kanit", sans-serif;
}

.form-switch {
    font-size: 22px;
}

#list {
    max-width: 100%;
    margin-top: -8px;
    border: solid 3px var(--color-primary-purple);
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-top: none;
}

h3 {
    position: relative;
    max-width: 100%;
    background-color: var(--color-primary-dark);
    color: white;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    border: solid 3px var(--color-primary-purple);
    opacity: 0.85;
}

.app-ready {
    font-size: 15px;
    border: solid 1px var(--color-primary-purple);
    border-radius: 20px;
    padding: 5px;
    padding-inline: 15px;
    position: absolute;
    top: -19px;
    background-color: var(--color-primary-dark);
}

#list {
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.35),
        0 10px 30px rgba(0, 0, 0, 0.45);
}

.form-switch .form-check-input {
    background-color: white;
    border-color: var(--color-primary-gray-dark);
}

/* knob color */
.form-switch .form-check-input::before {
    background-color: var(--color-primary-gray-link);
}

/* checked state */
.form-switch .form-check-input:checked {
    background-color: var(--color-primary-gray);
    border-color: var(--color-primary-gray-link);
}

#logs {
    background-color: var(--color-primary-red);
    color: var(--color-primary-white);
    padding: 2px;
    position: fixed;
    top: 3px;
    left: 50%;
    margin: 5px;
    transform: translateX(-50%);
}

.close-logs {
    position: fixed;
    top: 10px;
    padding: 1px;
    background-color: var(--color-primary-dark);
    border: solid 1px var(--color-primary-purple);
    color: white;
    border-radius: 21px;
    height: 27px;
    width: 27px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    left: 17px;
}