@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");

body {
    background: black;
    margin: 0;
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    height: 100svh; /* Set body height to full viewport height */
	overflow: hidden;
}

#compassContainer {
    position: relative;
    width: 100%; 
    height: 100svh;
	margin-top: 50%;
	display: none;
}

#safariBase,
#safariPointer {
	display: flex;
	transform-origin: center;
    width: 70%; /* Make both images fill the container */
    position: fixed; /* Position them absolutely within the container */
	margin-left: 15%;
	margin-right: 15%;
}

#intro{
	z-index: 9993449234872349723432;
	margin-left: auto;
	margin-right: auto;
	display: block;
	height: 100vh;
	float: inherit;
}

#safariBase{
	z-index: 0;
}

#safariPointer{
	z-index: 5;
}

#compassButton{
	display: flex;
	transform-origin: center;
	margin-top: 25vw;
    width: 20%; /* Make both images fill the container */
    position: fixed; /* Position them absolutely within the container */
	margin-left: 40%;
	margin-right: 40%;
	animation: shadow-pulse 4s infinite alternate;	
	border-radius: 50%;
	z-index: 10;
}

@keyframes shadow-pulse {
    0% {
      box-shadow: 0 0 10px 5px rgba(220, 220, 220, 0.0);
	  transform: scale(1);
    }
    20% {
      box-shadow: 0 0 20px 10px rgba(255, 65, 242, 0.3);
	  transform: scale(1.1);
    }
	40% {
      box-shadow: 0 0 10px 5px rgba(220, 220, 220, 0.0);
	  transform: scale(1);
    }
   60% {
      box-shadow: 0 0 20px 10px rgba(33, 188, 255, 0.3);
	  transform: scale(1.1);
    }
	80% {
      box-shadow: 0 0 10px 5px rgba(220, 220, 220, 0.0);
	  transform: scale(1);
    }
    100% {
      box-shadow: 0 0 20px 10px rgba(200, 200, 200, 0.3);
	  transform: scale(1.1);
    }
 }

#star{
	display: none;
	width: 50px;
	margin-left: auto;
	margin-right: 20px;
	float: right;
	margin-top: -50px;
}

#safariPointer{
	visibility: hidden;
}

#pleaserotate-backdrop {
  background: rgb(0, 0, 0) !important;
}

#pleaserotate-message {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: white;
}

#pleaserotate-graphic {
  fill: white;
  stroke: white;
}

a[href^=tel] {
  text-decoration: inherit;
  color: inherit;
}

#text{
	animation-duration: 1.0s;
	animation-timing-function: ease-in-out;
	width: 60%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 85%;
}

#text2{
	animation-duration: 1.0s;
	animation-timing-function: ease-in-out;
	width: 60%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 75%;
}

#text3{
    animation-duration: 1.0s;
	animation-timing-function: ease-in-out;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-top: 20px;
}

#captura{
	animation-duration: 1.0s;
	animation-timing-function: ease-in-out;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
	display: none;
	margin-top: 20px;
	animation: shadow-pulse 4s infinite alternate;	
	border-radius: 15px;


}

#text2,#text3{
	display: none;
}

#phone{
	animation-duration: 1.0s;
	animation-timing-function: ease-in-out;
	width: 20%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 80%;
	animation: rotate 4s ease infinite;
	transform-origin: bottom;
	opacity: 0%;
	fill: #ff0000!important;
	display: none;
}

.fade-out-animation {
        animation: fadeOut 1s forwards;
    }

 @keyframes rotate {
        0% {
            transform: rotate(-20deg);
        }
        50% {
            transform: rotate(20deg);
        }
        100% {
            transform: rotate(-20deg);
        }
    }

@keyframes fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }