:root {
	--accent-switch: 169, 71, 71;
    --accent-linux: 68, 163, 69;
	--accent: 92, 149, 199;
	--text: 225, 225, 225;
	--accenttext: 255, 255, 255;
	--bg: 01, 04, 09;
	--margin: 2em;
}

html,
body {
	background: rgba(var(--bg), 1);
	color: rgba(var(--text), 1) !important;
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	font-size: 12pt;
}

main {
	padding: 0 !important;
	margin: 0 !important;
}

form {
	margin-left: var(--margin);
	margin-right: var(--margin);
}

footer {
	margin: var(--margin);
}

hr {
	border-top: 1px solid rgba(var(--text), 0.1) !important;
}

a {
	color: rgba(var(--accent), 1) !important;
}

a:hover,
a:active,
a.text-dark:focus,
a.text-dark:hover {
	color: rgba(var(--accent), 1) !important;
	text-decoration: underline;
}

::selection {
	/* WebKit/Blink Browsers */
	background: rgba(var(--accent), 0.5);
}

::-moz-selection {
	/* Gecko Browsers */
	background: rgba(var(--accent), 0.5);
}

.text-dark {
	color: rgba(var(--text), 1);
}

.text-muted {
	color: rgba(var(--text), 0.5) !important;
}

.text-light {
	color: rgba(var(--accenttext), 1) !important;
}

.form-select {
	color: rgba(var(--accent), 1) !important;
	background: rgba(var(--bg), 1) !important;
}

button:focus {
	outline: 0px;
}

.card {
	background: rgba(var(--accent), 0.03);
	margin-bottom: var(--margin);
	border: none !important;
	border-radius: 4px;
	box-shadow: 1px 1px 3px rgba(var(--accent), 0.1),
		-1px 1px 3px rgba(var(--accent), 0.1);
}

.card-header {
	background-color: transparent !important;
	border-bottom: none !important;
}

.btn.btn-primary,
.pagination .page-item.active a {
	background: rgba(var(--accent), 0.5) !important;
	border-color: rgba(var(--accent), 1) !important;
	color: rgba(var(--accenttext), 1) !important;
}

.img-responsive {
	max-height: 125px;
	margin-left: auto;
	margin-right: auto;
}

.navipath {
	font-weight: bold;
	padding: var(--margin) 0 var(--margin) 0;
}

.navipath i.fa.fa-angle-right {
	margin-left: var(--margin);
	margin-right: var(--margin);
}

.nav-item {
	cursor: pointer;
}

.table td,
.table th {
	border-top: none !important;
	border-bottom: none !important;
}

.table.table-striped tbody tr:nth-of-type(odd) {
	background: rgba(var(--accent), 0.22) !important;
}

.table.table-hover tbody tr:hover {
	background: rgba(var(--accent), 0.32) !important;
}

.table {
	color: rgba(var(--text), 1) !important;
}

tr {
	color: rgba(var(--text), 1) !important;
}

.menu .menu-item > a:focus,
.menu .menu-item > a:hover {
	background: rgba(var(--accent), 0.3) !important;
}

.menu .menu-item > a.active,
.menu .menu-item > a:active {
	background: rgba(var(--accent), 0.3) !important;
	border-left: 7px solid rgba(var(--accent), 0.3) !important;
}

.menu-item active {
	background: rgba(var(--accent), 0.3) !important;
}

.menu .menu-item > a {
	color: var(--accent) !important;
}

img.oriu {
	width: 128 px !important;
	height: 128 px !important;
	border-radius: 50%;
	margin-top: 3rem !important;
}

.table-switch {
	background: rgba(var(--accent-switch), 0.4) !important;
}

.table-switch:hover {
    background: rgba(var(--accent-switch), 0.6) !important;
}

.table.table-striped tbody tr.table-switch:nth-of-type(odd) {
    background: rgba(var(--accent-switch), 0.4) !important;
}

.table.table-striped tbody tr.table-switch:nth-of-type(odd):hover {
    background: rgba(var(--accent-switch), 0.6) !important;
}

.table.table-hover tbody tr.table-switch:hover {
    background: rgba(var(--accent-switch), 0.6) !important;
}

.table-linux {
    background: rgba(var(--accent-linux), 0.4) !important;
}

