@font-face {
  font-family: 'MiFuente';  
  src: url('pc-9800.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MiFuente', Arial, sans-serif;
  font-size: 0.875rem;
  color: #757575;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;     
  background: #fff;   
  cursor: url(https://cur.cursors-4u.net/others/oth-6/oth589.cur), auto;

}

.section {
   
   display: none;
   padding: 5px;
   align-items: center;
}


#initial-text {
  display: block;
  overflow: visible;
}

.credits {
  color: #C4C4C4; 
}

::selection {
  color: #FFDBE4;          
}

button::selection {
  color: #fff1f4;
}

p { 
  text-align: justify;
  text-justify: inter-word;
}

b {
  color: #FFCCD8;
  
}

 u {

  text-decoration-color: #FFE6EC;
}

mark {
  background-color: #FFE6EC;
  color: #ffffff;       
  padding: 0 4px;        
  border-radius: 3px;    
  font-family: 'MiFuente';
}

.outer-box2 {
  position: relative;
  display: flex;
  background: rgba(255,255,255,100);
  width: 380px;
  padding: 55px 1px;
  justify-content: center; 
  align-items: center; 
}


.outer-box {
  width: 350px; 
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;    
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px; 
  box-shadow: 0 1px 10px rgba(0,0,0,0.1);
}


.box {
  display: flex;            
  width: 350px;  
  height: 140px;
  padding: 5px;     
  background: #fff1f4;      
  border: 1px solid #eee;
  border-radius: 2px;
  overflow: hidden; 
}

/* Panel de botones */
.sidebar {
  width: 35%;
  background: #fff1f4;
  flex-shrink: 0; 
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  font-family: 'MiFuente'; 
  src: url('8-bit-fortress.ttf') format('truetype');
  
}




.content1 {
  width: 90%;
  padding: 5px;
  overflow-y: scroll;
  background: #fff1f4;
  align-items: center;
  justify-content: center;
  
}


.content::-webkit-scrollbar {
  width: 10px;
}

.content::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 5px;
}

.content::-webkit-scrollbar-thumb {
  background: #FFE6EC;
  border-radius: 5px;
  border: 2px solid #fff;
}

.content::-webkit-scrollbar-thumb:hover {
  background: #FFDBE4;
}


#scrollbox {
  overflow-y: auto;
}

/* Botones */
button {
  padding: 8px;
  border: none;
  background: #FFE6EC;
  color: #757575;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.2s;
  cursor: url(https://cur.cursors-4u.net/others/oth-6/oth589.cur), auto;
  font-family: 'MiFuente';
  
  
}

button:hover {
  background: #FFDBE4;
}


.home-btn, .audio-btn {
  position: absolute;
  bottom: 10px;
  z-index: 10; 
}

.home-btn {
  position: absolute;
  left: 10px;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  background: rgba(255,255,255,100);
  color: white;
  transition: background 0.2s;
  cursor: url(https://cur.cursors-4u.net/others/oth-6/oth589.cur), auto;
}

.home-btn:hover {
  background: rgba(255,255,255,100);
}

  .audio-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 8px 10px;
    color: #333;
    cursor: url(https://cur.cursors-4u.net/others/oth-6/oth589.cur), auto;
  }

  .audio-btn:hover {
    background: rgba(255,255,255,100);
  }
  
  #pause-icon {
  display: none;
}