body /*estilo BODY*/
{
  font-family: Arial;
  background-image: url("../Fotos/fondoAsig.jpg");
  background-size: fill;
  max-width: 100%;
}

header /*estilo HEADER*/
{
  background-image: url("../Fotos/headerGeneral.webp");
  background-size: cover;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

h1 /*estilo H1*/
{
  display: block;
  padding: 13px;
  text-decoration: none;
  background-color: #A96762;
  width: 97.3%;
} 

h3/*estilo H3*/
{
    text-align: left;
    margin: 30px;
}

.description
{
display: block;
transform: translateX(200px);
width: 590px;
background-color: #3f576d;
color: #ffffff;
margin-top: 50px;
padding: 12px;
}

ul /*etilo de la tabla con los links a otras paginas*/ 
{
  list-style-type: none;
  padding: 50px;
}
li a /*estilo de los links a otras paginas*/
{
  padding: 8px;
  padding-right: 10px;
  text-decoration: none;
  background-color: gray; 
  color: white;
}
li :hover
{
  opacity: 0.6;
}

ol{ /*estilo de la lista de las asignaturas*/
  list-style-type: none;
  width: 200px;
  margin-right: 20%;
  transform: translateX(5%);
  margin-top: 5%;
  padding: 25px;
}

.temas
{
padding: 100px;

}

article /*estilo donde va la info de lo que contiene la pagina*/
{
  float: left;
  height: auto;
  width: auto; 
  text-align: center;
}

nav /*estilo del espacio conde estan los links a las diferentes paginas*/
{
  float: left;
  width: fit-content;
  height: auto;
  background:#2F5C8F;
  color: white;
}

@media (max-width: 100%) /*manera de poner el cuadrado de los links a otras cosas de la pagina y donde esta la info en la misma linea*/
{
  nav, article 
  {
    width: 100%;
    height: auto;
  }
}

footer /*estilo de la parte de abajo 'Other Stuff'*/
{
  background-color: #91847e;
  padding: 5px;
  text-align: left;
  color: white;
  height: auto;
}

button
{
  display: block;
  padding: 8px;
  text-decoration: none; /*que los links no esten underlined*/
  background-color:gray ;
  color: white;
}

.Subj{
  display: block;
  padding: 8px;
  text-decoration: none;
  background-color:rgb(185, 181, 181) ;
  color: black;
  transform: translateX(30px);
}

section::after /*rellena el espacio q falta entre el article y el nav*/
{
  content: "";
  display: table;
  clear: both;
}


.listaAsign::before { /*diseño de la lista de asignaturas con su diseño de bullet point*/
  content: "\25b6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.listaAsign { /*al pasar el mouse por las asignaturas que el diseño de la flecha cambie*/
  cursor: pointer;
}
  
.temas { /*q esten los temas escondidos*/
  display: none;
}
  
.active { /*que cuando se de a asignatura, que los temas aparezcan*/
  display: block;
}

#temas{
  display:none;
}

#tema1doc{
  display:none;
  transform: translateX(20px);
  margin-top: 20px;
}
#tema2doc{
  display:none;
  transform: translateX(20px);
  margin-top: 20px;
}
#tema3doc{
  display:none;
  transform: translateX(20px);
  margin-top: 20px;
}
#tema4doc{
  display:none;
  transform: translateX(20px);
  margin-top: 20px;
}
#tema5doc{
  display:none;
  transform: translateX(20px);
  margin-top: 20px;
}
#tema6doc{
  display:none;
  transform: translateX(20px);
  margin-top: 20px;
}
#tema7doc{
  display:none;
  transform: translateX(20px);
  margin-top: 20px;
}
#tema81doc{
  display:none;
  transform: translateX(20px);
  margin-top: 20px;
}
#tema82doc{
  display:none;
  transform: translateX(20px);
  margin-top: 20px;
}
#tema9doc{
  display:none;
  transform: translateX(20px);
  margin-top: 20px;
}
#tema10doc{
  display:none;
  transform: translateX(20px);
  margin-top: 20px;
}