form {
    position: relative;
}

.back-btn {
    position: absolute;
    top: 48px;
    left: 16px;
    padding: 4px;
    border-radius: 50%;
    transition: all ease-in-out 125ms;
}

.back-btn:hover {
    scale: 1.1;
    background-color: var(--medium-grey);


}

.red-border {
    border: 1px solid var(--red);
}

.dialog {
    position: absolute;
    align-self: center;
    bottom: 0;
    height: 64px;
    transition: 100ms ease-in-out;
    transform: translateY(70px);
    background-color: var(--darke-blue);
    color: var(--white);
    padding: 16px;
    text-wrap: nowrap;
    border-radius: 12px;
}

.dialog-active {
    transform: translateY(-50vh);
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

.shake {
    animation: shake 0.3s ease;
}

.link,
.link:visited {
    color: var(--light-blue);
}