@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');

@font-face {
  font-family: 'tipo1'; /* Nombre que usarás para referenciar la fuente */
  src: url('/fonts/tipo1/JetBrainsMono-SemiBold.ttf') format('truetype'); /* Ruta al archivo de la fuente */
  font-weight: normal; /* Peso normal */
  font-style: normal; /* Estilo normal */
}

.content {
    font-family: 'PT Mono', regular;
}


body {
    font-family: 'PT Mono', regular;
    overflow-x: hidden; /* Evita el scroll horizontal */
    background-color: #fcfeee	
}

/* ... Resto de tus estilos ... */

body.category-selected {
  background-color: black;
}

body.category-selected-left {
  background-color: black;
}

.panel {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 300px; /* Ancho del panel */
    background-color: #fcfeee;
    z-index: 100;
    transition: transform 0.5s ease-in-out; /* Animación */
}

article {
  font-family: 'PT Mono', regular;
}

article h1 {  /* Targets h1 elements inside the article */
  font-size: 60px/* Your desired size */;
}

.left-panel {
    left: 0;
    transform: translateX(-100%); /* Oculto a la izquierda */
}

.right-panel {
    right: 0;
    transform: translateX(100%); /* Oculto a la derecha */
}

.panel.open {
    transform: translateX(0); /* Visible */
    overflow-y: auto;
    height: 100%;
}

.panel.single-page {
    display: none;
}

.panel-content {
    padding: 20px;
}

.close-panel {
    margin-top: 20px;
    cursor: pointer;
    font-family: Gaisyr Mono;
    color: #fcfeee;
    text-decoration: none;
}

.close-panel.left {
  color: black;
}

/* Overlay para oscurecer el fondo */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
    display: none; /* Inicialmente oculto */
}

.overlay.open {
    display: block;
}

.tabla-50 {
  width: 100%;
  table-layout: fixed; /* Importante para distribución equitativa */
}

.tabla-50 td {
  width: 50%; /* Distribuye el espacio entre las columnas */
  text-align: right; /* Alinea el texto a la derecha */
}

.tabla-50 td.left {
  width: 50%; /* Distribuye el espacio entre las columnas */
  text-align: left; /* Alinea el texto a la izquierda */
}

.contenidor-flex {
  display: flex;
  flex-direction: column; /* Alinea los elementos verticalmente */
  gap: 250px; /* Espacio de 20px entre los elementos */
}

.the-footer {
  /*position: fixed; /* Fija el elemento a la ventana del navegador */
  bottom: 0;     /* Lo posiciona en la parte inferior */
  left: 0;       /* Lo alinea a la izquierda (opcional) */
  width: 100%;   /* Ocupa todo el ancho (opcional) */
  text-align: center;
}

.video-tittle {
  font-family: 'PT Mono', regular;
  font-size: 30px;
  color: #fcfeee;
  margin-top: 0;
  margin-bottom: 0;
  text-align: start;
}

.video-tittle.left {
  color: black;
}

.video-subtittle {
  font-family: 'PT Mono', regular;
  font-size: 20px;
  font-style: italic;
  color: #fcfeee;
  margin-top: 0;
  margin-bottom: 0;
  text-align: start;
}

.contenidor-imatge {
  width: 100%;          /* Ocupa todo el ancho disponible */
  height: auto;         /* Altura automática para mantener la proporción */
  /*max-height: 300px;    /* Altura máxima deseada */
  overflow: hidden;     /* Oculta cualquier contenido que sobresalga */
}

.footer {
  color: black;
  font-family: 'PT Mono', regular;
}

.footer.open {
  color: #fcfeee;
}

p.footer {
  margin-top: 0;    /* Elimina el margen superior */
  margin-bottom: 0px; /* Reduce el margen inferior a 10px (ajusta el valor a tu gusto) */
}



figure {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

.photo {
    width: 100%;
}

/*
 *  STYLE 14
 */

#style-14::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
    background-color: #CCCCCC;
}

#style-14::-webkit-scrollbar
{
    width: 6px;
    background-color: #F5F5F5;
}

#style-14::-webkit-scrollbar-thumb
{
    background-color: #FFF;
    background-image: -webkit-linear-gradient(90deg,
                                              rgba(0, 0, 0, 1) 0%,
                                              rgba(0, 0, 0, 1) 25%,
                                              transparent 100%,
                                              rgba(0, 0, 0, 1) 75%,
                                              transparent)
}

/*
 *  STYLE 10
 */

#style-10::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.6);
    background-color: #CCCCCC;
}

#style-10::-webkit-scrollbar
{
    width: 0px;
    background-color: #F5F5F5;
}

#style-10::-webkit-scrollbar-thumb
{
    background-color: #FFF;
    background-image: -webkit-linear-gradient(90deg,
                                              rgba(0, 0, 0, 1) 0%,
                                              rgba(0, 0, 0, 1) 25%,
                                              transparent 100%,
                                              rgba(0, 0, 0, 1) 75%,
                                              transparent)
}

.contenidor-main {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.contenidor-main::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

li {
  display: block;
}