body {color: #003863; background: url("imgs/papel.jpg")}


  /* Add a black background color to the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

h1, h2, h3, h4 {font-family: "Bebas Neue", sans-serif;}

h2.entry  {font-family: "Segoe UI",Arial,sans-serif;}

.w3-bar {font-family: "Bebas Neue", sans-serif;font-size: 1.5em}

.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the "active" element to highlight the current page */
.topnav a.active {
  background-color: #2196F3;
  color: white;
}

/* Style the search box inside the navigation bar */
.topnav input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
}

/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

.division-1 {background-image: url("imgs/banner-1.jpg"); 
  background-color: #fff;
  height: 250px;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.division-2 {background-image: url("imgs/banner-2.jpg"); 
  background-color: #fff;
  height: 150px;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.division-3 {background-image: url("imgs/banner-3.jpg"); 
  background-color: #fff;
  height: 150px;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.division-4 {background-image: url("imgs/banner-4.jpg"); 
  background-color: #fff;
  height: 150px;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}


.division-5 {background-image: url("imgs/banner-5.jpg"); 
  background-color: #fff;
  height: 250px;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}


.division-6 {background-image: url("imgs/banner-6.jpg"); 
  background-color: #fff;
  height: 250px;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

#tophelp {background-image: url("imgs/bghelp.jpg"); 
  background-color: #fff;
  height: 500px;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

#topnotas {background-image: url("imgs/bgtopnotas.jpg"); 
  background-color: #fff;
  height: 500px;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}


#topgrammar {background-image: url("imgs/back9.jpg"); 
  background-color: #fff;
  height: 500px;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}


#topchillkatun {background-image: url("imgs/back3.jpg"); 
  background-color: #fff;
  height: 500px;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}


#about {background-image: url("imgs/bgabout.jpg"); 
  background-color: #fff;
  height: 500px;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

#inchin {background-image: url("imgs/bginchin.jpg"); 
  background-color: #fff;
  height: 625px;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.searchbar {
  background-image: url("imgs/fondo_search.png");
  background-color: #fff;
  height: 300px;
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}


 /* Dashed border */
hr.dashed {
  border-top: 3px dashed #bbb;
}

/* Dotted border */
hr.dotted {
  border-top: 3px dotted #bbb;
}

/* Solid border */
hr.solid {
  border-top: 3px solid #bbb;
}

/* Rounded border */
hr.rounded {
  border-top: 8px solid;
  border-radius: 5px;
} 


.w3-button a {text-decoration: none;}


.w3-text-chod,.w3-text-hover-chod:hover{color:#cc3d73!important}
.w3-chod,.w3-hover-chod:hover{color:#fff!important;background-color:#d8b362!important}

.w3-text-kelu,.w3-text-hover-kelu:hover{color:#cc3d73!important}
.w3-kelu,.w3-hover-kelu:hover{color:#fff!important;background-color:#cc3d73!important}

.w3-text-kallfu,.w3-text-hover-kallfu:hover{color:#003863!important}
.w3-kallfu,.w3-hover-kallfu:hover{color:#fff!important;background-color:#003863!important}

.w3-kollu,.w3-hover-kollu:hover{color:#fff!important;background-color:#F99264!important}

.w3-text-payne,.w3-text-hover-payne:hover{color:#00a8a8!important}
.w3-payne,.w3-hover-payne:hover{color:#fff!important;background-color:#00a8a8!important}

/* Styles for lexical categories */  
.style-verbo, .style-hover-verbo:hover {color:#fff!important;background-color:#cc3d73!important}
.style-sustantivo, .style-hover-sustantivo:hover {color:#fff!important;background-color:#003863!important}
.style-adjetivo, .style-hover-adjetivo:hover {color:#fff!important;background-color:#00a8a8!important}
.style-adverbio, .style-hover-adverbio:hover {color:#fff!important;background-color:#7a49a5!important}
.style-numeral, .style-hover-numeral:hover {color:#fff!important;background-color:#003863!important}
.style-raíz, .style-hover-raíz:hover {color:#fff!important;background-color:#ff5722!important}


.style-adposicion, .style-hover-adposicion:hover {color:#fff!important;background-color:#000!important}
.style-interjección, .style-hover-interjección:hover {color:#fff!important;background-color:#607d8b!important}
.style-demostrativo, .style-hover-demostrativo:hover {color:#fff!important;background-color:#000!important}
.style-pronombre, .style-hover-pronombre:hover {color:#fff!important;background-color:#795548!important}
.style-posesivo, .style-hover-posesivo:hover {color:#fff!important;background-color:#795548!important}
.style-conjunción, .style-hover-conjunción:hover {color:#fff!important;background-color:#000!important}
.style-auxiliar, .style-hover-auxiliar:hover {color:#fff!important;background-color:#000!important}
.style-expresión, .style-hover-expresión:hover {color:#fff!important;background-color:#000!important}
.style-partícula, .style-hover-partícula:hover {color:#fff!important;background-color:#000!important}
.style-adposición, .style-hover-adposición:hover {color:#fff!important;background-color:#e91e63!important}
.style-sufijo, .style-hover-sufijo:hover {color:#fff!important;background-color:#2196f3!important}

#rcorners {
  border-radius: 15px 15px;
  padding:1px 4px 6px 10px;
} 


.bigbutton {padding:0 1.5em}

/* Nice separator according to ChatGPT */

        .separator {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 500px;
            margin: 20px auto;
            position: relative;
        }

        .separator::before,
        .separator::after {
            content: "";
            flex: 1;
            height: 2px;
            background: linear-gradient(to right, transparent, #003863);
        }

        .separator::after {
            background: linear-gradient(to left, transparent, #003863);
        }

        .separator span {
            padding: 0 15px;
            font-size: 18px;
            font-weight: bold;
            color: #003863;
        }

    .entry-container {
        display: flex;
        align-items: center;
        gap: 20px; /* Space between elements */
    }

    .entry-container h2 {
        margin: 0; /* Remove default margin */
    }

    .entry-container button {
        cursor: pointer;
        font-size: 14px;
    }


.example {margin-left: 2em;}
.gram {padding-left:.7em; padding-right:.7em}


        .note-card {
            background-color: #f9f9f9;
            border: 1px solid #eee;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin: 20px;
        }
        .note-card-header {
            font-size: 1.2em;
            font-weight: bold;
            color: #333;
        }
        .note-card-content {
            font-size: 1em;
            color: #555;
            margin-top: 10px;
        }