body{
    margin: 0;
    background-color: #6fd5a0;
}
h1{
    margin: 0;
    color: #f5f5dc;
    font-family: 'Kanit', sans-serif;
}
h2{
    margin: 0;
    color: blueviolet;
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: bold;
}
h3{
    margin: 0;
    color: purple;
    font-family: 'Kanit', sans-serif;
    background-color: grey;
    font-size: 20px;
}
.contenido1{
    background-color: #6fd5a0;
    padding: 3%;
}
.contenido1 p{
    font-family: monospace;
    font-size: 20px;
    text-align: center;
    margin: 35px 0px;
}
.contenido1 h2{
    font-family: monospace;
    text-align: center;
    color: #191970;
}
.contenido2{
    display: none;
    background-color: #ffa07a;
    padding: 3%;
    text-align: center;
}
.contenido2 h2{ 
    
    margin: 0;
    color: #f5f5dc;
    font-family: monospace;
    font-size: 30px;
}
.contenido2 h3{
    font-family: monospace;
    font-size: 40px;
}
.contenido2 h4{
    color: #6495ed;
    font-family: 'Kanit', sans-serif;
    font-size: 30px;
    margin: 0;
}
.contenido2 p{
    font-family: 'Kanit', sans-serif;
    font-size: 25px;
    margin: 0;
}
.contenido3{
    background-color: green;
    padding: 4%;
}
.contenido3 p{
    font-family: monospace;
    font-size: 20px;
    text-align: center;
    margin: 35px 0px;
}
.contenido2 h3{
    font-family: fantasy;
    font-size: 30px;
    color: red;
}
.contenido2 h4{
    color: blueviolet;
    font-family: 'Kanit', sans-serif;
    font-size: 40px;
    margin: 5px;
}
.ColorVerde {
    color:blueviolet;
    font-size: 50px;
}
/* estilos.css */

form {
  display: flex;
  flex-direction: column;
  width: 250px;
  margin: 20px auto; /* Centra horizontalmente */
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type="number"] {
    display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
input:valid {
    background-color: greenyellow;
}
input:invalid {
     background-color: #E86C56;
}
input[type="submit"] {
  background-color: grey;
  color: blanchedalmond;
}

button {
  padding: 10px;
  font-size: 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

        .btn-color {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }

        .bg-azul {
            background-color: #007bff;
            color: white;
        }

        .bg-verde {
            background-color: #28a745;
            color: white;
        }

        .bg-rosa {
            background-color: #e83e8c;
            color: white;
        }

        input[type="color"] {
            padding: 5px;
            cursor: pointer;
        }
   
#caja1_sect1 {
  position: fixed;
  top: 100px; /* Ajusta según tu necesidad */
  right: 0;
  width: 300px;
  background-color: #f0f0f0;
  padding: 20px;
  border-left: 2px solid #ccc;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}
ul {
      list-style: disc;
      padding-left: 20px;
    }

    li {
      margin-bottom: 5px;
    }
     /* 📦 Caja izquierda para la lista de tareas */
    /* 📦 Caja de tareas (derecha) */
/* 📦 Caja de tareas (derecha) */
#caja-tareas {
  width: 300px;
  padding: 20px;
  border-left: 1px solid #ccc;
 
  box-sizing: border-box;
  background-color: grey;
}
 .contenedor {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 20px;
      box-sizing: border-box;
    }

    .bloque {
      width: 30%;
      text-align: center;
    }

    .bloque h2 {
      margin: 0 0 10px 0;
      color: #f5f5dc;
      font-family: monospace;
      font-size: 20px;
    }

    .contenido7 {
      height: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      font-size: 1.2em;
    }

    .izquierda .contenido7 {
      background-color: #3498db;
    }

    .centro .contenido7 {
      background-color: #2ecc71;
    }

    .derecha .contenido7 {
      background-color: #e74c3c;
    }
#caja2_sect3{
     position: fixed;
  top: 100px; /* Ajusta según tu necesidad */
  right: 0;
  width: 300px;
  background-color: #f0f0f0;
  padding: 20px;
  border-left: 2px solid #ccc;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}
    .caja5 {
      width: 200px;
      height: 200px;
      background-color: lightgray;
      margin: 10px;
      text-align: center;
      line-height: 100px;
      border: 1px solid #000;
      display: inline-block;
    }





    /* Selector de etiqueta */
    p {
      color: blue;
      font-size: 16px;
    }

    /* Selector de clase */
    .box8 {
      background-color: darkgreen;
      font-weight: bold;
      border:2px solid;
      padding: 1rem;
    }

    /* Selector de ID */
    #contenido8 {
      color: darkblue;
      font-size: 15px;
      text-decoration: underline;
       font-family: 'Kanit', sans-serif;
      font-weight: bold;
      top: 100px; /* Ajusta según tu necesidad */
  width: 200px;
  height: 200px;
  padding: 20px;
  border-left: 2px solid #ccc;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  margin: .5rem 0;
    }
 .resaltado {
    background: hotpink;
    border: 5px solid black;
}

 .mini{
    width: 100px;
 }
 .caja3_sect3 {
    max-width: 600px;
    margin-left: auto;
    margin-right: 0;
    padding: 20px;
    background-color: #ffffff;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}


.pregunta {
    margin: 15px 0;
    padding: 10px;
    background-color: #f8f9fa;
    /*border-left: 5px solid #007BFF;*/
    border-radius: 5px;
}

.abrir {
    background-color: #007BFF;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
}


.respuesta {
    margin-top: 10px;
    padding: 10px;
    background-color: #e9ecef;
    /*border-left: 3px solid #6c757d;*/
    border-radius: 4px;
    font-style: italic;
}

 /*responsive*/
 /*@media all and (min-width: 600px )and(max-width: 1200px )*/