.table-linux:hover {
    background: rgba(var(--accent-linux), 0.6) !important;
}
.table.table-striped tbody tr.table-linux:nth-of-type(odd) {
    background: rgba(var(--accent-linux), 0.4) !important;
}
.table.table-striped tbody tr.table-linux:nth-of-type(odd):hover {
    background: rgba(var(--accent-linux), 0.6) !important;
}
.table.table-hover tbody tr.table-linux:hover {
    background: rgba(var(--accent-linux), 0.6) !important;

svg path,
i.fas:before,
i.fab:before {
	fill: rgba(var(--accent), 1) !important;
	color: rgba(var(--accent), 1) !important;
}

/* Forum */

#contentcolumn {
	margin: 0 !important;
	padding: 0 !important;
}

.forabg,
.forumbg,
.viewtopic_wrapper {
	background-color: transparent !important;
}

.site-content {
	max-width: 100% !important;
}

.forumlist_grid_icons li.row {
	width: 30% !important;
}

@media (min-width: 992px) and (max-width: 1199px) .forumlist_grid li.row,
	.forumlist_grid_icons li.row {
	width: 30% !important;
}

@media (min-width: 768px) and (max-width: 991px) .forumlist_grid li.row,
	.forumlist_grid_icons li.row {
	width: 30% !important;
}

li.row {
	box-shadow: 1px 1px 3px rgba(var(--accent), 0.1),
		-1px 1px 3px rgba(var(--accent), 0.1) !important;
	background: rgba(var(--accent), 0.03) !important;
	border-radius: 4px !important;
	margin: calc(var(--margin) / 2) !important;
	padding: 0px !important;
}

.forumlist_grid li.row,
.grid_image_container,
.forumlist_grid_forum_image,
.grid_colour_overlay,
.grid_tile_full_bg_img {
	border-radius: 4px !important;
}

.forumlist_grid_icons .grid_image_container {
	margin-bottom: 0px !important;
	margin-right: 0px !important;
	margin-left: 0px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0px !important;
	background: rgba(var(--accent), 0.1) !important;
}

.fd_dark .navbar_o_header .navbar,
.fd_dark .forabg,
.fd_dark .forumbg,
.fd_dark li.row,
.fd_dark .bg1,
.fd_dark .bg2,
.fd_dark .bg3,
.fd_dark .tabs .activetab > a,
.fd_dark .tabs a:hover,
.fd_dark ul.cplist,
.fd_dark .panel,
.fd_dark blockquote blockquote,
.fd_dark .panel blockquote,
.fd_dark .panel blockquote blockquote blockquote,
.fd_dark .panel .codebox,
.fd_dark .dropdown .dropdown-contents,
.fd_dark .jumpbox-cat-link,
.fd_dark .jumpbox-sub-link,
.fd_dark .jumpbox-forum-link,
.fd_dark .cp-main .message-box textarea,
.fd_dark fieldset.quick-login input.inputbox,
.fd_dark .fancy_panel,
.fd_dark .dropdown-extended .header,
.fd_dark .forumlist_grid .grid_image_container,
.fd_dark body.content_block_header_stripe li.header,
.fd_dark .forumlist_grid_icons .grid_image_container {
	background: rgba(var(--accent), 0.05) !important;
}

.fd_dark #inner-wrap,
.fd_dark.navbar_o_header .navbar,
.fd_dark .panel-container .panel,
.fd_dark .navigation .active-subsection a,
.fd_dark .navigation a:hover,
.fd_dark .cp-mini,
.fd_dark .codebox,
.fd_dark .codebox code,
.fd_dark blockquote,
.fd_dark blockquote blockquote blockquote,
.fd_dark .panel blockquote blockquote,
.fd_dark .attachbox,
.fd_dark .message-box textarea,
.fd_dark .phpbb_alert,
.fd_dark select,
.fd_dark .minitabs a:hover,
.fd_dark .minitabs .activetab > a,
.fd_dark .minitabs .activetab > a:hover,
.fd_dark .cp-main .pm,
.fd_dark .bg3 .topicreview .bg2,
.fd_dark .bg3 .topicreview .bg1,
.fd_dark .forumlist_grid_icons .forabg {
	background-color: transparent !important;
}

.fd_dark #inner-wrap,
.fd_dark.navbar_o_header .navbar,
.fd_dark .panel-container .panel,
.fd_dark .navigation .active-subsection a,
.fd_dark .navigation a:hover,
.fd_dark .cp-mini,
.fd_dark .codebox,
.fd_dark .codebox code,
.fd_dark blockquote,
.fd_dark blockquote blockquote blockquote,
.fd_dark .panel blockquote blockquote,
.fd_dark .attachbox,
.fd_dark .message-box textarea,
.fd_dark .phpbb_alert,
.fd_dark select,
.fd_dark .minitabs a:hover,
.fd_dark .minitabs .activetab > a,
.fd_dark .minitabs .activetab > a:hover,
.fd_dark .cp-main .pm,
.fd_dark .bg3 .topicreview .bg2,
.fd_dark .bg3 .topicreview .bg1,
.fd_dark .forumlist_grid_icons .forabg,
.navbar_footer,
.copyright_bar {
	background-color: transparent !important;
}

