:root {
    --bubble-animation-x: 0px;
    --bubble-animation-y: -100px;
}

.loader {
    border: 16px solid #f3f3f3;
    /* Light grey */
    border-top: 16px solid #3498db;
    /* Blue */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.error {
    color: firebrick;
}

.success {
    color: cornflowerblue;
    font-weight: bold;
    font-size: xx-large;
}

#main {
    display: flex;
    justify-content: center;
}

.panel {
    margin-left: 15px;
    margin-right: 15px;
}

.vl {
    border-left: 2px solid gray;
}

#btnHeartbeat {
    padding: 0;
    border: none;
    background: none;
}

.heartAnimated {
    animation: heartPulse 0.5s ease-in-out;
}

@keyframes heartPulse {
    0% {
        transform: scale(1.0);
    }
    20% {
        transform: scale(1.005);
    }
    50% {
        transform: scale(1.25);
    }
    90% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1.0);
    }
}

#dedication {
    color:turquoise;
    font-size: small;
    opacity: 50%;
    text-align: center;
    padding: 20px;
}

#dedicationContainer {
    padding: 20px;
}

@keyframes bubbleFloat {
    0% {
        transform: translate(0) scale(1.0) ;
        opacity: 1.0;
    }
    98% {
        transform: translate(calc(var(--bubble-animation-x) * 0.98), calc(var(--bubble-animation-y) * 0.98)) scale(1.0);
        opacity: 1.0;
    }
    100% {
        transform: translate(var(--bubble-animation-x), var(--bubble-animation-y)) scale(2.0);
        opacity: 0.0;
    }
}