* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Lilex", monospace;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}
body {
  background: #0d0d0d;
}
.main-container { /*layout tipo blog*/
  max-width: 1200px;
  margin: 20px auto;
}

.navbar {
    margin: 30px 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* LOGO */
.header-icon {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  background-color: #2cf5a9;
  opacity: 0.9;
}
.navbar h5 {
    color: #2cf5a9;
}

.navbar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.3s;
}

.navbar-brand:hover {
  opacity: 0.75;
}

/*- - - DECORATIVE LINE - - -*/
.decorative-line {
  width: 100%;
  height: 1px;
  background: #2cf5a9;
}

/*--- HACKTHEBOX TITLE ---*/
.title-ctn {
    border: 1px solid rgb(44, 245, 169, 0.5);
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.title-ctn h1 {
  font-family: "Wallpoet", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 65px;
  color: #2cf5a9;
  letter-spacing: 2px;
}
.border-box-2{
  width: 1000px;
  height: 300px;
  border: 1px rgba(44, 245, 169, 0.8) solid;
  overflow:hidden;
  padding: 10px;
}
.border-box-3{
  width: 550px;
  height: 300px;
  border: 1px rgba(44, 245, 169, 0.8) solid;
  overflow:hidden;
  padding: 10px;
}
.globe-geometry {
  opacity: 0.8;
}
.subtitle-ctn {
    padding: 10px;
}

/*--- HACKTHEBOX TABLE ---*/
.projects-section{
  margin: 20px 0px 20px 0px;
  color:#2cf5a9;
}

/* TABLE */
.cyber-table{
display:flex;
flex-direction:column;
gap:14px;
}

/* ROW */
.cyber-row{
display:grid;

grid-template-columns:
80px   /* icon */
120px  /* title */
100px  /* os */
100px  /* difficulty */
120px  /* category */
1fr    /* technique */
180px; /* button */

align-items:center;

gap:20px;

padding:22px;

border:1px solid rgba(44,245,169,.18);

background:
rgba(44,245,169,.03);

backdrop-filter:blur(4px);

position:relative;

overflow:hidden;

transition:.3s;
}

/* DISTORSION */
.cyber-row::before{
content:"";
position:absolute;
top:-100%;
left:0;
width:100%;
height:2px;
background:#2cf5a9;
opacity:.35;
animation:
scannerLine 6s linear infinite;
}

/* HOVER */
.cyber-row:hover{
border-color:#2cf5a9;
transform:
translateY(-2px);
box-shadow:
0 0 15px rgba(44,245,169,.15);
}

/* ICON */
.project-icon{
display:flex;
justify-content:center;
align-items:center;
}

.project-icon img{
width:55px;
filter:
drop-shadow(0 0 5px #2cf5a955);
transition:.3s;
}

/* ICON GLITCH */
.cyber-row:hover img{
animation:
glitch .15s infinite alternate;
}

/* TITLE */
.project-title{
font-size:14px;
font-weight:600;
color:#2cf5a9;
line-height:1.5;
}

/* DESCRIPTION */
.project-description{
font-size:13px;
color:rgba(44,245,169,.75);
line-height:1.7;
}

/* LINK */
.project-link{
display:flex;
justify-content:center;
}

/* GREEN BUTTON */
.project-link a{
text-decoration:none;
color:#2cf5a9;
border: 1px solid rgba(44,245,169,.35);
padding: 10px 18px;
font-size:12px;
letter-spacing:1px;
transition:.3s;
}
/* BUTTON HOVER */
.project-link a:hover{
background:#2cf5a9;
color:#000;
box-shadow:
0 0 10px #2cf5a9,
0 0 20px rgba(44,245,169,.4);
}

/* RED BUTTON */
.red-button {
  text-decoration:none;
  color:#f52c2c;
  border: 1px solid rgba(245, 44, 44, 0.558);
  padding: 10px 18px;
  font-size:12px;
  font-weight: bold;
  letter-spacing:1px;
  transition:.3s;
}
/* BUTTON HOVER */
.red-button:hover{
background:#f52c2c;
color:#000;
box-shadow:
0 0 10px #f52c2c,
0 0 20px rgba(245, 44, 44, 0.35);
}

/* DESCRIPTION */
.project-os,
.project-difficulty,
.project-category,
.project-technique{
font-size:13px;
color:rgba(44,245,169,.75);
line-height:1.6;
}
.difficulty-easy{
color:#2cf5a9;
}
.difficulty-medium{
color:#ffd166;
}
.difficulty-hard{
color:#ff6b6b;
}
.difficulty-insane{
color:#ff006e;
}

/* LINK */
.project-link{
display:flex;
justify-content:center;
}

.project-link a{
text-decoration:none;
color:#2cf5a9;
border: 1px solid rgba(44,245,169,.35);
padding: 10px 18px;
font-size:12px;
letter-spacing:1px;
transition:.3s;
}

/* BUTTON HOVER */
.project-link a:hover{
background:#2cf5a9;
color:#000;
box-shadow:
0 0 10px #2cf5a9,
0 0 20px rgba(44,245,169,.4);
}

/* GLITCH */
@keyframes glitch{

0%{
transform:translateX(0px);
}

100%{
transform:translateX(1px);
}
}

/*--- BLOG TABLE ---*/
.cyber-row-blog{
display:grid;
grid-template-columns:
80px 240px 1fr 140px;
align-items:center;
gap:20px;
padding:22px;
border:
1px solid rgba(44,245,169,.18);
background:
rgba(44,245,169,.03);
backdrop-filter:blur(4px);
position:relative;
overflow:hidden;
transition:.3s;
}

/* DISTORSION */
.cyber-row-blog::before{
content:"";
position:absolute;
top:-100%;
left:0;
width:100%;
height:2px;
background:#2cf5a9;
opacity:.35;
animation:
scannerLine 6s linear infinite;
}

/* HOVER */
.cyber-row-blog:hover{
border-color:#2cf5a9;
transform:
translateY(-2px);
box-shadow:
0 0 15px rgba(44,245,169,.15);
}

@keyframes scannerLine {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}

/*- - - DARK FORUMS PAGE - - -*/
.pagination{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:30px;
}

.pagination button{
background:transparent;
border:1px solid rgba(44,245,169,.3);
color:#2cf5a9;
padding:10px 20px;
cursor:pointer;
transition:.3s;
}

.pagination button:hover{
background:#2cf5a9;
color:#000;
box-shadow:
0 0 10px #2cf5a9;
}

#pageInfo{
color:#2cf5a9;
font-size:13px;
letter-spacing:2px;
}

/*- - - FOOTER - - -*/
.cyber-footer{
  max-width: 1200px;
  margin: 20px auto;

padding:50px 20px;
border-top: 1px solid rgba(44,245,169,.25);
display:flex;
flex-direction:column;
align-items:center;
gap:25px;
position:relative;
overflow:hidden;
}

/* DISTORSION */
.cyber-footer::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:2px;
background:#2cf5a9;
opacity:.25;
animation: footerScan 8s linear infinite;
}

