/*IMAGEN DE FONDO*/
body{/*ESTILO AL BODY*/
    background-image: url(./img/fondo.png);/*USO UN FONDO QUE TENGO GUARDADO EN LAS CARPETAS,URL(PARA ENLAZAR)*/
    background-size: cover;/*PERMITE COLOCAR BIEN EL FONDO,DISTORSIONA(OCUPA)EL TAMAÑO QUE LE PONGA*/
    background-repeat: no-repeat;/*PARA QUE LA IMAGEN DE FONDO NO SE REPITA*/
    background-position:-20px -120px;/*MUEBO LA POSICION DE LOS EJES DEL FONDO= X  Y   -=ES A LA IZ  +=ES A LA DERECHA*/
}
body:hover{
    animation: fondo 10s linear;
    -webkit-animation: fondo 10s linear;
    animation-iteration-count: infinite;
   
    background-image: url(./img/fondo.png);
  
    
}

@keyframes fondo{
    0%{
        background-position:-20px -120px;
       
    }
    50%{
        background-position:0px 0px;
       
    }
   
    100%{
        background-position:-20px -120px;
       
    }
    50%{
        background-position:0px 0px;
       
    }
    0%{
        background-position:-20px -120px;
       
    }

}

#table{
    margin-top: 50px;
  
}
#container{
 
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 90%;
    height: auto;
    margin: 0 auto;
   
    
   

}

.pulsador{
    margin: 10px;
}

.botoncito{
   
    background-color:aqua;
}

.table{
    margin: 10px;
}


#botoncitos{
    display: flex;
    flex-direction:column;
 
}

.titulo{
    margin:20px;
}
.boton1{
    margin:20px;
}
.boton2{
    margin:20px;
}


.boton1
.notificacion{
    text-align: center;
    display: block;
    background-color:#cccccc8a;
    box-sizing: border-box;
    padding: 5px;
    color:white;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.formulario{
 display: flex;
 flex-direction: column;
 max-width: 200px;
}

.formulario, label{
    margin-top: 5px;
}

input, button{
    margin-top: 2px;
    background-color: aqua;
}

button{
    box-sizing: border-box;
    padding: 3px;
    margin-top: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.parrafo{
    display:block;
    box-sizing: border-box;
    padding: 3px;
    background-color: rgb(18, 229, 18);
   
}



.seccion-two, .seccion_form{
    border-top: 2px solid black;
}

.seccion_form, .seccion-two{
    max-width: 500px;
}
.semanas{
    margin-top: 10px;
    background-color: aqua;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.typing-container {
  width: fit-content;
  margin: 50px auto;
  text-align: center;
}

.page__job {
  font-size: 2rem;
  font-weight: bold;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #0f172a;
  width: 0;
  display: inline-block;
  animation: typing 3s steps(30, end) forwards, blink 0.75s step-end 4;
}

/* Efecto de escribir */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* Efecto del cursor parpadeante */
@keyframes blink {
  0%, 100% { border-color: transparent }
  50% { border-color: #0f172a }
}


/*@media (max-width: 620px) {
    table {

      display: block;
      width: 100%;
      flex-wrap: wrap;
    }
  
    caption {
      font-size: 1.2em;
      font-weight: bold;
      margin-bottom: 10px;
      text-align: left;
    }
  
    thead {
      display: none; /* Oculta los encabezados 
    }
  
    tbody, tr {
      display: block;
      width: 100%;
    }
  
    tr {
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #ddd;
      padding: 10px;
    }
  
    td {
      display: flex;
      width: 50%; /* Hace que se vea en dos columnas 
      padding: 8px;
      box-sizing: border-box;
    }
  
    td::before {
      content: attr(data-label); /* Muestra el nombre del día 
      font-weight: bold;
      width: 50%;
    }
  }*/