@font-face {
    font-family: 'MononokiNF';
    src: url('../fonts/MononokiNFReg.ttf');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'JetBrainsMonoB';
    src: url('../fonts/JetBrainsMonoBold.ttf');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'JetBrainsMonoR';
    src: url('../fonts/JetBrainsMonoReg.ttf');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'RobotoReg';
    src: url('../fonts/Roboto-Regular.ttf');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'RobotoBld';
    src: url('../fonts/Roboto-Bold.ttf');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'HostGrotReg';
    src: url('../fonts/HostGroteskRegular.ttf');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'HostGrotSemBld';
    src: url('../fonts/HostGroteskSemiBold.ttf');
    font-style: normal;
    font-weight: normal;
}

html {
	scroll-behavior: smooth;
}

body {
    background: #0D0D0D;
    margin: 0;
    padding: 0;
}

span {
    font-weight: bold;
    font-family: 'RobotoReg';
    color: #00ffff;
}

p {
    font-family: 'HostGrotReg';
    color: #FFFFFF;
}

small {
    font-family: 'HostGrotReg';
    color: #bfbfbf;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.vcontainer {
    display:grid;
    justify-content: center;
}

.inline {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.separator-left {
    margin-left: 10px;
}

.separator-right {
    margin-right: 10px;
}

.separator-top {
    margin-top: 10px;
}

.separator-bottom {
    margin-bottom: 10px;
}

.separator-margins {
    margin: 10px;
}

.title {
    color: #00ffff;
    font-family: 'HostGrotSemBld';
}

.title a {
    text-decoration: none;
    color: #00ffff;
}

.subtitle {
    color: #FFFFFF;
    font-family: 'RobotoReg';
}

.toolbar {
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    border-bottom: 1px solid #1E1E1F;
}

.toolbar-icon-container {
    width: 40px;
    justify-content: center;
}

.icon {
    max-width: 90%;
    margin-left: 10px;
    margin-right: 8px;
}

.toolbar-title-container {
    margin-left: 20px;
    margin-right: 20px;
}

.menu {
    display: inline-flex;
    margin-left: auto;
    list-style: none;
}

.menu li {
    margin-left: 12px;
    margin-right: 12px;
    font-size: 14px;
}

.menu a {
    text-decoration: none;
    color: #bfbfbf;
    transition: 0.4s;
    font-family: 'RobotoBld';
}

.menu :hover {
    color: #FFFFFF;
    transition: 0.4s;
}

.presentation {
    margin: 20px;
}

.presentation-section {
    margin: 0px;
    padding: 0px;
}

.icon-presentation {
    margin-top: 0px;
    width: 75px;
}

.name-title {
    font-size: 40px;
    margin-bottom: 10px;
}

.description-title {
    margin: 0px;
    font-size: 25px;
}

.little-msg {
    margin-top: 15px;
    margin-bottom: 15px;
}

.card {
    margin: 20px;
    padding: 0px;
    background-color: #151414;
    border: 2px solid #1E1E1F;
    transition: 0.3s;
    border-radius: 15px;
}

.card-fix-margin {
    margin: 20px;
}

.title-card {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0px;
}

.title-card svg {
    margin-top: 0;
    margin-right: 10px;
}

.thumbnail {
    max-width: 100%;
    margin: 0px;
}

.links-container {
    margin-top: 15px;
    margin-bottom: 0px;
    margin-left: 0;
    padding: 0px;
}

.button {
    display: inline-flex;
    text-align: center;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 2px;
    padding: 10px;
    text-decoration: none;
    background-color: #151414;
    border: 2px solid #1E1E1F;
    transition: 0.4s;
    border-radius: 10px;
    color: #FFFFFF;
    font-family: 'MononokiNF';
}

.button svg {
    margin-left: 3px;
    margin-right: 3px;
    transition: 0.4s;
}

.button:hover {
    background-color: #FFFFFF;
    color: #0D0D0D;
    transition: 0.4s;
}

.button:hover svg {
    filter: invert(99%) sepia(0%) saturate(0%) hue-rotate(352deg) brightness(111%) contrast(101%);
    transition: 0.4s;
}

.misc-details {
    display: inline;
    text-align: center;
    align-items: center;
}

.detail {
    display: inline-flex;
    align-items: center;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
}

.detail svg {
    margin-right: 5px;
}

.detail p {
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 15px;
}

.center {
    display: inline-flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.project-view {
    max-width: 350px;
    margin: 0px;
}

.project-view p {
    margin: 20px;
}

.thumbnail {
    border-radius: 15px;
}

.input-container {
    border-radius: 10px;
    background-color: #202127;
    margin-top: 5px;
    margin-bottom: 5px;
    
}

.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.tag {
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 20px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease-in-out, background-color 0.3s;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo semi-transparente */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tag:hover {
    /* transform: scale(1.1); */
    background-color: rgba(255, 255, 255, 0.2);
}

.tech-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Se ajusta en responsive */
    gap: 20px;
    text-align: center;
    margin-top: 20px;
}

.tech-sections {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre filas */
    max-width: 800px; /* Limita el ancho total */
    margin: 0 auto; /* Centra todo */
}

.row {
    display: flex;
    justify-content: center; /* Asegura que las secciones estén centradas */
    gap: 15px; /* Espacio entre columnas */
}

.tech-section {
    flex: 1;
    padding: 15px;
    background-color: #151414;
    border: 2px solid #1E1E1F;
    border-radius: 10px;
    text-align: center;
    max-width: 380px; /* Limita el ancho individual de cada sección */
}

.tech-section h3 {
    color: #00FFFF; /* Azul cian para resaltar */
    margin-top: -3px; /* Reduce el espacio superior */
    font-size: 14px;
    font-family: 'HostGrotSemBld';
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}


/* Colores oscuros personalizados para cada tecnología */
.php { background-color: #4F5B93; }       /* Azul oscuro PHP */
.laravel { background-color: #8C1C13; }   /* Rojo oscuro Laravel */
.mariadb { background-color: #1C3B4A; }   /* Azul petróleo MariaDB */
.ubuntu { background-color: #6E321E; }    /* Naranja oscuro Ubuntu */
.debian { background-color: #5A1228; }    /* Rojo vino Debian */
.fedora { background-color: #1E2B4A; }    /* Azul profundo Fedora */
.rocky { background-color: #145C44; }     /* Verde oscuro Rocky Linux */
.java { background-color: #3C4F63; }       /* Azul grisáceo oscuro para Java */
.nginx { background-color: #0A3D2E; }   /* Verde oscuro para NGINX */
.apache { background-color: #662946; }  /* Púrpura oscuro para Apache */
.javascript { background-color: #8B7500; } /* Amarillo mostaza oscuro para JavaScript */
.microsoft365 { background-color: #5A3B0D; }  /* Marrón oscuro Microsoft 365 */
.paper { background-color: #2A3B4A; }   /* Azul oscuro para Paper */
.bungeecord { background-color: #7A1B1B; }  /* Rojo oscuro para BungeeCord */
.generic { background-color: #151414;} /* Color gris oscuro para cualquier otro */