.navbar {
	background-color: rgba(var(--accent), 0.1) !important;
	margin-top: var(--margin);
}

.forumlist_grid_icons li.row {
	width: 100% !important;
}

/* Styles de Blog y Random */

/* Contenedores principales */
.blog-posts-container,
.random-posts-container {
    margin-top: 1em;
}

/* Tarjetas de posts */
.blog-post-card,
.random-post-card {
    margin-bottom: 2em;
    background: rgba(var(--accent), 0.03);
    border: 1px solid rgba(var(--accent), 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.blog-post-card:hover,
.random-post-card:hover {
    box-shadow: 0 4px 12px rgba(var(--accent), 0.15);
    transform: translateY(-2px);
}

/* Encabezados de tarjetas */
.blog-post-card .card-header,
.random-post-card .card-header {
    background: rgba(var(--accent), 0.05);
    border-bottom: 1px solid rgba(var(--accent), 0.1);
    padding: 1.5em;
}

/* Títulos de posts */
.post-title {
    margin: 0 0 0.5em 0;
    font-size: 1.4em;
    line-height: 1.3;
}

.post-title a {
    text-decoration: none;
    color: rgba(var(--accent), 1) !important;
    transition: color 0.3s ease;
}

.post-title a:hover {
    color: rgba(var(--accenttext), 1) !important;
    text-decoration: underline;
}

/* Metadatos de posts */
.post-meta {
    color: rgba(var(--text), 0.7);
    font-size: 0.9em;
}

.post-meta time {
    font-weight: 500;
}

/* Cuerpos de tarjetas */
.blog-post-card .card-body,
.random-post-card .card-body {
    padding: 1.5em;
}

/* Contenido/excerpt de posts */
.post-content {
    line-height: 1.6;
    margin-bottom: 1em;
    color: rgba(var(--text), 0.9);
}

/* Contenedores de tags */
.post-tags {
    margin: 1em 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

/* Tags individuales */
.tag {
    display: inline-block;
    background: rgba(var(--accent), 0.2);
    color: rgba(var(--accent), 1);
    padding: 0.25em 0.75em;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 500;
    transition: all 0.3s ease;
}

.tag:hover {
    background: rgba(var(--accent), 0.4);
    transform: translateY(-1px);
}

/* Acciones de posts */
.post-actions {
    margin-top: 1em;
    display: flex;
    justify-content: flex-start;
}

/* Botones "Leer más" */
.btn-read-more {
    background: rgba(var(--accent), 0.3) !important;
    border: 1px solid rgba(var(--accent), 0.5) !important;
    color: rgba(var(--accenttext), 1) !important;
    text-decoration: none;
    padding: 0.5em 1.5em;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-read-more:hover {
    background: rgba(var(--accent), 0.5) !important;
    border-color: rgba(var(--accent), 0.7) !important;
    transform: translateY(-1px);
    text-decoration: none;
}

/* Tarjetas para cuando no hay posts */
.no-posts-card {
    text-align: center;
    padding: 3em 2em;
    background: rgba(var(--accent), 0.05);
    border: 2px dashed rgba(var(--accent), 0.2);
}

.no-posts-card h3 {
    color: rgba(var(--text), 0.8);
    margin-bottom: 1em;
}

.no-posts-card p {
    color: rgba(var(--text), 0.6);
}

/* Styles random.html */

/* Efectos especiales para posts random */
.random-post-card {
    border-left: 4px solid rgba(var(--accent), 0.3);
}

.random-post-card:hover {
    border-left-color: rgba(var(--accent), 0.6);
}

/* Puedes añadir más estilos específicos para random aquí */
.random-posts-container .post-content {
    font-style: italic;
    color: rgba(var(--text), 0.8);
}

/* Styles blog.html */

.blog-post-card {
    border-top: 3px solid rgba(var(--accent), 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .blog-post-card .card-header,
    .blog-post-card .card-body,
    .random-post-card .card-header,
    .random-post-card .card-body {
        padding: 1em;
    }
    
    .post-title {
        font-size: 1.2em;
    }
    
    .post-tags {
        gap: 0.25em;
    }
    
    .tag {
        font-size: 0.75em;
        padding: 0.2em 0.6em;
    }
    
    .btn-read-more {
        padding: 0.4em 1.2em;
        font-size: 0.9em;
    }
    
    .no-posts-card {
        padding: 2em 1em;
    }
}