/*
* 
* @Emanuel Almeida
*/
@-webkit-keyframes animation-box {
    from {
        background: #3d0000;
    }

    to {
        background: red;
    }
}
@keyframes opacityChange {
    from {
        opacity: 0; /* Opacidade inicial */
    }
    to {
        opacity:2; /* Opacidade final */
    }
}

.disappear-animation {
    animation: disappear 1s ease forwards; /* Ajuste o tempo de acordo com a duração da sua animação */
}

body {
    background-color: rgb(0, 0, 0);
    margin: 0;
    font-family: monospace;
}

#heartContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#heart {
    
    transition: transform 0.5s ease;
    cursor: pointer;
    max-width: none;
    background-color: red;
    height: 25vi;
    transform: rotate(-45deg) scale(0.5);
    width: 25vi;
    position: relative;
    animation-name: animation-box;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    animation-direction: alternate;
}

#heart:before,
#heart:after {
    content: "";
    background-color: red;
    border-radius: 50%;
    height: 25vi;
    position: absolute;
    width: 25vi;
    animation-name: animation-box;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    animation-direction: alternate;
}
#heart-icon:active {
    display: none;
}

#heart:before {
    top: -12vi;
}

#heart:after {
    left: 12vi;
}
#heart:hover {
    transform: scale(1)  rotate(-45deg);
}

.footer
a {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: red;
}
.footer a:hover{
    color: #3d0000;
}

p{
    text-align: justify;
}

#hidden-content {
    animation: opacityChange 2s ease; /* Nome da animação, duração, função de temporização e repetição */
}

.form-control, .btn {
    box-shadow: none !important; /* Remove o contorno azul padrão */
}
.bg-dark, .btn-dark{
    background: black !important;
}

.btn:hover {
    color: red;
}
.red-text {
    color: red; /* Mude a cor do texto para vermelho */
}


@media (max-width: 765px) {
    .mobile {
        display: block;
    }
}

@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }
}

@media (max-width: 700px) {
    body {
        background-attachment: scroll;
    }
}

@media (max-width: 412px) {
    body {
        background-attachment: scroll;
    }
}