/* Estilo do corpo */

	body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
      overflow: hidden;
	  background: linear-gradient(to bottom, #87CEEB, #ffffff); /* Céu azul com gradiente */
    }

	.divLogo{
	  position: absolute;	
	  top: 15%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  z-index: 1;
	}
	
    .logo {
      width: 250px;
      height: 250px;
      opacity: 0;
      transform: scale(0.5);
      transition: all 2s ease-in-out;
    }

    .show {
      opacity: 1;
      transform: scale(1);
    }

    /* Container da cena */
    .scene {
      position: relative;
      width: 100vw;
      height: 100vh;
    }

    /* Sol */
    .sun {
      position: absolute;
      bottom: 40%;
      left: 50%;
      transform: translateX(-50%);
      width: 150px;
      height: 150px;
      background: radial-gradient(circle, #FFD700, #FFB400);
      border-radius: 50%;
      animation: sunrise 40s linear infinite;
      box-shadow: 0 0 50px 30px rgba(255, 223, 0, 0.8);
    }

    @keyframes sunrise {
      0%, 100% {
        bottom: 200%;
        opacity: 0.5;
      }
      50% {
        bottom: -100%;
        opacity: 1;
      }
    }

    /* Nuvens */
    .cloud {
      position: absolute;
      top: 20%;
      background: #ffffff;
      border-radius: 50px;
      box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.1);
      animation: moveCloud 20s linear infinite;
    }

    .cloud::before, .cloud::after {
      content: '';
      position: absolute;
      background: #ffffff;
      border-radius: 50px;
    }

    .cloud {
      width: 120px;
      height: 60px;
    }

    .cloud::before {
      width: 80px;
      height: 80px;
      top: -30px;
      left: 10px;
    }

    .cloud::after {
      width: 100px;
      height: 100px;
      top: -50px;
      right: -20px;
    }

    @keyframes moveCloud {
      0% {
        transform: translateX(-200px);
      }
      100% {
        transform: translateX(100vw);
      }
    }

    /* Passarinhos */
    .bird {
      position: absolute;
      width: 30px;
      height: 30px;
      background-color: #000; /* Cor do passarinho */
      border-radius: 50%;
      top: 10%; /* Altura inicial nos céus */
      animation: fly 10s linear infinite;
      transform: rotate(0deg); /* Rota inicial do pássaro */
    }

    .bird::before {
      /* Asa esquerda */
      content: '';
      position: absolute;
      top: 5px;
      left: -10px;
      width: 15px;
      height: 5px;
      background-color: #000;
      border-radius: 50%;
      transform-origin: right center;
      animation: flap 0.5s ease-in-out infinite;
    }

    .bird::after {
      /* Asa direita */
      content: '';
      position: absolute;
      top: 5px;
      left: 25px;
      width: 15px;
      height: 5px;
      background-color: #000;
      border-radius: 50%;
      transform-origin: left center;
      animation: flap 0.5s ease-in-out infinite alternate;
    }

    @keyframes flap {
      from {
        transform: rotate(10deg);
      }
      to {
        transform: rotate(-20deg);
      }
    }

    @keyframes fly {
      0% {
        left: -10%;
        transform: translateY(20px) scale(1); /* Movimento inicial leve */
      }
      25% {
        transform: translateY(-10px) scale(1.1); /* Movimento dinâmico */
      }
      50% {
        transform: translateY(10px) scale(0.9); /* Leve descida no voo */
      }
      100% {
        left: 110%;
      }
    }

    /* Gramado */
    .grass {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 30%;
      background: #228B22;
      clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0% 100%);
      z-index: 2;
    }

    /* Lápides */
    .headstone {
      position: absolute;
      bottom: 12%;
      width: 120px;
      height: 150px;
      background: #555;
      border-radius: 20px;
      border: 3px solid #333;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      animation: floatLapide 5s ease-in-out infinite;
      overflow: hidden;
    }

    .headstone img {
      width: 100%;
      height: 80px;
      object-fit: cover;
      border-bottom: 2px solid #444;
	  cursor: pointer;
    }

    .headstone .text {
      margin-top: 10px;
      color: #ddd;
      font-family: Arial, sans-serif;
      font-size: 14px;
      text-align: center;
    }

    .headstone .text .name {
      font-size: 16px;
      font-weight: bold;
      color: #fff;
    }

    /* Posicionando as lápides */
    .pet1 {
      left: 20%;
    }

    .pet2 {
      left: 50%;
    }

    .pet3 {
      left: 80%;
    }
	
	/* Cachorro Anjo */
    .angel-dog {
      position: absolute;
      top: 10%; /* Posição inicial no céu */
      left: 5%; /* Parte esquerda superior */
      width: 80px;
      height: 60px;
      background: #ffcc99; /* Cor do corpo do cachorro */
      border-radius: 40px; /* Arredondar o corpo */
      box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.6), 0 0 40px 15px rgba(255, 215, 0, 0.8); /* Brilho */
      animation: flyAngel 6s ease-in-out infinite, glow 2s ease-in-out infinite;
    }

    /* Cabeça do cachorro */
    .angel-dog .head {
      position: absolute;
      top: -35px;
      left: 13px;
      width: 50px;
      height: 50px;
      background: #ffcc99;
      border-radius: 50%; /* Cabeça arredondada */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    /* Rosto feliz */
    .angel-dog .face {
      position: absolute;
      top: 12px;
      left: 5px;
      width: 40px;
      height: 25px;
      background: transparent;
    }

    /* Olhos */
    .angel-dog .face .eye {
      position: absolute;
      top: 5px;
      width: 5px;
      height: 5px;
      background: black;
      border-radius: 50%; /* Forma circular dos olhos */
    }

    .angel-dog .face .eye.left {
      left: 8px;
    }

    .angel-dog .face .eye.right {
      right: 8px;
    }

    /* Boca sorridente */
    .angel-dog .face .mouth {
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 15px;
      height: 8px;
      transform: translateX(-50%);
      border: 2px solid black; /* Desenha a boca */
      border-top: none; /* Remove a linha superior */
      border-radius: 0 0 10px 10px; /* Forma de arco para o sorriso */
    }

    /* Orelhas do cachorro */
    .angel-dog .head::before,
    .angel-dog .head::after {
      content: '';
      position: absolute;
      top: 5px;
      width: 15px;
      height: 25px;
      background: #cc9966; /* Cor das orelhas */
      border-radius: 50%; /* Formato oval */
    }

    .angel-dog .head::before {
      left: -10px; /* Orelha esquerda */
      transform: rotate(-20deg);
    }

    .angel-dog .head::after {
      right: -10px; /* Orelha direita */
      transform: rotate(20deg);
    }

    /* Cauda do cachorro */
    .angel-dog .tail {
      position: absolute;
      bottom: 10px;
      right: -15px; /* Move para fora do corpo */
      width: 20px;
      height: 10px;
      background: #cc9966; /* Cor da cauda */
      border-radius: 10px;
      transform: rotate(30deg); /* Inclinação */
    }

    /* Auréola */
    .angel-dog::before {
      content: '';
      position: absolute;
      top: -45px;
      left: 20px;
      width: 40px;
      height: 10px;
      background: rgba(255, 223, 0, 0.8);
      border-radius: 50%;
      box-shadow: 0 0 15px rgba(255, 223, 0, 0.8), 0 0 30px rgba(255, 223, 0, 0.5);
    }

    /* Asas */
    .angel-dog::after {
      content: '';
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 50px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
      opacity: 0.8;
    }

    /* Animação de voo do cachorro */
    @keyframes flyAngel {
      0% {
        transform: translateY(0px) translateX(0px);
      }
      25% {
        transform: translateY(-15px) translateX(10px);
      }
      50% {
        transform: translateY(-30px) translateX(20px);
      }
      75% {
        transform: translateY(-15px) translateX(30px);
      }
      100% {
        transform: translateY(0px) translateX(40px); /* Termina ligeiramente à direita */
      }
    }

    /* Animação de brilho */
    @keyframes glow {
      0%, 100% {
        box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.6), 0 0 40px 15px rgba(255, 215, 0, 0.8);
      }
      50% {
        box-shadow: 0 0 30px 15px rgba(255, 255, 255, 1), 0 0 50px 25px rgba(255, 215, 0, 1);
      }
    }
	
	/* Estilo da borda totalmente arredondada */
    .modal-content {
      position: relative;
      padding: 20px;
      background: #f9f9f9;
      border: none; /* Remove bordas padrões */
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* Sombras suaves */
    }

    /* Gradiente arredondado como toque extra no contorno */
    .modal-content {
      border: 5px solid transparent;
      border-image: linear-gradient(to bottom, #2596be, #e0c097, #2596be);
      border-image-slice: 1;
    }

    /* Centraliza o texto e dá um visual moderno */
    .modal-header {
      border-bottom: none;
      text-align: center;
    }

    .modal-title {
      font-size: 1.8rem;
      font-family: "Georgia", serif;
      text-transform: uppercase;
      color: #b67333;
    }

    .modal-body {
      font-size: 1.1rem;
      color: #4a4a4a;
      text-align: center;
    }

    /* Estilo personalizado para os botões */
    .btn-custom {
      background-color: #2596be;
      color: #fff;
      font-weight: bold;
      border-radius: 30px;
      padding: 10px 20px;
    }

    .btn-custom:hover {
      background-color: #d6814d;
    }

    .modal-footer {
      border-top: none;
      justify-content: center;
    }