/*
Author: Erivan Luciano
Date: 03/09/2023
*/

body {

    background-color: blue;
    color: white;

}


#id {
    display: none;
}


    /* Estilo de hover para as imagens de chuva */
.raindrop:hover {
    filter: brightness(150%); /* Exemplo de efeito de brilho no hover */
}

.raindrop {
    position: absolute;
    animation: fall 2s linear infinite; /* Define uma animação para a queda da imagem */
}

@keyframes fall {
    0% {
        transform: translateY(-100px) rotate(0deg); /* Posição inicial da imagem */
        opacity: 0.7; /* Opacidade inicial (pode ajustar conforme necessário) */
    }
    100% {
        transform: translateY(calc(100vh + 100px)) rotate(360deg); /* Posição final da imagem */
        opacity: 0; /* Opacidade final (a imagem desaparece no final da animação) */
    }
}

#video {
    margin-top: 30px;
  }
  
#not{
    position: relative;
    width: 150px; /* Defina o tamanho apropriado */
    height: 45px; /* Defina o tamanho apropriado */
    border-radius: 10px;
    border-color: white;
    background-color: red;
    color: white;
    font-size: 18px;
}

#yes {
    position: relative;
    width: 150px; /* Defina o tamanho apropriado */
    height: 45px; /* Defina o tamanho apropriado */
    border-radius: 10px;
    border-color: white;
    background-color: green;
    color: white;
    font-size: 18px;
}


.titulo {
    width: 350px;
    height: 180px;

}

.opcoes {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
}