@font-face {
  font-family: 'Roboto';
  src: url('fonts/static/Roboto-Regular.woff2') format('woff2'),
       url('fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*---BODY STYLE---*/
body{
font-family:'Roboto';
height: 100vh;
margin: auto;
background: linear-gradient(-60deg,#000000, #000000, #160044, #000000,#160044);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
padding-top: env(safe-area-inset-top);
}

/*---@KEYFRAMES STYLE---*/
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

/*---H1 STYLE---*/
h1{
color: white;
display: flex;
justify-content: center;
margin-top: 50px;
margin-bottom:10px;
}

/*---H2 STYLE---*/
h2{
color: white;
display: flex;
justify-content: center;
}

/*---CONTENT STYLE---*/
.content{
margin: auto;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 10px;
padding-bottom:25px;
}

/*---CONTAINER LINK STYLE---*/
.container-link{
background-image: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
border: 0;
border-radius: 8px;
box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
box-sizing: border-box;
color: #ffffff;
display: flex;
font-size: 18px;
justify-content: center;
line-height: 1em;
width: 600px;
max-width: 95%;
min-width: 200px; 
padding: 3px;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
cursor: pointer;
transition: all 0.3s;
margin: 10PX;
}

/*---CONTAINER LINK ACTIVE AND HOVER STYLE---*/
.container-link:active,
.container-link:hover {
outline: 0;
}

/*---CONTAINER LINK AND CONTENT CONTAINER STYLE---*/
.container-link .content-container {
background-color: rgb(5, 6, 45);
padding: 16px 24px;
border-radius: 6px;
width: 100%;
height: auto; /* Ajusta la altura para el ajuste del texto */
min-height: 30px; /* Altura mínima */
transition: 300ms;
}

/*---CONTAINER LINK HOVER AND CONTENT CONTAINER STYLE---*/
.container-link:hover .content-container {
background: none;
}

/*---CONTAINER LINK ACTIVE STYLE---*/
.container-link:active {
transform: scale(0.9);
}

/*---CONTENT CONTAINER WITH POSITION RELATIVE STYLE---*/
.content-container{
display: flex;
justify-content: center; /* Centra el texto */
width: 90%; /* Ajusta el ancho */
width: 550px;
font-size: 20px;
align-items: center;
font-weight: 800;
position: relative;
}

/*---CONTENT CONTAINER WITH IMAGE ICON CON POSITION ABSOLUTE  STYLE---*/
.content-container .image-icon{
height: 40px;
position: absolute;
left: 10px;
pointer-events: none;
border: 2px solid white;
background-color: white;
border-radius: 20px;
}

/*---CONTENT CONTAINER HOVER WITH IMAGE ICON STYLE---*/
.content-container:hover .image-icon{
border: 1px solid transparent;
background-color: transparent;
border-radius: 20px;

}

@media (max-width: 767px) {
  h1 {
      font-size: 24px; /* Encabezado más pequeño */
      margin-top: 30px;
  }

  h2 {
      font-size: 18px; /* Subencabezado más pequeño */
  }

  .container-link {
      font-size: 16px; /* Texto más pequeño */
      width: auto; /* Permite el ancho automático */
      max-width: 90%; /* Ajusta para el ancho de la pantalla */
      margin: 8px; /* Reduce el espaciado */
  }

  .content-container {
      font-size: 18px; /* Texto más pequeño */
      width: 100%; /* Ancho completo */
      justify-content: center; /* Centra el texto */
      text-align: center; /* Centra el texto */
  }

  .content-container .image-icon {
      height: 30px; /* Icono más pequeño */
      left: 10px; /* Ajusta la posición del icono */
  }
}