@font-face {
    font-family: "Isafont";
    src: url("HindMadurai-Regular.ttf");
    }

    @font-face {
    font-family: "Isafont2";
    src: url("HindMadurai-Regular.ttf");
    }

    @font-face {
    font-family: "Isafont3";
    src: url("HindMadurai-Regular.ttf");
    }

    p {
        font-family: "Isafont";
        font-size: 12pt;
        
    } 

    h3{
        font-family: "Isafont";
        font-size: 200%;
    }  


    h1{
        font-family: "Isafont2";
        font-size: 400%;
        color: #7D9593;
    }  
    h5{
        font-family: "Isafont";
        font-size: 20pt;
    }  
    a{
        font-family: "Isafont2";
        font-size: 100%;
        color:black;
    } 


   

    #parrafoisa{
    text-align: justify;
    margin: 20px;
    }

    .button {
    background-color: #7D9593;
    color: #fefefe;
     }    
     
    .button:hover {
        background-color: #E2EDEC;
        color:#2e96f7;
    }

    #fontmenu {
        font-size: 30pt;
        /*color:#7D9593;*/
    }

    #menucell{
        background-color: rgb(47, 65, 86);
        color: #fefefe;
    }  

    #canvas{
       position:sticky;
        z-index: 9999;
    }

    a:focus, a:hover {
    color: #3874f7;
    } 

    .title-bar {
    padding: .5rem;
        background:rgb(47, 65, 86);
    color: #fefefe;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.dropdown.menu .is-active>a {
    background: 0 0;
    color: #3874f7;
}


.dropdown.menu>li.is-dropdown-submenu-parent>a::after {

    border-color: #D4B09C transparent transparent;

}

.button.primary {
    background-color: #172144;
    color: #fefefe;
}

.top-bar, .top-bar ul {
    background-color:rgb(47, 65, 86);
    color: #fefefe;
}

element.style {
    background-color:rgb(47, 65, 86);
    color: #fefefe;
}

#idmenu{
    background-color: rgb(47, 65, 86);
    color: #fefefe;
}

#idmenu:focus, #idmenu:hover {
    color: #B9BABA;
    } 

     * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: sans-serif;
    }




/******************************/
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    /* Barra azul a lo ancho */
    .menu-bar {
      background-color: rgb(47, 65, 86);
      width: 100%;
    }

    /* Contenedor centrado */
    .menu-wrapper {
      max-width: 1000px;
      margin: 0 auto;
      padding: 10px 20px;
      color: white;
    }

    .menu-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .menu-toggle {
      display: none;
      font-size: 28px;
      cursor: pointer;
      color: white;
    }

    .nav-links {
      display: flex;
      justify-content: center;
      gap: 40px;
      flex: 1;
    }

    .nav-links a {
      text-decoration: none;
      color: white;
      font-weight: 500;
      font-size: 16px;
      transition: opacity 0.3s;
    }

    .nav-links a:hover {
      opacity: 0.8;
    }

    .social-icons {
      display: flex;
      gap: 20px;
    }

    .social-icons a {
      color: white;
      font-size: 20px;
      transition: transform 0.3s;
    }

    .social-icons a:hover {
      transform: scale(1.2);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .menu-container {
        flex-direction: column;
        align-items: stretch;
      }

      .menu-toggle {
        display: block;
        align-self: flex-end;
      }

      .nav-links,
      .social-icons {
        display: none;
        flex-direction: column;
        text-align: center;
        margin-top: 10px;
      }

      .nav-links.active,
      .social-icons.active {
        display: flex;
      }

      .nav-links a,
      .social-icons a {
        padding: 10px 0;
      }

      .social-icons {
        border-top: 1px solid rgba(255,255,255,0.2);
        padding-top: 10px;
      }
    }
 
.callout {
    position: relative;
    margin: 0 0 1rem 0;
    padding: .5rem;
    border: 1px solid rgba(10, 10, 10, .25);
    border-radius: 0;
    background-color: #fff;
    color: #0a0a0a;
}