@font-face{
  font-family:'VHS';
  src: url("https://wyseckia.neocities.org/rpg.ttf");
  }
  
        /* --- [ SYSTEM VARIABLES ] --- */
        :root {
            --term-bg: #050505;
            --term-green: #ffffff;
            --term-dark-green: #888888;
            --term-dim: #3b3b3b;
            --term-blue:#00ffff;
             --green:#00ff00;
        }

        /* --- [ CRT MONITOR EFFECT ] --- */
        body {
          image-rendering: pixelated;
          font-smoothing:none;
   background: linear-gradient(0deg,rgba(2, 0, 36, 1) 0%, rgba(0, 0, 255, 1) 100%);
            color: var(--term-green);
            font-family: 'VHS';
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
  .intro{
    margin:0;
    }     
    
     
    .c-obj {
  display: flex;
  flex-direction: row ;
  align-items: flex-start;
  justify-content: center;
  flex-wrap:wrap ;
      gap: 15px;
       width: 100%;
}  
.c-text{text-align:center}

  
::after {
  box-sizing: border-box;
}
        /* --- [ MAIN TERMINAL WINDOW ] --- */
        .terminal-container {
            width: calc(100%-128px);
            max-width: 800px;
border-image: url("/box.png") 24 32 24 32 fill / 24px 32px 24px 32px;
padding: 24px 32px 24px 32px;
border-image-repeat: round;
            background-color: rgba(0,0,0,0);
            position: relative;
            z-index: 1;
        }

        /* --- [ HEADER & ASCII ] --- */

        .sys-header {
            border-bottom: 1px dashed var(--term-green);
            padding-bottom: 10px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            text-transform: uppercase;
            font-weight: bold;
        }

        /* --- [ BLINKING CURSOR EFFECT ] --- */
        .typewriter {
            display: inline-block;
        }
        .typewriter::after {
            content: '█';
            animation: blink 1s step-start infinite;
        }
        @keyframes blink {
            50% { opacity: 0; }
        }

        /* --- [ LAYOUT GRID ] --- */
        .grid-layout {
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: 20px;
        }

        /* --- [ LEFT COLUMN: PFP & STATS ] --- */
        
        .square {
  width: 100px;
  height: 100px;
  flex-shrink: 0; /* Prevents the square from squishing if the window shrinks */
}

.rest-space {
  flex: 1; /* Forces this div to grow and take up all remaining width */
}
 .stat-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .bar-container {
            width: 100%;
            height: 15px;
            background-color: #000;
            border: 2px solid var(--term-green);
            margin-bottom: 15px;
            position: relative;
        }

        .hp-bar {
            height: 100%;
            background:url("/hp.png");
            background-size:contain;
            width: 100%; /* Change this to lower HP */
        }

        .mp-bar {
            height: 100%;
                      background:url("/mp.png");
            background-size:contain;
            width: 40%; /* Change this to lower MP */
        }

.item-list{
  list-style: none;
  margin: 0;
  padding: 0;
  }

        .item::before {
    content: ""; /* Required to make the pseudo-element render */
    display: inline-block;
    width: 1em;   /* Set your desired width */
    height: 1em;  /* Set your desired height */
    
    /* Background setup */
    background-image: url('/cursor.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Hide by default */
    opacity: 0; 
}

.item:hover::before {
    /* Reveal on hover */
    opacity: 1; 
}

        .stat-block {
          border-image: url("/box-small.png") 12 12 12 12 fill / 12px 12px 12px 12px;
padding: 12px 12px 12px 12px;
 font-size: 12px;
           
            margin-bottom: 15px;
        }

        .stat-block div {
            margin-bottom: 5px;
        }

        /* --- [ RIGHT COLUMN: DATA & AUDIO ] --- */
        .data-panel h2 {
            margin-top: 0;
            font-size: 18px;
            background: var(--term-green);
            color: #000;
            padding: 2px 10px;
            display: inline-block;
        }

        p {
            line-height: 1.5;
            font-size: 14px;
        }

        a {
            color: var(--term-blue);
            text-decoration: none;
        }

        a:hover {
        }


        /* --- [ MOBILE RESPONSIVENESS ] --- */
        @media (max-width: 600px) {
            .grid-layout {
                grid-template-columns: 1fr;
            }
            .ascii-art {
                display: none; /* Hide complex ASCII on tiny screens */
            }
        }