/*  esto es un comentario   */


    h2 {
        width: fit-content;
        color:#AD0052;
        background-color: #00AD02;
        text-align: center;
        font-size: 24px;
        height: 20px;
        padding: 20px 15px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 15px;
        
    }
    h1{
        width: fit-content;
        color:#19FA1D;
        text-align: center;
        background-color: #61002E;
        font-size: 32px;
        height: 25px;
        padding: 25px 15px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 15px;
    }

    .titulo{
        background-color: #61002E;
        color: #00AD02;
        text-align: center;
        border: 4px dotted ;
        width: 80%;
        border-radius: 20px;
        margin-left: auto;
        margin-right: auto;
    } 


    p{
        background-color: #006102;
        color: white;
        width: 80%;
        border-radius: 10px;
        padding-left: 10px;

    }

    .texto{
        background-color: #006102;
        color: black;
        width: 100%;
        color: purple;

        padding-left: 20px;
    }

    .sub-menu{
        background-color: aqua;
        color: black;   
        border: 2px solid aquamarine;
        padding: 4px;
    }

    .sub-menu:hover{
        background-color: rgb(14, 156, 156);
        color: rgb(26, 34, 36);   
        border: 2px solid rgb(78, 153, 128);
        padding: 4px;
    }

    

    .menu{
        display: grid;
        grid-template-columns: auto auto auto auto;
        font-size: medium;
        color: black;
        text-align: center;
        background-color: lightblue1;
        border: 2px solid aquamarine;
        
    }


/*sacado de w3*/
    .topnav {
        overflow: hidden;
        background-color: #333;
      }
      
      /* Style the topnav links */
    .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
      
      /* Change color on hover */
    .topnav a:hover {
        background-color: #ddd;
        color: black;
      }
/*sacado de w3 hasta aqui*/



    .button{
        float:left;
        /*color: rgb(130, 14, 14);*/
        color: white;
        background-color: white;
        padding: 5px 10px;
        border-radius: 3px;
        border-width: 2px;

        -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    }

    .button:hover{
        background-color: #00AD02;

    }

    .sub-button{
        float:left;
        color: white;
        background-color: white;
        padding: 5px 10px;
        border-radius: 3px;
        border-width: 2px;

        -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
        
    }
    .sub-button:hover{
        
        color: #61002E;
        background-color: bisque;
        
    }
    
/*          ayudas          */


    .centering{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }



    .cuadrado{
        
        transition: transform 1s ,fill 2s;
        fill:red;
        stroke: blue;
        stroke-width: 1px;
    }
        
        .cuadrado:active{
            transform-origin: center;
            transform: scale(2,2)  ;
            fill: purple;   
        }