/* STATUS */
.footer-status{
display:flex;
align-items:center;
gap:10px;
font-size:12px;
letter-spacing:2px;
color:#2cf5a9;
}

/* DOT */
.status-dot{
width:10px;
height:10px;
border-radius:50%;
background:#2cf5a9;
box-shadow:
0 0 5px #2cf5a9,
0 0 15px #2cf5a9;
animation: statusPulse 2s infinite;
}

/* AUTHOR */
.footer-author{
font-size:15px;
letter-spacing:1px;
color:#2cf5a9;
opacity:.9;
}

/* CONTACTS */
.footer-contacts{
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
}

/* LINKS */
.footer-contacts a{
text-decoration:none;
color:#2cf5a9;
padding:10px 18px;
border: 1px solid rgba(44,245,169,.25);
font-size:12px;
letter-spacing:2px;
transition:.3s;
position:relative;
overflow:hidden;
}

/* HOVER */
.footer-contacts a:hover{
background:#2cf5a9;
color:#000;
box-shadow:
0 0 10px #2cf5a9,
0 0 20px rgba(44,245,169,.4);
transform:
translateY(-2px);
}

/* SCAN */
@keyframes footerScan{

0%{
transform:
translateX(-100%);
}

100%{
transform:
translateX(100%);
}
}

