index.css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: normal;
}

@font-face {
    font-family: 'Exo 2';
    src: url('assets/fonts/Exo2.woff2') format('woff2'),
         url('assets/fonts/Exo2.woff') format('woff'),
         url('assets/fonts/Exo2.ttf') format('ttf');
}
        
:root{
    --efect-blur: blur(6px);
    --borde-line: solid 1px #fff8;
    --title-size_I: 1em;
    --title-size_II: 2em;
    --title-size_III: 3em;
    
    scroll-behavior: smooth;
}

:root[data-theme="light"] {
    --color-body: linear-gradient(90deg, #b8cee3 0%, #d9e2ec 50%, #b8cee3 100%);
    --color-grad: linear-gradient(to bottom, #12c2d5, #1c6fff);
    --color-text: #234;
    --color-link: #0099f1;
    --color-bg-I: #fff2;
    --color-bg-T: #fff4;
    --color-bg-H: #fffa;
}

:root[data-theme="dark"] {
    --color-body: linear-gradient(90deg, #0b0d11 0%, #1e2630 50%, #0b0d11 100%);
    --color-grad: linear-gradient(to bottom, #0aeb8b, #01b437);
    --color-text: #eff;
    --color-link: #0aeb8b;
    --color-bg-I: #0002;
    --color-bg-T: #0003;
    --color-bg-H: #000a;
}

body {
    font-family: 'Exo 2', system-ui, sans-serif;
    font-size: 18px;
    color: var(--color-text);
    background: var(--color-body);
    transition: all ease .5s;
}

/* . . . . . . . . . . . . . . . . . . . . . . . . */

.gb-icon {
    width: 1.6em;
}

.gb-menu {
    height: 100vh;
    width: max-content;
    position: fixed;
    align-content: center;

    nav {
        padding-left: 2em;
    }

    ul {
        backdrop-filter: var(--efect-blur);
        background-color: var(--color-bg-I);
        padding: 6px;
        outline: var(--borde-line);
        border-radius: 5em;
        display: flex;
        flex-direction: column;
        gap: .5em;
        margin-bottom: 1em;
    }

    li {
        list-style: none;
        position: relative;
        label {
            display: flex;
            input[type="checkbox"] {
                display: none;
            }
        }
    }

    a:visited {
        color: var(--color-text);
    }

    a:link {
        color: var(--color-text);
    }

    .gb-menu__item {
        display: flex;
        background-color: var(--color-bg-I);
        padding: .5em;
        border-radius: 5em;

        transition-property: color;
        transition: ease .2s;
    }

    .gb-menu__item:hover {
        background-color: var(--color-bg-H);
        color: var(--color-link);
        &.github{
            color: #fff;
            background-color: #010409;
            &:hover::after {
                content: 'GitHub';
                background-color: #010409;
            }
        }
        &.linkedin{
            color: #fff;
            background-color: #0a66c2;
            &:hover::after {
                content: 'Linkedin';
                background-color: #0a66c2;
            }
        }
    }

    .gb-menu__item:hover::after {
        content: '';
        display: inline-block;
        position: absolute;
        font-weight: 600;
        padding: .5em 1em;
        border-radius: 5em;
        background-color: var(--color-bg-H);
        top: 10%;
        left: 100%;
        margin-left: 1em;   
    }
    
    .dark {
        display: none;
    } .theme:has(:checked) {
        .dark{
            display: block;
        }
        .light{
            display: none;
        }
    }

    .theme:hover::after {
        content: 'Modo';
    }
    .projects:hover::after {
        content: 'Proyectos';
    }
    .experience:hover::after {
        content: 'Experiencia';
    }
    .skills:hover::after {
        content: 'Habilidades';
    }
    .knowledge:hover::after {
        content: 'Conocimientos';
    }
    .contact:hover::after {
        content: 'Contacto';
    }
}

.gb-main {
    width: 100%;
    display: flex;
    justify-content: center;
    article {
        overflow: hidden;
        width: 80%;
    }
    h2 {
        color: var(--color-bg-H);
        font-size: var(--title-size_III);
        text-transform: uppercase;
        letter-spacing: .5em;
        text-align: center;
        padding: .8em 0;
    }
}

.section__hero {
    /* outline: dashed 2px #0005; */

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    

    img {
        border-radius: 5em;
        outline: var(--borde-line);
        width: 160px;
    }
    h1 {
        font-size: 2em;
    }
    p {
        font-size: 3em;
        font-weight: bold;
        strong {
            font-weight: bold;
            background: var(--color-grad);
            background-clip: text;
            color: transparent;
        }
    }
    span {
        margin: 2em 0 4em 0;
    }
}

.scroll-animation {
    animation: scroll-down 3s infinite;
}

@keyframes scroll-down {
    0%, 100% {
        transform: translateY(0rem);
        opacity: 1;
    }

    35% {
        transform: translateY(1rem);
        opacity: 0;
    }

    70% {
        transform: translateY(-1rem);
        opacity: 0;
    }
}

.section__projects {
    min-height: 100vh;
    
    section {
        min-height: 50%;
        width: 100%;
        display: flex;
        padding: 1em;
    }

    .description {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        h3 {
            font-size: 2.5em;
            font-weight: 600;
            margin-top: .5em;
        }
        p {
            margin: 2em 0;
        }
        ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            li {
                padding: .5em 1em;
                margin: 4px;
                background-color: var(--color-bg-T);
                border-radius: 5em;
                transition-property: color;
                transition: ease .2s;
                display: inline-block;
            }
            li:hover {
                background-color: var(--color-bg-H);
                cursor: default;
            }
        }

        .controller {
            width: 100%;
            display: flex;
            align-items: center;
            flex-direction: row;
            margin-top: 3em;
            gap: 1em;

            span {
                font-size: 3em;
                font-weight: 200;
            }
            progress {
                height: .5em;
                width: 50%;
                accent-color: var(--color-link);
            }
            div {
                display: flex;
                gap: .5em;
            }
            button {
                color: var(--color-text);
                display: flex;
                border: 0;
                padding: .5em;
                border-radius: 5em;
                background: var(--color-bg-T);
                outline: var(--borde-line);

                transition-property: color;
                transition: ease .2s;
            }
            button:hover {
                background-color: var(--color-bg-H);
                color: var(--color-link);
            }
        }
    }
    
    .visualization {
        width: 50%;

        div {
            position: absolute;
            right: 0;
            width: 45%;
            height: max-content;
            border-radius: 4px;
            overflow: hidden;
                        
            img {
                width: 720px;
                border-radius: 4px;
            }
            menu {
                opacity: 0;
                position: absolute;
                background-color: #0002;
                width: 720px;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 4px;
                

                transition-property: color;
                transition: ease .2s;
                ul {
                    display: flex;
                    gap: .5em;
                    li {
                        list-style: none;
                        a {
                            display: flex;
                            padding: .5em;
                            font-size: var(--title-size_II);
                            border-radius: 5em;
                            outline: var(--borde-line);
                            background-color: var(--color-bg-H);
                            backdrop-filter: var(--efect-blur);
                            margin-top: 1em;

                            transition-property: color;
                            transition: ease .2s;
                            &:link {
                                color: var(--color-text);
                            }
                            &:visited {
                                color: var(--color-text);
                            }
                            &:hover {
                                color: var(--color-link);
                                background-color: var(--color-bg-H);
                                
                            }
                        }
                    }
                }
            }
        }

        div:hover menu {
            opacity: 1;
            a {
                margin-top: 0;
            }
        }
    }
}