* {
    --bg-color: #F9F7F7;
    --bg-darker-color: #DBE2EF;
    --text-color: #112D4E;
    --active-color: #3F72AF;
    --accent-color: #96bbff;
    --light-text-color: #F9F7F7;
    --inactive-color: #8395A7;
    --error-bg-color: #2c0b0e;
    --error-border-color: #842029;
    --error-color: #ea868f;
    user-select: none;
}

div.error {
    position: fixed;
    width: 40%;
    top: -100px;
    left: 50%;
    border: 2px solid var(--error-border-color);
    border-radius: 5px;
    color: var(--error-color);
    background-color: var(--error-bg-color);
    padding: 10px 30px;
    transform: translate(-50%, 0);
    transition: all 0.5s ease-out;
    z-index: 3;
}

div.error.show {
    top: 30px;
}