/* STATUS */
@keyframes statusPulse{

0%{
opacity:.5;
}

50%{
opacity:1;
}

100%{
opacity:.5;
}
}

/* ============================================
   RESPONSIVE — TABLET (max-width: 900px)
   ============================================ */
@media (max-width: 900px) {

  body {
    overflow-x: hidden;
  }

  .main-container {
    max-width: 100%;
    padding: 0 24px;
    margin: 16px auto;
  }

  .main-container > br {
    display: none;
  }

  .navbar {
    margin: 20px 0 16px;
  }

  .navbar h5 {
    font-size: 15px;
  }

  /* Title hero block */
  .title-ctn {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 12px;
  }

  .title-ctn h1 {
    font-size: 44px;
    text-align: center;
    letter-spacing: 1px;
  }

  .subtitle-ctn {
    padding: 8px 4px;
  }

  .border-box-2,
  .border-box-3 {
    width: 100%;
    height: 220px;
  }

  .globe-geometry {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* HTB table */
  .projects-section {
    margin: 16px 0;
  }

  .cyber-row {
    grid-template-columns: 60px 1fr 1fr;
    gap: 12px 14px;
    padding: 18px;
    text-align: left;
  }

  .project-icon {
    grid-row: 1 / span 3;
    align-self: start;
  }

  .project-title {
    grid-column: 2 / -1;
  }

  .project-os,
  .project-difficulty {
    grid-column: 2;
  }

  .project-category {
    grid-column: 3;
  }

  .project-technique {
    grid-column: 1 / -1;
    padding-top: 4px;
    border-top: 1px solid rgba(44, 245, 169, 0.12);
    margin-top: 4px;
  }

  .project-link {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 6px;
  }

  /* Blog table */
  .cyber-row-blog {
    grid-template-columns: 60px 1fr;
    gap: 12px 16px;
    padding: 18px;
    text-align: left;
  }

  .cyber-row-blog .project-icon {
    grid-row: 1 / span 2;
  }

  .cyber-row-blog .project-title {
    grid-column: 2;
  }

  .cyber-row-blog .project-description {
    grid-column: 1 / -1;
  }

  .cyber-row-blog .project-link {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  /* Footer */
  .cyber-footer {
    padding: 40px 16px;
  }

  /* ERROR 404 PAGE */
    .error-box{
    padding:50px 30px;
  }

  .error-code{
    font-size:90px;
  }
}

/* ============================================
   RESPONSIVE — MOBILE (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {

  .main-container {
    padding: 0 16px;
    margin: 12px auto;
  }

  .navbar {
    margin: 14px 0 12px;
  }

  .navbar h5 {
    font-size: 14px;
  }

  .title-ctn h1 {
    font-size: 28px;
    line-height: 1.15;
  }

  .border-box-2,
  .border-box-3 {
    height: 180px;
    padding: 8px;
  }

  /* HTB rows — tarjeta apilada */
  .cyber-row {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 10px;
    padding: 16px;
  }

  .cyber-row .project-icon {
    grid-row: auto;
    justify-content: center;
  }

  .cyber-row .project-title,
  .cyber-row .project-os,
  .cyber-row .project-difficulty,
  .cyber-row .project-category,
  .cyber-row .project-technique,
  .cyber-row .project-link {
    grid-column: 1;
  }

  .cyber-row .project-technique {
    border-top: none;
    margin-top: 0;
    font-size: 12px;
  }

  .cyber-row .project-os,
  .cyber-row .project-difficulty,
  .cyber-row .project-category {
    font-size: 12px;
  }

  .cyber-row .project-link {
    justify-content: center;
    margin-top: 8px;
  }

  .cyber-row .project-link a {
    display: inline-block;
    width: 100%;
    max-width: 220px;
    text-align: center;
  }

  .project-icon img {
    width: 48px;
  }

  /* Blog rows */
  .cyber-row-blog {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 10px;
    padding: 16px;
  }

  .cyber-row-blog .project-icon,
  .cyber-row-blog .project-title,
  .cyber-row-blog .project-description,
  .cyber-row-blog .project-link {
    grid-column: 1;
    grid-row: auto;
  }

  .cyber-row-blog .project-link {
    justify-content: center;
    margin-top: 6px;
  }

  .cyber-row-blog .project-link a {
    display: inline-block;
    width: 100%;
    max-width: 200px;
    text-align: center;
  }

  .cyber-row-blog {
    font-size: 12px;
    line-height: 1.6;
  }

  .project-description {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
  }


  /* Footer */
  .cyber-footer {
    padding: 32px 12px;
    gap: 18px;
  }

  .footer-status {
    font-size: 10px;
    letter-spacing: 1px;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
  }

  .footer-author {
    font-size: 13px;
    text-align: center;
  }

  .footer-contacts {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .footer-contacts a {
    display: block;
    text-align: center;
    width: 100%;
  }

  /* ERROR 404 PAGE */
  .error-box{
    padding:40px 20px;
  }

  .error-code{
    font-size:70px;
  }

  .error-description{
    font-size:13px;
  }

  .return-home-btn{
    width:100%;
    max-width:240px;
  }
}

/* ==========================================
   ERROR PAGE 404
   ========================================== */
.error-404-section{
  min-height:65vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:60px 0;
}

.error-box{
  width:100%;
  max-width:700px;
  border:1px solid rgba(44,245,169,.25);
  background: rgba(44,245,169,.03);
  backdrop-filter:blur(4px);
  padding:60px 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

/* scanner */
.error-box::before{
  content:"";
  position:absolute;
  top:-100%;
  left:0;
  width:100%;
  height:2px;
  background:#2cf5a9;
  opacity:.35;
  animation: scanner404 6s linear infinite;
}

.error-code{
  font-family:"Wallpoet", sans-serif;
  font-size:120px;
  color:#2cf5a9;
  text-shadow:
    0 0 10px #2cf5a9,
    0 0 30px rgba(44,245,169,.35);
  animation: glitch404 5s infinite;
}

.error-status{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  color:#2cf5a9;
  letter-spacing:2px;
  margin-bottom:20px;
}

.error-description{
  color:rgba(44,245,169,.8);
  max-width:450px;
  margin:0 auto 40px;
  line-height:1.8;
}

/* button */
.return-home-btn{
  display:inline-block;
  text-decoration:none;
  color:#2cf5a9;
  border: 1px solid rgba(44,245,169,.35);
  padding:14px 28px;
  transition:.3s;
}

.return-home-btn:hover{
  background:#2cf5a9;
  color:#000;
  box-shadow:
    0 0 10px #2cf5a9,
    0 0 20px rgba(44,245,169,.4);
  transform:
    translateY(-2px);
}

/* scanner */
@keyframes scanner404{
  0%{
    top:-100%;
  }
  100%{
    top:100%;
  }
}

/* glitch */
@keyframes glitch404{
  0%,95%,100%{
    transform:translateX(0);
  }
  96%{
    transform:translateX(-2px);
  }
  97%{
    transform:translateX(2px);
  }
  98%{
    transform:translateX(-1px);
  }
}