/*
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*/

/* Peso 300 (Light) */
@font-face {
    font-family: 'Roboto';
    /* Prioridad a WOFF2 por ser más ligero */
    src: url('../fonts/Roboto-Light.woff2') format('woff2'),
         /* WOFF para compatibilidad con navegadores antiguos */
         url('../fonts/Roboto-Light.woff') format('woff'),
         /* TTF como fallback para los navegadores muy antiguos */
         url('../fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    /* Prioridad a WOFF2 por ser más ligero */
    src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
         /* WOFF para compatibilidad con navegadores antiguos */
         url('../fonts/Roboto-Regular.woff') format('woff'),
         /* TTF como fallback para los navegadores muy antiguos */
         url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
      color-scheme: light dark;
}

* {
    /*
    font-family: 'Roboto', sans-serif;
    */
    font-family: 'Roboto', sans-serif;
}

body {
    gap: 0 24px;
    width: 100%;
    margin: 55px auto 0 auto;
    display: flex;
    max-width: 987px;
}

a {
    color: light-dark(rgb(0, 144, 144), rgb(0, 233, 233));
    text-decoration: none;
    font-weight: 400;
}

main {
    padding: 0 89px 0 0;
}

/* Sidebar */
.sidebar {
    padding-left: 89px;
}

img {
    --square-px: 144px;
    width: var(--square-px);
    height: var(--square-px);
    border-radius: 3px;
}

ul.links {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.links li {
    padding: 8px 0;
}

ul.links a {
    gap: 0 8px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

ul.links a svg {
    color: light-dark(rgb(0, 144, 144), rgb(0, 233, 233));
}

ul.links a span {
    color: light-dark(rgb(0, 144, 144), rgb(0, 233, 233));
    font-weight: 400;
}

/*End sidebar*/


header {
    gap: 0 13px;
    display: flex;
    flex-wrap: wrap;
}

header h1 {
    color: light-dark(rgb(0, 0, 0, .89), rgb(255, 255, 255, .89));
    margin: 0;
    font-weight: 400;
    font-size: 1.89rem;
}

header p {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 300;
}

header hr {
    border-top: none;
    border-color: light-dark(rgb(0, 0, 0, .13), rgb(255, 255, 255, .13));
}


menu {
    margin: 0;
    padding: 0;
}

section {
    margin: 21px 0 0 0;

}

section>p {
    margin: 0 0 8px 0;
    font-size: 1.21rem;
    font-weight: 400;
}

section ul {
    margin: 0;
}

section ul li {
    margin: 8px 0;
}

section ul li header {
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

section ul li span {
    color: light-dark(rgb(0, 0, 0, .89), rgb(255, 255, 255, .89));
    display: block;
    font-size: 1.21rem;
    font-weight: 300;
}

section ul li span b {
    font-weight: 400;
}

section.experience ul li {
    margin-bottom: 21px;
}

section.experience ul li p {
    font-size: 1.21rem;
    font-weight: 300;
}

.labels_container {
    gap: 5px;
    display: flex;
    flex-wrap: wrap;
}

.labels_container span {
    padding: 3px 5px;
    display: inline;
    text-wrap: nowrap;
    font-style: normal;
    font-size: 1rem;
    font-weight: 300;
    border-radius: 5px;
}

.frog-sky-blue-labels span {
    color: light-dark(rgb(0, 144, 144), rgb(0, 233, 233));
    border: 1px solid light-dark(rgb(0, 144, 144, .08), rgb(0, 233, 233, .08));
    background-color: light-dark(rgb(0, 144, 144, .08), rgb(0, 233, 233, .08));
}

section ul li p {
    margin: 0 0 5px 0;
    font-size: 1.21rem;
}

section.experience .development-time {
    margin: 5px 0;
    font-weight: 300;
}

section.experience .development-time b {
    font-weight: 400;
}

/* CTF Section */
section.ctf ul {
    margin: 21px 0 0 0;
    padding: 0;
}

section.ctf ul li {
    gap: 13px;
    display: flex;
    margin-bottom: 21px;
}

section.ctf ul li p {
    font-weight: 300;
}

section.ctf ul li img {
    --square-px: 34px;
    width: var(--square-px);
    height: var(--square-px);
    border-radius: 3px;
}

section.ctf ul li header span {
    display: block;
    font-weight: 400;
}

section.ctf ul li a {
    gap: 0 8px;
    display: flex;
    font-weight: 350;
    text-decoration: none;
}

section.ctf ul li a span {
    color: light-dark(rgb(0, 0, 0, 1), rgb(255, 255, 255, 1));
    font-weight: 350;
}

section.ctf ul li a svg {
    color: light-dark(rgb(0, 0, 0, .89), rgb(255, 255, 255, .89));
    stroke-width: 1.55px;
}

.red-labels span {
    gap: 0 5px;
    color: light-dark(rgb(89, 0, 0, .8), rgb(233, 0, 0, .89));
    border: 1px solid light-dark(rgb(89, 0, 0, .08), rgb(233, 0, 0, .08));
    display: flex;
    align-items: center;
    background-color: light-dark(rgb(89, 0, 0, .08), rgb(233, 0, 0, .08));
}

/* End CTF section */

@media (max-width: 987px) {
    body {
        display: block;
    }

    main {
        padding: 0 34px;
    }

    .sidebar {
        padding-left: 34px;
    }

    body>div {
        gap: 0 21px;
        display: flex;
    }
}