:root {
      --folder: #f5e2b8;
      --folder-blue: #84C6E8;
      --folder-edge: #e4d19f;
      --folder-edge-blue: #3182C6;
      --tab: #f3ddaa;
      --tab-blue: #388eb9;
      --paper: #fffdf6;
      --paper-blue: #106b98;
      --ink: #2b2b2b;
      --txt-color:  rgb(202 214 237);  
      --accent: #7b5c20;
      --accent-blue: rgb(202 214 237);
      --shadow: 0 6px 20px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.1);
      --radius: 12px;
      --tw-text-opacity: 1;
    }

    body {
      margin: 0;
      font: 16px/1.5 system-ui, sans-serif;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      background: #f7f4eb;
      background-color: rgb(15 23 42);
      padding: 40px;
      color: var(--txt-color);
      /*color: rgb(202 214 237 / var(--tw-text-opacity));*/
      
      
    }#custom-cursor {
        position: fixed; /* Ensures it stays in viewport */
        pointer-events:none; /* Allows clicks on elements beneath it */
        height: 90vh; /* Adjust size as needed */
        width: 90vh;
        border-radius: 50%; /* Makes it circular */
        background: radial-gradient(
            circle, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.01) 30%,
                    rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.01) 60%); /* Soft radial glow */
        box-shadow: 0px 0px 15px 5px rgba(255, 255, 255, 0.01); /* Stronger outer glow */
        transform: translate(-50%, -50%); /* Centers the cursor element */
        transition: transform 0.1s ease-out; /* Smooth movement */
        z-index: 9999; /* Ensures it's on top */
    }

    h1 {
      margin-bottom: 20px;
    }

    /* Tabs row */
    .tabs {
      display: flex;
      gap: 3px;
      color: var(--accent);
    }

    .tab {
      padding: 12px 20px;
      border-radius: var(--radius) var(--radius) 0 0;
      border: 3px solid var(--folder-edge);
      border-bottom: none;
      background: var(--tab);
      cursor: pointer;
      font-weight: bold;
      box-shadow: inset 0 -4px 8px rgba(0,0,0,0.05);
    }

    .tab.active {
      background: var(--paper-blue);
      color: var(--accent-blue);
      z-index: 2;
    }

    /* Panel */
    .panel {
      border: 8px solid var(--folder-edge);
      
      background: var(--paper);
      /*background-color: #212b40;*/
      padding: 20px;
      border-radius: 0 var(--radius) var(--radius) var(--radius);
      margin-top: -2px;
      display: none;
      box-shadow: var(--shadow);
    }

    .panel.active { display: block; }

    .grid {
      display: grid;
      gap: 14px;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .card {
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 12px;
      padding: 14px;
      background: #fffef8;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1));
      /*box-shadow: 0 1px 5px rgba(0,0,0,0.8);*/
    }
    .muted {color: #8a8282;font-size: .95rem; }



    /*Table Styles*/
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 2.5rem;
      text-align: left;
    } tr, th{
      box-sizing: border-box;
      padding-bottom: 1rem;
      border-bottom: 0.75px solid rgb(255, 255, 255,0.2);
    }
    td{
      padding-top: 1rem;
      padding-bottom: 1rem;
      padding-right: 1rem;
    }
    a {
      color: var(--txt-color);
      text-decoration: none;
    }

    
    /*Skills Section*/
    .skills{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    }.skills a{
    background-color: #e0e0e0;
    --tw-text-opacity: 1;
    background-color: #133051;
    padding: 5px 10px;
    border-radius: 1000px;
    font-size: 14px;
    }.skills a:hover, .skills a:active, .skills a:visited, .skills a:link{
    text-decoration: none;
    pointer-events: none;
    cursor: default;
    color: #2cc4e2;
    }


    /*Arrow Animation*/
    .arrow-body{
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }.arrow{
      position: inherit;
      margin-top:-20px ;
      width : 8px;
      height: 8px;
      border-top: 3px solid var(--txt-color);
      border-left: 3px solid var(--txt-color);
      transform: rotate(-45deg);
    }#HomeBack:hover .arrow{
      animation: arrow-load 1.5s infinite;
    }
    .arrow:nth-child(2){
      margin-left: -1.2rem;
      animation-delay: 0.2s;
    }
    @keyframes arrow-load{
      0%{
        opacity: 0;
        transform: rotate(-45deg) translate(10px,10px);
      }
      50%{
        opacity: 1;
      }
      100%{
        opacity: 0;
        transform: rotate(-45deg) translate(-10px,-10px);
      }
    }

    /*Drop Down Menu*/
    .dropdown-content{
      display: flex;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }.preview-row:hover{
      background-color: rgb(255, 255, 255,0.1);
      
    }.dropdown-content:nth-child(2){
      position: relative;
    }.details-row {
      display: none;
      background-color: #133151c1 ;
    }.details-row {
      font-size: 14px; 
      color: #a9a8a8;;
    }.details-row strong{
      color: var(--txt-color);
      font-size: .95rem; ;
    }

    .details-cell {
      padding: 16px;
      border-right: 5px solid rgb(255, 255, 255,0.75);
    }.project-images{
      object-fit: contain; 
      padding: 1rem; 
      margin: auto;
    }
    .expanded {
      display: table-row;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from {opacity: 0;}
      to {opacity: 1;}
    }


    .prev, .next {
      display: none;
    }


  


    /*Phone Display*/
@media screen and (max-width:900px){
  .project-images img{
    margin: auto;
    justify-content: center;
    align-items: center;
  }td .skills, #Built_With, .skills_sec {
    display: none;
  }tr, th{
      box-sizing: border-box;
      padding-bottom: 1rem;
      border-bottom: 2px solid rgb(255, 255, 255,0.2);
    }


    .slideProjSepSys{
      width: 100%;
      justify-content: center;
      padding: 25px;
    }.details-cell{
      border-right: none;
      padding: 1px;
    }

    /* Next & previous buttons */
  .prev, .next {
    display: block;
    cursor: pointer;
    position: relative;
    top: 50%;
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 5px 5px 0;
    user-select: none;
    margin: auto;
  }
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 5px 0 0 5px;
  }

  /* On hover, add a grey background color */
  .prev:hover, .next:hover {
    background-color: #f1f1f1;
    color: black;
  }
  }