:root {
    /* Color Variables */
    --success: #5F5;
    --success-shade: #5C5;
    --success-light: #7F7;
    --success-light-shade: #7C7;

    --info: #55F;
    --info-shade: #55C;
    --info-light: #77F;
    --info-light-shade: #77C;

    --warning: #FF5;
    --warning-shade: #CC5;
    --warning-light: #FF7;
    --warning-light-shade: #CC7;

    --danger: #F55;
    --danger-shade: #C55;
    --danger-light: #F77;
    --danger-light-shade: #C77;

    --dark: #222;
}

.glassmorph {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-position: bottom;
}

.btn-success {
    --bs-btn-bg: var(--success-light);
    --bs-btn-border-color: var(--success-light);
}

.btn-warning {
    --bs-btn-bg: var(--warning-light);
    --bs-btn-border-color: var(--warning-light);
}

.btn-danger {
    --bs-btn-bg: var(--danger-light);
    --bs-btn-border-color: var(--danger-light);
}

.btn-info {
    --bs-btn-bg: var(--info-light);
    --bs-btn-border-color: var(--info-light);
}

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../images/mobile_bg.png');
}

.success {
    color: var(--success-light);
}

.success-bg {
    background-color: var(--success-light);
}

.info {
    color: var(--info);
}

.info-bg {
    background-color: var(--info);
}

.warning {
    color: var(--warning);
}

.warning-bg {
    background-color: var(--warning);
}

.danger {
    color: var(--danger);
}

.danger-bg {
    background-color: var(--danger);
}

.liquid-glass {
    overflow: hidden;
    border-radius: inherit;
    transition: opacity 0.26s ease-out;
    border-radius: 28px;
    filter: drop-shadow(-8px -10px 46px #0000005f);
    backdrop-filter: brightness(1.1) blur(2px) url("../images/feImage.png");
    -webkit-backdrop-filter: brightness(1.1) blur(2px) url("../images/feImage.png");
}

.liquid-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: 28px;
    pointer-events: none;
    -webkit-box-shadow: inset 2px 2px 0px -2px rgba(255, 255, 255, 0.7),
        inset 0 0 3px 1px rgba(255, 255, 255, 0.7);
    box-shadow: inset 6px 6px 0px -6px rgba(255, 255, 255, 0.7),
        inset 0 0 8px 1px rgba(255, 255, 255, 0.7);
}

.input--modific {
    border: none;
    border-bottom: solid #FFF 3px;
    border-radius: 2px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: transparent;
    color: #FFF;
}

.input--modific:focus {
    border: none;
    border-bottom: transparent;
}

.container {
    height: auto;
    width: 95% !important;
    border-radius: 20px;
    max-width: none !important;
}

.form__button {
    margin: 0 30%;
    margin: 0 auto;
    padding: 0;
    width: 90%;
}

.form-control {
    color: #FFF;
}

h1,
h5,
label,
input,
#countdown {
    font-family: "Fredoka", sans-serif;
    color: #FFF;
}

.info-span {
    font-family: "Fredoka", sans-serif;
    font-size: 1.5em;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #FFF;
}

.btn,
.btn:hover {
    color: var(--dark);
    font-family: "Fredoka", sans-serif;
}

.sortable-list {
    list-style: none;
}

.sortable-item {
    cursor: grab;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.2s, transform 0.2s;
}

.sortable-item:hover {
    background: #E8F0FF;
    transform: scale(1.01);
}

.dragging {
    opacity: 0.7;
    transform: rotate(-2deg);
}

.over {
    border: 2px dashed #FF8C42;
    background: #FFF3E0;
}

.badge {
    width: auto;
    height: 2em;
}

.fa {
    font-size: 2em;
    cursor: pointer;
}

.info-span .fa {
    font-size: 1.5em;
}

.not-ready {
    border: var(--bs-list-group-border-width) solid var(--danger);
}

.ready {
    border: var(--bs-list-group-border-width) solid var(--success);
}

.icon-btn {
    font-size: 1.5em;
    cursor: pointer;
    display: flex;
    justify-content:  center;
    align-items: center;
    aspect-ratio: 1;
    border-radius: 25%;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.icon-btn.disabled {
    cursor: default;
    opacity: 0.5;
    background-color: var(--danger-light) !important;
    color: var(--danger-shade) !important;
}

.icon-btn.info {
    background-color: var(--info-light);
    color: var(--info-shade);
}

.icon-btn.success {
    background-color: var(--success-light);
    color: var(--success-shade);
}

.icon-btn.warning {
    background-color: var(--warning-light);
    color: var(--warning-shade);
}

.icon-btn.danger {
    background-color: var(--danger-light);
    color: var(--danger-shade);
}

@media (min-width: 768px) {
    body {
        background-image: url('../images/desktop_bg.png');
    }

    .container {
        width: 50% !important;
    }
}