body {background:repeating-linear-gradient(0deg, rgba(0,0,0,.2) 1px, transparent 2px, transparent 6px),          repeating-linear-gradient(90deg, rgba(0,0,0,.2) 1px, transparent 2px, transparent 1px),         radial-gradient(#000000, #222); }*{     margin:0;     padding:0;     box-sizing:border-box;     -webkit-user-select:none;     user-select:none; } :before,  :after{     content:'';     position:absolute; } :root{     --font-1: 'Archivo Black', sans-serif;     --font-2: 'Teko', sans-serif;     --font-3: 'Orbitron', sans-serif;     --font-4: 'Rancho', cursive;     --font-5: 'VT323', monospace;     --bg: repeating-linear-gradient(0deg, rgba(255,255,255,.2) 1px, transparent 2px, transparent 5px),         repeating-linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 2px, transparent 5px),          linear-gradient(#333, #888);     --bg-hover: repeating-linear-gradient(0deg, rgba(255,255,255,.2) 1px, transparent 2px, transparent 5px),         repeating-linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 2px, transparent 5px),          linear-gradient(#fc65bd, #18d5dd);     --height: 480px;     --pages: 4; } a{     text-transform:uppercase;     text-decoration:none;     display:inline-block;     text-align:center; } span{     display:inline-block; } h2, h3, h4{     font-weight:50; } #main{     width:100%;     height:100vh;     position:relative;     font-family:var(--font-2);     font-size:1em;     color:#222;     overflow:hidden; } .container{     width:1080px;     height:100vh;     position:relative;     margin:0 auto; } .menu{     width:160px;     height:180px;     position:absolute;     left:-100px;     top:50%;     transform:translateY(-50%);     background:#000;     padding:1px;     display:flex;     flex-direction:column;     justify-content:space-between;     animation:mover 1s ease-out;     animation-fill-mode:forwards;     opacity:0;     z-index:50; } .btn-menu{     width:100%;     height:40px;     line-height:40px;     background:var(--bg);     box-shadow:0 0 0 4px rgba(0,0,0,.5) inset, 0 0 1px rgba(0,0,0,.3);     color:#fff;     transition:all .3s linear;     position:relative;     left:0; } .btn-menu:before{     width:20px;     height:10px;     background:#18d5dd;     top:calc(50% - 5px);     right:-5px;     z-index:-1; } .btn-menu:after{     width:0;     height:0;     border-left:solid 10px #fc65bd;     border-top:solid 10px transparent;     border-bottom:solid 10px transparent;     right:-15px;     top:calc(50% - 9px); } .btn-menu:hover{     animation:pulse  .3s ease-in-out;     background:var(--bg-hover);     color:#000; } .btn-menu:nth-of-type(1){     background:var(--bg-hover);     color:#000; } @keyframes pulse{     50%{         left:25px;     } } .main-content{     width:700px;     height:490px;     position:absolute;     top:50%;     left:50%;     transform:translate(-50%, -250%);     background:repeating-linear-gradient(45deg, rgba(0,0,0,.1) 1px, transparent 3px, transparent 4px), #fc65bd;     box-shadow:0 0 0 5px rgba(0,0,0,.8) inset, 0 0 30px 10px rgba(0,0,0,.2);     animation:down 3s ease-out;     animation-fill-mode:forwards; } @keyframes mover{     100%{         left:60px;         opacity:1;     } } @keyframes down{     100%{         transform:translate(-50%, -50%);     } } .header{     position:absolute;     height:85px;     top:-45px;     z-index:40; } .title{     font-family:var(--font-1);     font-size:1em;     line-height:1px;     color:#d6457b;     text-shadow:1px 1px 1px rgba(0,0,0,.4); } .sub-title{     width:200px;     height:40px;     background:#222;     box-shadow:0 0 0 4px rgba(02,0,0,.8) inset;     margin-top:5px;     color:#18d5dd;     line-height:40px;     font-size:1em;     padding-left:10px; } .main-page{     width:690px;     height:var(--height);     margin:5px;     position:relative;     overflow:hidden; } .pages{     width:100%;     height:var(--height);     position:absolute;     top:0; } .home, .friend, .video, .chat{     position:absolute;     width:100%;     height:var(--height);     top:-480px;     background:repeating-linear-gradient(45deg, rgba(0,0,0,.1) 1px, transparent 3px, transparent 4px), #000000;     transition:all .5s ease-out;     overflow:hidden; } .home{     background:#080808;     top:0; }  #content-1:target .home{     top:0;     transition-delay:.8s; } #content-1:target .friend, .video, .chat{     top:-480px; } #content-1:target .btn-menu:nth-of-type(1){     background:var(--bg-hover);     color:#000; }  #content-2:target .friend{     top:0;     transition-delay:.8s; } #content-2:target .home, .video, .chat{     top:-480px; } #content-2:target .btn-menu:nth-of-type(2){     background:var(--bg-hover);     color:#000; } #content-2:target .btn-menu:nth-of-type(1){     background:var(--bg);     color:#18d5dd; } #content-2:target .btn-menu:nth-of-type(1):hover{     background:var(--bg-hover);     color:#000; }  #content-3:target .video{     top:0;     transition-delay:.8s; } #content-3:target .home, .friend, .chat{     top:-480px; } #content-3:target .btn-menu:nth-of-type(3){     background:var(--bg-hover);     color:#000; } #content-3:target .btn-menu:nth-of-type(1){     background:var(#fc65bd);     color:#fff; } #content-3:target .btn-menu:nth-of-type(1):hover{     background:var(--bg-hover);     color:#000; }  #content-4:target .chat{     top:0;     transition-delay:.8s; } #content-4:target .home, .friend, .video{     top:-480px; } #content-4:target .btn-menu:nth-of-type(4){     background:var(--bg-hover);     color:#000; } #content-4:target .btn-menu:nth-of-type(1){     background:var(--bg);     color:#fff; } #content-4:target .btn-menu:nth-of-type(1):hover{     background:var(--bg-hover);     color:#000; }  .block{     width:628px;     height:419px;     margin-top:35px;     margin-left:calc(50% - 314px); } .home .block{     text-align:center;     color:#fc65bd;     font-family:var(--font-4); } .home h2{     font-size:2em; } .desc{     font-size:0.8em;     margin-top:1px; } .friend .block{     display:flex;     justify-content:space-between; } .col-img{     width:290px;     height:390px;     position:relative;     margin:15px 25px;     box-shadow:0 0 0 1px #18d5dd;     overflow:hidden; } .col-img img{     position:absolute;     height:100%;     width:auto;     left:0;     transform:translateX(-100px); } .aside{     width:290px;     height:400px;     margin-top:10px; } .aside h2{     border-bottom:solid 1px #222; } .col-friend{     height:355px;     margin-top:10px;     overflow-y:auto; } .row-friend{     width:90%;     height:60px;     margin-bottom:10px;     padding-left:5px;     box-shadow:5px 0 #fc65bd inset;     display:flex; } .row-friend img{     width:44px;     height:60px;     margin:0 6px; } .infor{     width:calc(100% - 61px);     position:relative; } .infor span{     color:#fc65bd; } .infor h4{     font-family:var(--font-1); } .me{     position:absolute;     width:70px;     line-height:29px;     height:26px;     background:#fc65bd;     color:#000;     font-size:.8em;     border-radius:3px;     box-shadow:0 0 0 4px rgba(0,0,0,.2) inset;     bottom:0;     right:30px;     transition:all .3s ease-out; } .me:hover{     color:#fff;     box-shadow:0 0 0 13px rgba(0,0,0,0) inset; } .video .block, .chat .block{     display:flex;     justify-content:center;     align-items:center;     position:relative;     z-index:20; } .box-video{     width:600px;     height:339px;     background:#222;     box-shadow:0 10px #fc65bd;     position:relative; } .box-video:before{     width:80%;     height:50px;     border-radius:50%;     background:#000;     filter:blur(20px);     left:10%;     bottom:-25px;     z-index:-1; } .box-chat{     width:618px;     height:409px;     background:#222;     box-shadow:0 0 0 5px #fc65bd; }
footer {
  text-align: center;
  font-family: var(--font-4); /* Rancho, cursive */
  font-size: 1em;
  letter-spacing: 0.5px;
}

/* Hover para enlaces dentro del footer */
footer a {
  color: #18d5dd;
  text-decoration: none;
  transition: color 0.3s ease;
}
footer a:hover {
  color: #fc65bd;
}
::-webkit-scrollbar{
width:1px;
background:#222;
}
::-webkit-scrollbar-thumb{
background:#18d5dd;
}