:root{
      --bg: #2b303b;
      --bg_darker: #1b1f27
      --text: #88c0d0;;
      --panel:#0b1220;
      --accent:#16a34a;
      --muted:#94a3b8;
      --glass: rgba(255,255,255,0.03);
    }
    html,body{
      font-size:62.5%;
      height:100%;
      margin:0;
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
   
    footer {
      text-align: center;
      padding: 3px;
      background-color: var(--bg-darker);
      color: white;
   }
   
   .background-cover {
      background-image:url('../img/logos/kali-layers.png');
      height: 100vh; 
      width: 100%; 
      background-size: cover;
      background-position: center center; 
      position: fixed; 
      top: 0; 
      z-index: -1; 
   }
    .titlebar{
      user-select: none;
      cursor: auto; 
      display:flex;
      align-items:center;
      gap:12px;
      padding:14px 16px;
      background: var(--bg);
      border-bottom:1px solid rgba(255,255,255,0.02);
    }
    .titlebar-kali {
      background: #2b303b;
      padding: 8px 12px;
      cursor: move;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #88c0d0;
      font-size: 1.4rem;
    }
    .window-close {
      background: none;
      border: none;
      color: #6bc6ff;
      font-size: 1.4rem;
      cursor: pointer;
    }
    .dots{display:flex;gap:8px}
    .dot{width:12px;height:12px;border-radius:50%; cursor:auto}
    .dot.red{background:#ff645a;}
    .dot.yellow{background:#ffbf2e;}
    .dot.green{background:#16a34a; }
    .title{font-weight:700; font-size:1.4rem; color:var(--muted); margin-left:auto;}
    
    .content{padding:28px 26px;} 
    h1{margin:0 0 8px 0;font-size:2rem;letter-spacing:-0.3px;}
    p.lead{margin:0 0 18px 0;color:var(--muted);}
    
    .card{
      background:var(--glass);
      border-radius:10px;
      padding:18px;
      display:flex;
      align-items:center;
      gap:14px;
      border:1px dashed rgba(255,255,255,0.03);
    }
    .social-icon {
      width:32px;
      height:32px; 
      color: white;
      transition: transform 0.2s ease, color 0.2 ease;
    }
    .social-icon:hover {
      color:var(--accent); 
      transform:scale(1.1);
    }
    .avatar{
      width:64px;height:64px;border-radius:10px;
      background:linear-gradient(135deg,#0ea5a3,#6366f1);
      display:flex;align-items:center;justify-content:center;font-weight:800;font-size:2rem;color:white;
      box-shadow: 0 6px 18px rgba(2,6,23,0.6);
      pointer-events: none;
    }
    .info{flex:1;}
    .meta{font-family:monospace;background:rgba(0,0,0,0.12);padding:8px;border-radius:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .meta button{
      background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px;color:#eaf2ff;
      font-weight:600;cursor:pointer;font-family:inherit;
    }
    .meta .value{font-weight:700; color:#f8fafc;}
    .small{font: size 1.2rem;;color:var(--muted);margin-top:8px}
    .copy-tip{font-size:1.2rem;color:#a3e635;margin-left:8px;font-weight:700}
    .folder-name{font-weight:bold; color:#0b1220}
    
    .footer{padding:14px 26px;border-top:1px solid rgba(255,255,255,0.02);display:flex;gap:12px;align-items:center;justify-content:flex-end;}
    .ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:10px 14px;border-radius:8px;color:var(--muted);cursor:pointer}
    .primary{background:linear-gradient(90deg,var(--accent),#059669);border:none;padding:10px 14px;border-radius:8px;color:white;font-weight:700;cursor:pointer}
    
    /* tiny responsive tweak */
    @media (max-width:420px){
      .avatar{width:56px;height:56px}
    }
    .tile {
    width: 150px;
    height: 150px;
    background: paleturquoise;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 12px;
    cursor: grab;
    font-family: sans-serif;
    }
    .window {
    width: min(540px, 94%);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    overflow:hidden;
    background:#1b1f27;
    cursor: auto;
		position: absolute;
    align-self: flex-end;
    }
    .window.minimized .content,
    .window.minimized .footer {
      display: none;
    }

    .window.minimized {
      height: auto;
    }
    .window-kali {
      position: absolute;
      align-self: center; 
      /* top: 120px;
      left: 150px; */
      width: 50rem;
      background: #1b1f27;
      border: 2px solid #2e3440;
      border-radius: 8px;
      box-shadow: 0 0 25px rgba(0,0,0,.8);
      transition: opacity 0.15s ease; 
    }
    .hidden {
        opacity: 0; 
        pointer-events: none; 
    }
    .folder {
      top: 0; 
      left: 0; 
      width: 5rem; 
      height: 5rem; 
      justify-self:left;
      align-items: center;
    }
    .folder:hover {
    transform: scale(1.07);
    }
    .folder:active {
      transform: scale(0.95); 
    }
    .folder img {
      width: 100%;
      height: 100%; 
      pointer-events: none;
      user-select: none; 
    }
    .folder span {
      display: block; 
      margin-top: 6px; 
      font-size: 1.2rem; 
    }
    .file {
      padding: 6px;
      border-radius: 4px;
      cursor: pointer;
    }

    .file:hover {
      background: #2e3440;
    }
    .file-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }
  .desktop { 
    display: grid; 
    grid-template-columns: auto auto auto; 
    gap: 3rem;
    padding: 4rem; 
  }
  .desktop div {
    padding: 1rem;
    text-align: center;
    
  }

/* Adjust screen for when screen scales to certain breakpoints */
/* Make everything for mobile use first then, media queries for the browser version */
/* Tailwind uses breakpoint prefixes (sm, md, lg, xl, 2xl), not media queires */
/* Breakpoint guideline: <600px, 601px, 768px, 992px, 1200px */

@media (min-width: 601px) {
  /* .desktop {
   display: flexbox;
    width: 100%; 
  } 
  */
  .folder {
    width: 7rem; 
    height: 7rem; 
  }
}
@media (min-width: 768px) {
  /* .desktop {
  } */
  .folder {
    width: 9rem; 
    height: 9rem; 
  }
}
@media (min-width: 992px) {
  .desktop {
    display: flex; 
    border-color: grey; 
    /* width: 100%; */
  }
}