/* Custom styling for the black background with gradient */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  body {
    background: linear-gradient(to bottom right, #333333, #000000);
    color: white;
    display: flex;
    flex-direction: column;
    margin:0;
    padding: 0;
  }

  .video-container{
    width: 100vw;
    height: 100vh;
  }
      
  video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    opacity: 30%;
    object-fit: cover;
  }
  /* Placeholder styling for the logo */
  #botones {
    margin: 0;
    padding: 0;
  }
  .logo {
    position: fixed;
    top: 0;
    text-align: left;
    margin-top: 3%;
    /* Add any additional styles for your logo here */
    margin-left:3%;

  }

  .logo img {
    text-align: left;
    
  }

 #btnContainer{
    margin: 20px auto 0 auto;
    width: 80%;
    text-align: center;
  }

  #texto1 p {
    margin: 30px 0 0 0;
    padding: 0;
    text-align: center;
  }

  .button {
    
    position: relative;
    top:300px;
    display: block;
    text-align: center;
    font-weight: bold;
    border: #fcbd02 1px solid;
    border-radius: 7px;
    padding: 15px;
    text-decoration: none;
    color: black;
    margin: 10px;
    background-color: #fcbd02;
  

  }
  .button:hover {
    background-color: #c29201;
    color: black;
    text-decoration: none;
  }


  p { color: antiquewhite;
    font-size: 1em;}

  /* Footer styling */
  #foot {
    margin-top: auto;
    text-align: center;
    padding: 20px;
    
  }

  i {
    text-align: center;
    margin-right:5px;
    width: 45px;
    color: #000000;
  }

  i:hover {
    color:#fcbd02;
  }

  .fa-envelope {
    margin-left: -10px;
  }
  
  .fa-circle-info{
    margin-left: -12px;
  }

  /*@media (min-aspect-ratio: 16/9) {
    .video-container iframe {
       height = 100 * (9 / 16) = 56.25 
      height: 56.25vw;
      object-fit: cover;
    }
  }

  @media (min-aspect-ratio: 16/9) {
    .video-container video {
       height: 56.25;
       object-fit: cover;
    }
  }
      
  @media (max-aspect-ratio: 16/9) {
    .video-container video {
       width = 100 / (9 / 16) = 177.777777 
      width: 177.78vh;
      object-fit: cover;
    }
  }*/

@media (max-width: 500px), screen and (orientation: portrait) {
  video {
    overflow: hidden;
  }
}