@font-face {
    font-family: 'tlouum';
    src: url('../font/tlo1.ttf');
}
@font-face {
    font-family: 'tloudois';
    src: url('../font/tlo2.ttf');
}
@keyframes changeBackground {
  0% {
      background-image: url('https://i.postimg.cc/3ycGK6VG/background.png');
  }
  20% {
      background-image: url('https://i.postimg.cc/1VxNFF95/background2.png');
  }
  40% {
      background-image: url('https://i.postimg.cc/dZ8Zj01R/background3.png');
  }
  60% {
      background-image: url('https://i.postimg.cc/JDHktxC2/background4.png');
  }
  80% {
      background-image: url('https://i.postimg.cc/nM7mJ3ks/background5.png');
  }
  100% {
      background-image: url('https://i.postimg.cc/3ycGK6VG/background.png');
  }
}
body {
  text-align: center;
  background-image: url('https://i.imgur.com/X294BQ7.png');
  width: 100%;
  height: 100vh; /* 100% of the viewport height */
  background-size: cover; /* makes the image adjust to the background area without distorting the image */
  background-position: center;
  background-color: black;
}
body::-webkit-scrollbar {
    display: none;
}
.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
video {
    width: 100%;
    height: auto;
    object-fit: cover;
}
h1{
    font-family: 'tlouum', 'cursive';
    color: white;
    font-size: 72px;
    text-shadow: 2px 2px 4px #333;

}
h2{
    font-family: 'tloudois', 'cursive';
    color: white;
    font-size: 18px;
    text-shadow: 2px 2px 4px #333;

}
input[type="text"] {
    background-color: #333333; /* dark background color */
    color: #fff; /* white text color */
    font-family: 'tloudois', 'cursive'; /* font style */
    font-size: 20px; /* font size */
    padding: 10px; /* input padding */
    border: none; /* remove default border */
    border-radius: 5px; /* add rounded corners */
    box-shadow: 2px 2px 4px #000; /* add a subtle shadow */
    text-align: center;
  }
  
  input[type="text"]:focus {
    outline: none; /* remove default focus outline */
    box-shadow: 2px 2px 4px #333; /* change shadow color on focus */
  }
  
  input[type="date"] {
    content: "data de nascimento";
    background-color: #333333; /* dark background color */
    font-family: 'tloudois', 'cursive'; /* font style */
    color: #fff; /* white text color */
    font-family: 'Courier New', Courier, monospace; /* font style */
    font-size: 20px; /* font size */
    padding: 10px; /* input padding */
    border: none; /* remove default border */
    border-radius: 5px; /* add rounded corners */
    box-shadow: 2px 2px 4px #000; /* add a subtle shadow */
    appearance: none; /* remove default appearance of the date picker */
  }
  
  input[type="date"]::-webkit-calendar-picker-indicator {
    background-color: #fff; /* change color of the calendar icon */
  }
  
  input[type="date"]:focus {
    outline: none; /* remove default focus outline */
    box-shadow: 2px 2px 4px #fff; /* change shadow color on focus */
  }
  input[type="date"]::before {
    content: "data de nascimento"; /* add text */
    position: absolute; /* position the text */
    top: 10px; /* position from the top */
    left: 15px; /* position from the left */
    color: #fff; /* text color */
    font-family: 'tloudois', 'cursive'; /* font style */
    font-size: 20px; /* font size */
  }
  button {
    background-color: #333333; /* dark background color */
    color: #fff; /* white text color */
    font-family: 'tloudois', 'cursive'; /* font style */
    font-size: 20px; /* font size */
    padding: 10px 20px; /* button padding */
    border: none; /* remove default border */
    border-radius: 5px; /* add rounded corners */
    box-shadow: 2px 2px 4px #000; /* add a subtle shadow */
    cursor: pointer; /* change cursor on hover */
  }
  
  button:hover {
    background-color: #555; /* change background color on hover */
    box-shadow: 2px 2px 4px #fff; /* change shadow color on hover */
  }
  .container {
    position: relative; /* set container as a relative position */
  }
  
  .container img {
    width: 100%; /* set image width to 100% */
  }
  
  .container .caption {
    /* set caption as an absolute position */
    bottom: 0; /* position caption at the bottom */
    left: 0; /* position caption at the left */
    right: 0; /* position caption at the right */
    background-color: rgba(0, 0, 0, 0.5); /* set background color to black */
    color: #fff; /* set text color to white */
    /*font-family: 'tlouum', 'cursive'; /* font style */
    font-size: 15px; /* font size */
    padding: 10px; /* caption padding */
    opacity: 0; /* set caption opacity to 0 */
    transition: opacity 0.5s ease-in-out; /* set transition for opacity */
  }
  
  .container:hover .caption {
    opacity: 1; /* set caption opacity to 1 when container is hovered over*/
  }
  img{
    max-width: 250px; /* set maximum width to 232px */
    max-height: 250px; /* set maximum height to 232px */
    border: 1px solid lightgray;
  }
  #error-popup {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
  }
  
  .popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 2px 2px 4px #000;
  }
  
  #close-button {
    float: right;
    background-color: #333333;
    color: #fff;
    font-family: 'tloudois', 'cursive';
    font-size: 18px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    box-shadow: 2px 2px 4px #000;
    cursor: pointer;
  }