* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body { 
     font-family: Arial, sans-serif;
     background-color: #0b1120;
     color: #e5e7eb;
     line-height: 1.6;
     overflow-x: hidden;
}
header {
    text-align: center;
    padding: 60px 20px 30px;
    border-bottom: 1px solid
#1e293b;
     background: radial-gradient(circle at center, rgba(56,189,248,0,08),transparent 55%);
}
 header h1 {
     font-size: 3.5rem;
     margin-bottom: 10px;
}
header h2 {
    color: #ff0000;
    font-size: 1.5rem;
    margin-bottom: 15px;
}
header p {
     color: #94a3b8;
     font-size: 1.1rem;
     max-width: 650px;
     margin: 0 auto;
}
nav {
     margin-top:25px;
     position: sticky;
     top: 0;
     z-index: 100;
     padding: 12px 0;
     background-color: #0b1120;
}
nav a {
     display: inline-block;
     color: #ff0000;
     text-decoration: none;
     margin: 0 8px;
     padding: 10px 20px;
     border: 1px solid #ff0000;
     border-radius: 6px;
}
nav a:hover {
      background-color: #ff0000;
      color: #0b1120;
}
main {
     width: 100%;
     max-width: 1100px;
     margin: 0 auto;
     padding: 50px 30px;
}
section {
  width: 100%;
  margin-bottom: 60px;
}
section h2{
     font-size: 2rem;
     margin-bottom: 20px;
}
article {
     background-color: #111827;
     border: 1px solid #1e293b;
     border-radius: 10px;
     padding: 25px;
     margin-bottom: 20px;
}
#about p {
     max-width: 900px;
     color: #cbd5e1;
}
#projects {
     display: grid;
     grid-template-columns: repeat(2,minmax(0,1fr));
     gap:20px;
}
#projects h2 {
    grid-column: 1 / -1;
}
article{
    width: 100%;
    background-color: #111827;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 25px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
article:hover{
     transform: translateY(-5px);
     border-color: #ec0a0a;
}
article h3 {
     margin-bottom: 10px;
}
article p {
     color: #94a3b8;
}
u1 {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
li {
     background-color: #111827;
     border: 1px solid #1e293b;
     padding: 8px 14px;
     border-radius: 20px;
}
a{
  color:#ff0000;
}
a:hover {
     color: #ff0000;
}
footer {
   text-align: center;
   padding: 30px;
   border-top:1px solid #1e293b;
   color: #64748b;
}
aricle a {
     display: inline-block;
     margin-top: 15px;
     color: #ff0000;
     text-decoration: none;
     font-weight: bold;
}
article a:hover {
      text-decoration: underline;
}

@media (max-width: 700px) {
       header h1 {
            font-size: 2.2rem;
       }
       main {
           padding: 40px 20px;
       }
       #projects {
            grid-template-columns: 1fr;
        }
        .focus.grid {
             grid-template-columns: fr;
        }
        .terminal-content {
            font-size: 0.85rem;
            overflow-x: auto;
            }
        nav{
             display: flec;
             flex-wrap: wrap;
             justify-content: center;
             gap: 8px;
             }
        nav a {
           margin: 0;
           }
}
.terminal {
    width: 100%;
    max-width: 650px;
    margin: 35px auto 0;
    background-color: #020617;
    border: 1px solid #1e293b;
    border-radius: 10px;
    text-align: left;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0.3);
    }
.terminal-top{
      display: flex;
      gap: 7px;
      padding: 12px 15px;
      background-color: #111827;
      border-bottom: 1px solid #1e293b;
      }
.terminal-top span{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #64748b;
      }
.terminal-content {
       padding: 20px;
       font-family: monospace;
       font-size: 0.95rem;
       overflow-wrap: anywhere;
       }
.terminal-content p {
         margin-bottom: 8px;
         }
.terminal-content p span {
       color: #ff0000;
       }
.terminal-content p:nth-child(even)
{
   color: #94a3b8;
}
.terminal-content .cursor {
    display: inline-block;
    color: #ff0000;
    animation: blink ls steps(1) infinite;
}
@keyframes blink {
   0%, 49% {
       opacity: 1;
   }
   50%, 100% {
        opacity: 0;
   }
}     
.focus-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0, 1fr));
    gap: 20px;
    }
.focus-item {
     background-color: #111827;
     border: 1px solid #1e293b;
     border-radius: 10px;
     padding: 25px;
     transition: transform 0.2s ease,border-color 0.2s ease;
     }
.focus-item:hover {
     transform: translateY(-5px);
     border-color: #ff0000;
}
.focus-item h3 {
    margin-bottom: 10px;
}
.focus-item p {
    color: #94a3b8;
}