body{
  background-image:url("background.gif");
  animation:flicker 8s infinite;}
  @keyframes flicker{

0%{
opacity:1;
}

96%{
opacity:1;
}

97%{
opacity:0.98;
}

98%{
opacity:1;
}

100%{
opacity:0.99;
}
  
  
  }
/* DESKTOP */

.desktop-container{

display:flex;

justify-content:space-between;

align-items:center;

height:100vh;

padding:0 8%;

}

/* SIDEBAR */

.sidebar{

width:25%;

}

/* TITULO */

.sidebar h1{

font-size:90px;

color:#d10000;

margin:0;

letter-spacing:6px;

text-shadow:
0 0 10px red,
0 0 30px rgba(255,0,0,0.5);

}

/* DESCRIPCION */

.desc{

font-size:22px;

color:#999;

margin-top:10px;

margin-bottom:40px;

line-height:1.4;

}

/* MENU */

.menu{

display:flex;

flex-direction:column;

gap:20px;

}

.menu p{

font-size:30px;

cursor:pointer;

transition:0.3s;

color:white;

}

.menu p:hover{

color:#d10000;

transform:
translateX(10px)
skew(-5deg);

text-shadow:
0 0 10px red;

letter-spacing:3px;

}

/* IMAGEN */

.main-image{

width:35%;

display:flex;

justify-content:center;

}

.main-image img{

width:100%;

max-width:500px;

opacity:0.75;

filter:
grayscale(100%)
contrast(120%)
drop-shadow(0 0 20px red);

}

/* WIDGETS */

.widgets{

width:20%;

display:flex;

flex-direction:column;

gap:20px;
align-items:flex-start;

}

/* CAJAS */

.widget{

background:rgba(15,15,15,0.85);

border:
2px solid #555;

outline:
1px solid #999;

padding:15px;

box-shadow:
inset 0 0 10px rgba(255,255,255,0.05),
0 0 15px rgba(255,0,0,0.15);

position:relative;

width:110px;

max-width:220px;


}

/* TITULOS */

.widget h2{

margin-top:0;

color:#d10000;

font-size:35px;

}

/* TEXTO */

.widget p{

font-size:25px;

color:#ccc;

}
/* TASKBAR */

.taskbar{

position:fixed;

bottom:0;
left:0;

width:100%;

height:25px;

background:rgba(20,20,20,0.95);

border-top:2px solid #666;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 15px;

box-sizing:border-box;

z-index:999;

backdrop-filter:blur(5px);

}

/* START */

.start{

background:#200;

border:1px solid #777;

padding:5px 5px;

font-size:13px;

color:white;

box-shadow:
inset 0 0 10px rgba(255,0,0,0.2);

}

/* ICONOS */

.task-icons{

display:flex;

gap:20px;

font-size:22px;

color:#aaa;

}

/* RELOJ */

.clock{

font-size:22px;

color:#d10000;

}
/* IMAGENES FLOTANTES */

.floating-image{

position:absolute;

border:
2px solid #555;

outline:
1px solid #999;

background:black;

padding:5px;

box-shadow:
0 0 15px rgba(255,0,0,0.2);

overflow:hidden;

}

/* IMAGENES */

.floating-image img{

display:block;

width:140px;

height:auto;

opacity:0.75;

filter:
grayscale(100%)
contrast(120%);

}

/* POSICIONES */

.img1{

top:10%;

right:8%;

width:180px;

transform:rotate(4deg);

}

.img2{

bottom:15%;

left:35%;

width:220px;

transform:rotate(-3deg);

}
.overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.03),
rgba(255,255,255,0.03) 1px,
transparent 1px,
transparent 3px
);

opacity:0.25;
mix-blend-mode:screen;

}