```css
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:"Segoe UI",Tahoma,sans-serif;

    background-image:url("img/fondo.jpg");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    min-height:100vh;
}
.escritorio{
    display:grid;

    grid-template-columns:
    240px
    260px
    260px
    500px
    300px;
    

    column-gap:15px;

    row-gap:15px;

    align-items:start;
}
.ventana{
    background:rgba(20,30,45,.55);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.4);

    border-radius:8px;

    overflow:hidden;

    box-shadow:none;
    0 0 20px rgba(0,0,0,.5),
    inset 0 0 10px rgba(255,255,255,.08);

    transition:0.3s;
}
.ventana:hover{
    transform:translateY(-3px);

    box-shadow:
    0 0 15px rgba(138,209,0,.25);
}
.barra{
    height:32px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 10px;

    color:white;
    font-weight:bold;
    text-shadow:
    0 1px 0 rgba(255,255,255,.8),
    0 0 5px rgba(255,255,255,.5);

    background:linear-gradient(
        to bottom,
        #d9ecff 0%,
        #8dc3f4 8%,
        #5f9dd9 45%,
        #4a84c4 55%,
        #3b6ea5 100%
    );

    border-bottom:1px solid rgba(255,255,255,.3);

    position:relative;

    box-shadow:
    inset 0 1px rgba(255,255,255,.9),
    inset 0 -1px rgba(0,0,0,.15);
}

.barra::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:50%;

    background:rgba(255,255,255,.35);

    pointer-events:none;
}
.contenido{
    padding:8px;
    color:white;

    text-shadow:
    0 0 3px rgba(255,255,255,.15);
}

.perfil img{
    width:120px;
    height:120px;

    object-fit:cover;

    display:block;
    margin:auto;

    border:4px solid #8ad100;
    border-radius:12px;
    box-shadow:
    0 0 15px rgba(138,209,0,.5),
    0 0 35px rgba(138,209,0,.25);

    transition:0.3s;
}

.perfil img:hover{
    transform:scale(1.05);
}

.perfil h1{
    margin-top:6px;
    text-align:center;
    font-size:22px;

    text-shadow:
    0 0 5px rgba(255,255,255,.8),
    0 0 10px rgba(255,255,255,.5);
}

.perfil p{
    text-align:center;
    margin-top:4px;
    font-size:14px;
}
.sobremi{
    min-height:0;
}
.ciclo li{
    margin-bottom:8px;
}

.redes p{
    margin-bottom:10px;
}

.redes a{
    color:white;
    text-decoration:none;
}

.redes a:hover{
    color:#8ad100;

    text-shadow:
    0 0 5px #8ad100,
    0 0 10px #8ad100;

    text-decoration:underline;
}

.botones{
    display:flex;
    gap:4px;
}

.btn{
    width:18px;
    height:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:12px;
    font-weight:bold;

    color:white;

    border:1px solid rgba(255,255,255,.4);

    border-radius:3px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.5),
        rgba(255,255,255,.15)
    );

    cursor:pointer;
}

.btn:hover{
    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.8),
        rgba(255,255,255,.3)
    );
}

.cerrar{
    background:linear-gradient(
        to bottom,
        #ff9a9a,
        #c75050
    );
}

.taskbar{
    position:fixed;
    bottom:0;
    left:0;

    width:100%;
    height:48px;

    background:linear-gradient(
        to bottom,
        #7ea7e6,
        #4b6f9f,
        #35547f
    );

    border-top:1px solid #8fb6ff;

    display:flex;
    align-items:center;

    padding:0 10px;

    box-shadow:0 -2px 10px rgba(0,0,0,.4);
}

.inicio{
    width:80px;
    height:36px;

    border-radius:18px;

    background:linear-gradient(
        #69d84f,
        #2e9b24
    );

    border:1px solid #d6ffd0;

    color:white;
    font-weight:bold;
    text-shadow:
    0 1px 2px rgba(0,0,0,.5);

    display:flex;
    justify-content:center;
    align-items:center;

    cursor:pointer;
    box-shadow:
    inset 0 1px rgba(255,255,255,.7),
    0 0 10px rgba(105,216,79,.5);
}

.inicio:hover{
    transform:scale(1.05);

    box-shadow:
    0 0 15px #8aff5a;
}
.barra:hover{
    filter:brightness(1.08);
}
.btn{
    cursor:pointer;
    transition:0.2s;
}

.btn:hover{
    background:rgba(255,255,255,.35);
}
.cerrar:hover{
    background:#e04343;
}
.steamfriends .friend{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
}

.steamfriends img{
    width:48px;
    height:48px;
    object-fit:cover;

    border-radius:8px;
    border:2px solid #8ad100;
}

.steamfriends a{
    color:white;
    text-decoration:none;
}

.steamfriends a:hover{
    color:#8ad100;
}
.conocimientos li{
    margin-bottom:8px;
}
.redes{
    grid-column:1;
}

.steamfriends{
    grid-column:1;
}

.conocimientos{
    grid-column:2;
}
.steamfriends{
    min-height:220px;
}
.perfil{
    grid-column:1;
    grid-row:1;
}

.sobremi{
    grid-column:2 / span 2;
    grid-row:1;
}
.ciclo{
    grid-column:4;
    grid-row:1;
}
.redes{
    grid-column:1;
    grid-row:2;
    margin-top:-860px;
}

.conocimientos{
    grid-column:2;
    grid-row:2;
    margin-top:-840px;
}

.hobbies{
    grid-column:3;
    grid-row:2;
    margin-top:-840px;
}

.steamfriends{
    grid-column:1;
    grid-row:3;
    margin-top:-615px;
}

.juegos{
    grid-column:2 / span 2;
    grid-row:3;
    margin-top:-640px;
}
.curso{
    margin-bottom:20px;
    padding-bottom:15px;
    border-bottom:1px solid rgba(255,255,255,.15);
}

.curso h3{
    margin-bottom:8px;
}

.curso p{
    margin-bottom:8px;
}

.curso a{
    color:#8ad100;
    text-decoration:none;
    margin-right:12px;
}

.curso a:hover{
    text-decoration:underline;
}
.winamp{
    grid-column:5;
    grid-row:1;
    
    width:280px;
    height:100px;
}
.winamp audio{
    width:100%;
    margin-top:10px;
}
.winamp .contenido{
    text-align:center;
}

.winamp h3{
    margin-bottom:15px;
}

.winamp p{
    margin-bottom:10px;
}
.juegos .contenido{
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
}

.juego{
    text-align:center;
}
.juego img{
    width:90px;
    height:120px;
    object-fit:cover;

    border-radius:6px;
    border:2px solid #8ad100;
    box-shadow:0 0 10px rgba(138,209,0,.4);
}

.juego p{
    margin-top:6px;
    font-weight:bold;
}
@media (max-width: 768px){

    .escritorio{
        display:flex;
        flex-direction:column;
        padding:10px;
        gap:15px;
    }

    .ventana{
        width:100% !important;
        margin-top:0 !important;
    }

    .perfil,
    .sobremi,
    .ciclo,
    .redes,
    .conocimientos,
    .hobbies,
    .steamfriends,
    .juegos,
    .winamp{
        grid-column:auto;
        grid-row:auto;
        width:100%;
    }

    .perfil img{
        width:100px;
        height:100px;
    }

    .perfil h1{
        font-size:18px;
    }

    .juego img{
        width:120px;
    }

    .taskbar{
        position:relative;
    }
}
.ventana{
    animation: aparecer 0.7s ease;
}

@keyframes aparecer{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.barra{
    position:relative;
    overflow:hidden;
}

.barra::after{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:50%;
    height:100%;
    background:rgba(255,255,255,.25);
    transform:skewX(-25deg);
}

.barra:hover::after{
    animation: brillo 0.8s ease;
}

@keyframes brillo{
    from{
        left:-100%;
    }
    to{
        left:150%;
    }
}
.friend img{
    animation: flotar 3s ease-in-out infinite;
}

@keyframes flotar{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-4px);
    }
    100%{
        transform:translateY(0);
    }
}
.juego img{
    transition:0.3s;
}

.juego img:hover{
    transform:scale(1.08);
}
.inicio{
    animation: pulsar 2s infinite;
}

@keyframes pulsar{
    0%{
        box-shadow:0 0 10px rgba(105,216,79,.5);
    }
    50%{
        box-shadow:0 0 20px rgba(138,255,90,.9);
    }
    100%{
        box-shadow:0 0 10px rgba(105,216,79,.5);
    }
}