html {
  scroll-behavior: smooth;
  box-sizing: border-box; 
  background-color: white;
  width: 100%;
}

body, .index {
  display:flex;
  flex-direction: column;
  justify-content: center;
}

header {
    color: black;
    padding: 1%;
    font-family: 'Amaranth', sans-serif;
    background-image: url("https://expresionoralyescritaii.neocities.org/images/fondolibros.jpg"); /* The image used */
    border-radius: 2%;
    background-color: #cccccc; /* Used if the image is unavailable */
    max-height: 100%;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

h1 {
  text-align: center;
}

h2{
  color: black; font-family: 'Amaranth', sans-serif;
}

h3 {
    color: black;
    font-family: 'Amaranth', sans-serif;
    border: 1px solid #d2d2d2;
}

a {
    color: #d43d3d;
    font-family: 'Roboto', sans-serif;
    letter-spacing: .2em;
}

article {
  color: black;
  font-family: 'Roboto', sans-serif;
}

blockquote {
  color: black;
  font-family: 'Roboto', sans-serif;
}


/* (A) LIST TO MENU */
.unidades, .section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.unidades {
  background: #fbfbfb;
  border: 1px solid black;
}
.unidades li {
  border-bottom: 2px solid #d2d2d2;
  padding: 15px 10px;
  list-style: none;
}
.unidades li:last-child {
  border: 0;
}

/* (B) SUB-SECTIONS */
/* (B1) TOGGLE SHOW/HIDE */
.section ul { display: none; }
.section input:checked ~ ul { display: block; }

/* (B2) HIDE CHECKBOX */
.section input[type=checkbox] { display: none; }

/* (B3) ADD EXPAND/COLLAPSE ICON  */
.section { 
  position: relative; 
  padding-left: 35px !important;
}
.section label:after {
  content: "\0002B";
  position: absolute;
  top: 0; left: 0;
  padding: 10px;
  text-align: center;
  font-size: 30px;
  color: #f00;
  transition: all 0.5s;
}
.section input:checked ~ label:after { 
  color: #23c37a;
  transform: rotate(45deg);
}

/* (B4) SUB-SECTION ITEMS */
.section ul { margin-top: 10px; }
.section ul li { color: black; }