/*
Theme Name: Blogus Child
Theme URI: https://themeansar.com/free-themes/blogus-free-blog-wordpress-theme/
Template: blogus
Author: Themeansar
Author URI: https://themeansar.com
Description: Blogus is a fast, clean, modern-looking Best Responsive News Magazine WordPress theme. The theme is fully widgetized, so users can manage the content by using easy to use widgets. Blogus is suitable for dynamic news, newspapers, magazine, publishers, blogs, editors, online and gaming magazines, newsportals,personal blogs, newspaper, publishing or review siteand any creative website. Blogus is SEO friendly, WPML,Gutenberg, translation and RTL ready. Live preview : https://demos.themeansar.com/blogus-demos/ and documentation at https://docs.themeansar.com/docs/blogus/
Tags: two-columns,three-columns,left-sidebar,right-sidebar,translation-ready,custom-background,custom-logo,featured-images,footer-widgets,full-width-template,blog,e-commerce,entertainment
Version: 2.0.0.2.1720028414
Updated: 2024-07-03 17:40:14

*/
.abecedario {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.abecedario .letra {
    padding: 5px 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
}

/* Estilos para el contenedor */
/* Estilos para el contenedor */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    text-align: center; /* Asegura que el texto dentro del contenedor esté centrado */
}

/* Estilos para el título */
.titulo-alfabeto {
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center; /* Asegura que el título esté centrado */
}

/* Estilos para el abecedario */
.abecedario {
    display: flex;
    flex-wrap: wrap; /* Permite que las letras se envuelvan en varias líneas */
    justify-content: center; /* Centra el contenido */
    font-size: 24px; /* Tamaño de fuente responsivo */
    margin: 20px 0;
    padding: 10px;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.abecedario a, .abecedario span {
    text-decoration: none;
    color: #33cc33;
    margin: 5px; /* Espaciado entre letras */
    padding: 10px; /* Espaciado interno */
    display: inline-block;
    min-width: 40px; /* Ancho mínimo para cada letra */
    text-align: center;
}

.abecedario a:hover {
    color: #23527c;
}

/* Estilos responsivos */
@media (min-width: 768px) {
    .abecedario {
        font-size: 30px; /* Tamaño de fuente mayor en pantallas medianas */
    }
}

@media (min-width: 992px) {
    .abecedario {
        font-size: 30px; /* Tamaño de fuente mayor en pantallas grandes */
    }
}

@media (min-width: 1200px) {
    .abecedario {
        font-size: 48px; /* Tamaño de fuente original en pantallas muy grandes */
    }
}