style.css

/*
Botón oculto vualmente para desactivar las hojas de estilo
*/
#NoCSS {
    /* No se debe poner display:hide para que el lector de pantalla lo lea*/
    width: 0px;
    height: 0px;
    padding: 0px;
    position: absolute;
    font-size: 0px;
    background-color: #00000000;
    border-color: #00000000;
    color: #00000000;
}

/************************
Panel navegación superior
*************************/

 /* Navbar */
.navbar {
    padding: 0;
    max-width: 700px;
    margin: auto;
    background-color: #4e4e4e7e;
    background-image: url("background2.png");
    overflow: hidden;
}
#foroActive {
    color: #B882F9;
    text-shadow: 0.5px 0.5px 15px #6F05F0;
}
#about {float: right;}
/* Elementos de la navbar */
.navbar a {
    float: left;
    font-size: 16px;
    color: #00ccff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
/* Dropdown container */
.dropdownNav {
    float: left;
    overflow: hidden;
}
/* Dropdown button */
.dropdownNav .dropbtnNav {
    font-size: 16px;
    color: #00ccff;
    border: none;
    outline: none;
    padding: 14px 14px;
    background-color: inherit;
    font-family: inherit;
    margin: 0; /* Importante para dispositivos móbiles */
}
.dropdownNav .dropbtnNavWhenActive {
    font-size: 16px;
    color: #B882F9;
    text-shadow: 0.5px 0.5px 15px #6F05F0;
    border: none;
    outline: none;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}
/* BG color de los elem. de la navbar (hover) */
.navbar a:hover,.dropdownNav:hover .dropbtnNav,
.dropdownNav:hover .dropbtnNavWhenActive {
    background-color: #080808bd;
    box-shadow: 0 4px 16px #018791;
}
/* Dropdown content (oculto) */
.dropdownNav-content {
    display: none;
    position: absolute;
    background-image: url("background2.png");
    text-shadow: 0.5px 0.5px 10px #018791;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
/* Elementos del dropdown */
.dropdownNav-content a {
float: none;
color: #00ccff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Muestra el dropdow hover/click */
.dropdownNav:hover .dropdownNav-content {
    display: block;
}
.navbar .active {
    color: #B882F9;
    text-shadow: 0.5px 0.5px 15px #6F05F0;
    background-color: #08080881;
}


/******************
Cuerpo del documento
*******************/

body {
    font-family: 'Times New Roman', serif;
    text-align: center;
    color: #489aba;
    background-color: #0E0E0E; /*Se sobreescribirá con la imagen pero así no se mostrará en blanco al inicio*/
    background-image: url("background.png");
    background-repeat: repeat;
}
h1 {
    color: #00CDFF;
    text-shadow: 0.5px 0.5px 10px #018791;
    font-size: 40px
}
h3 {
    font-size: 18px;
    font-weight: bold;
}
p {font-size: 16px}
em {
    color: #00CDFF;
    font-weight: bold;
    font-style: normal;
    font-size: 18px;
    text-shadow: 0.5px 0.5px 10px #018791;
}
strong {
    color: #ff6b6b;
    font-weight: bold;
    font-style: normal;
    font-size: 18px;
    text-shadow: 0.5px 0.5px 10px #e20000;
}
a {
    color: #00ccff;
    font-size: 14px;
    text-decoration: none;
}
hr {
    border-color: #B882F9;
    box-shadow: 0px 0px 10px #6F05F0;
}
#pie {
    font-size: 12px;
}

/*******************
En texto: elegir qué
letras repasar
********************/

select {
    background-color: #04050a;
    border-color: #00CDFF;
    border-radius: 4px;
    font-size: 14px;
    color: #00CDFF;
    padding: 0.5em 1.2em;
    width: 270px;
}

/*********************
Letra braille dibujada
con puntos y O (texto)
**********************/

.letraBraille {
    font-family: "Cutive Mono", Courier, monospace;
    font-weight: bold;
    font-size: 25px;
    color: #00CDFF;
}
#letra {
    font-weight: bold;
    font-size: 70px;
    color: #00CDFF;
    text-shadow: 0.5px 0.5px 10px #018791;
}

/****************
Nota musical .svg
*****************/

#imagen {
    background-color: white;
    display: block;
    width: 250px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
}

/**********************
Input cajetines braille
**********************/

table {
    width: 300px;
    border-spacing: 3px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed ;
}
.acordes {
    width: 170px;
}

/**************
Regleta virtual
***************/
#regletaInput {
    width: 800px;
    border-collapse: collapse;
    font-size: 20px;
}
#regletaInput28 {
    width: 1335px;
}
textarea {
    background-color: #04050a;
    border-color: #00CDFF;
    border-radius: 4px;
    text-align: left;
    font-family: inherit;
    font-weight: bold;
    font-size: 24px;
    color: #00CDFF;
    padding: 0.5em 1.2em;
    width: 685px;
    max-width: 75vw;
}
#outputRegleta {
    width: 390px;
    max-width: 75vw;
}

/******
Botones
*******/

input, .dropbtn {
    background-color: #04050a;
    border-color: #00CDFF;
    color: #00CDFF;
    text-align: center;
    padding: 0.5em 1.2em;
    border-radius: 4px;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
}
input:hover,
select:hover,
.dropbtn:hover {
    box-shadow: 0 4px 16px #018791;
}

/****************
Botón de cascada:
Selecciona qué estudiar en apartado de MUSICOGRAFÍA
*****************

Posición del contenedor <div> */
.dropbtn {
    width: 300px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
/* Contenido del dropdown oculto por defecto */
.dropdown-content {
    display: none;
    width: 300px;
    box-shadow: 0 4px 16px;
    border-radius: 4px;
    z-index: 1;
    position: absolute;
}
/* Elementos del dropdown */
.dropdown-content a {
    background-color: #000000ea;
    color: #489aba;
    text-decoration: none;
    text-shadow: 0.5px 0.5px 10px #018791;
    padding: 10px 16px;
    border-radius: 4px;
    display: block;
}
/* Cambiar el color de las secciónes del dropdown (hover) */
.dropdown-content a:hover {
    color: #00CDFF;
    text-shadow: 0.5px 0.5px 10px #018791;
    font-size: 16px;
}
/* Mostrar dropdown menú (hover) */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Cambiar colo del dropdown button mientras se muestra su contenido
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}   */

/************************************************
Para que el texto por defecto del text input
tenga el formato de la página y no del navegador
************************************************/

::placeholder { /* Firefox, Chrome, Opera */
    color: rgb(72, 154, 186);
    text-align: center;
}
::-moz-placeholder {
    color: #489aba;
    text-align: center;
}
::-webkit-input-placeholder {
    color: #489aba;
    text-align: center;
}