a {
        color: var(--fg);
        text-decoration: none;
    }
    a:link {
        color: var(--fg);
    }
    a:visited {
        color: var(--fg);
    }
    a:focus {
        color: var(--fg);
    }
    a:hover {
        color: var(--fg);
    }
    a:active {
        color: var(--fg);
    }
    div{
        color: var(--fg);
    }
    .grid {
    display: grid;
    grid-template-columns: 5% 62.5% 22.5% 10%; 
    gap: 5px;
    border: rgb(0, 0, 0,0) solid;
    color: aliceblue;
    border-radius: 1vh;
    transition: all 0.15s;
    align-items: center;
    height: 4vh;
    padding-right: 2vw;
    
    }
    .grid:hover{
        transition: all 0.15s;
        background: var(--readme-c);
    }

    .grid div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px;
    border: 1px solid transparent; 
    }

    @media (max-width: 768px){
      .grid {
        display: grid;
        grid-template-columns: 20% 80% 0% 0%; 
        gap: 0px;
        border: rgb(0, 0, 0,0) solid;
        color: aliceblue;
        border-radius: 1vh;
        transition: all 0.15s;
        align-items: center;
        height: 4vh;
        
      }
      .grid div:nth-child(3),
      .grid div:nth-child(4) {
        display: none; 
    }
      
    }


  * {
  transition: background-color 0.1s ease, color 0.1s ease;
}
    .input {
  font-family: "Montserrat", sans-serif;
  width: 40%;
  height: 50%;
  position: absolute;
  font-size: 2vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 1.5px var(--line), 0 0 25px -17px #000;
  border: 0;
  border-radius: 1.5vh;
  background-color: var(--input);
  outline: none;
  color: #bdbecb;
  cursor: text;
  z-index: 0;
  padding-left: 1%;  

}

.input::placeholder {
  color: #bdbecb;
}

.input:hover {
  box-shadow: 0 0 0 2.5px var(--line), 0px 0px 25px -15px #000;
}

.input:active {
  transform: scale(0.999) translate(-50%,-50%);;
}

.input:focus {
  box-shadow: 0 0 0 2.5px var(--line);
}

body{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

}



    :root {
    --bg: #16171d;
    --dc: #2f303d;
    --fg: #fdfeff;
    --input: #16171d;
    --readme-c: #444444;
    --readme-h: #2f303d;
    --footertext: #bdbecb;
    --line: #16171d;
    --inv:1
  }

  [data-theme="light"] {
    --bg: #e4e4e4;
    --dc: #0067d3;
    --fg: #222222;
    --input: #177eca;
    --readme-c: #c3c3c3;
    --readme-h: #0566ce;
    --footertext: #333333;
    --line: #5a93b9;
    
    --inv:0
  }

  :root {
    --file: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg>');
    --mdfile: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/> <path d="M14 2v6h6"/> <text x="5" y="17" style="color: white; z-index:15; font-size: 7px; font-family: sans-serif;">.MD</text> </svg>');
    --zip: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/> <path d="M14 2v6h6" fill="currentColor"/> <rect x="11" y="6" width="2" height="2" fill="white"/> <rect x="11" y="9" width="2" height="2" fill="white"/> <rect x="11" y="12" width="2" height="2" fill="white"/> <rect x="10" y="16" width="4" height="4" rx="0.5" fill="white"/> <path d="M11 16v-1a1 1 0 0 1 2 0v1" fill="none" stroke="white" stroke-width="1" stroke-linecap="round"/> </svg>');
    --folder: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="black" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/> </svg>');
    --iso: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-label="Disc icon"> <circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round" /> <circle cx="12" cy="12" r="1.7" fill="currentColor" /> <path d="M 4 12 A 8 8 0 0 1 12 4" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" /> </svg>');
    --arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" fill="currentColor"> <path d="M32 4l16 16h-10v20a10 10 0 0 1-10 10H20v-8h8a2 2 0 0 0 2-2V20h-10z"/> </svg>');
    --mdreadmeicon: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%209.7998V19.9998M12%209.7998C12%208.11965%2012%207.27992%2012.327%206.63818C12.6146%206.0737%2013.0732%205.6146%2013.6377%205.32698C14.2794%205%2015.1196%205%2016.7998%205H19.3998C19.9599%205%2020.2401%205%2020.454%205.10899C20.6422%205.20487%2020.7948%205.35774%2020.8906%205.5459C20.9996%205.75981%2021%206.04004%2021%206.6001V15.4001C21%2015.9601%2020.9996%2016.2398%2020.8906%2016.4537C20.7948%2016.6419%2020.6425%2016.7952%2020.4543%2016.8911C20.2406%2017%2019.961%2017%2019.402%2017H16.5693C15.6301%2017%2015.1597%2017%2014.7334%2017.1295C14.356%2017.2441%2014.0057%2017.4317%2013.701%2017.6821C13.3568%2017.965%2013.096%2018.3557%2012.575%2019.1372L12%2019.9998M12%209.7998C12%208.11965%2011.9998%207.27992%2011.6729%206.63818C11.3852%206.0737%2010.9263%205.6146%2010.3618%205.32698C9.72004%205%208.87977%205%207.19961%205H4.59961C4.03956%205%203.75981%205%203.5459%205.10899C3.35774%205.20487%203.20487%205.35774%203.10899%205.5459C3%205.75981%203%206.04004%203%206.6001V15.4001C3%2015.9601%203%2016.2398%203.10899%2016.4537C3.20487%2016.6419%203.35774%2016.7952%203.5459%2016.8911C3.7596%2017%204.03901%2017%204.59797%2017H7.43073C8.36994%2017%208.83942%2017%209.26569%2017.1295C9.64306%2017.2441%209.99512%2017.4317%2010.2998%2017.6821C10.6426%2017.9638%2010.9017%2018.3526%2011.4185%2019.1277L12%2019.9998%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E');
    --lamp-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" role="img"> <path fill="currentColor" d="M12 2a6.5 6.5 0 0 0-6.5 6.5c0 2.1 1 3.7 1.9 4.8.9 1 1.6 1.9 1.6 3.7V18a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-.1c0-1.8.7-2.7 1.6-3.7.9-1.1 1.9-2.7 1.9-4.8A6.5 6.5 0 0 0 12 2zM10.5 19a.5.5 0 0 1-.5-.5v-.5h5v.5a.5.5 0 0 1-.5.5h-4z"/> <path d="M 8 8 A 5 5 0 0 1 12 4" fill="white" stroke="white" stroke-width="1.5" stroke-linecap="round" /> </svg>');
    
  }

  .file::before {
    content: "";
    display: inline-block;
    width: 3.5vh;
    height: 3.5vh;
    margin-right: 0.4em;
    mask: var(--file) no-repeat center / contain;
    -webkit-mask: var(--file) no-repeat center / contain;
    position: relative;
    background-color: var(--fg);
  }
  .zip::before {
    content: "";
    display: inline-block;
    width: 3.5vh;
    height: 3.5vh;
    margin-right: 0.4em;
    position: relative;
    background: var(--zip) no-repeat center / contain;
    filter: invert(var(--inv));
  }
  .arrow::before {
    content: "";
    display: inline-block;
    width: 3.5vh;
    height: 3.5vh;
    margin-right: 0.4em;
    position: relative;
    background: var(--arrow) no-repeat center / contain;
    filter: invert(var(--inv));
  }
  .mdreadme{
    vertical-align:text-middle;
  }
  .mdreadme::before {
    content: "";
    display: inline-block;
    width: 3.5vh;
    height: 3.5vh;
    margin-right: 0.4em;
    position: relative;
    background: var(--mdreadmeicon) no-repeat center / contain;
    filter: invert(var(--inv));
    vertical-align: middle;
  }
  .mdfile::before {
    content: "";
    display: inline-block;
    width: 3.5vh;
    height: 3.5vh;
    margin-right: 0.4em;
    position: relative;
    background: var(--mdfile) no-repeat center / contain;
    filter: invert(var(--inv));

  }
  .iso::before {
    content: "";
    display: inline-block;
    width: 3.5vh;
    height: 3.5vh;
    margin-right: 0.4em;
    position: relative;
    background: var(--iso) no-repeat center / contain;
    filter: invert(var(--inv));

  }
  .folder::before {
    content: "";
    display: inline-block;
    width: 3.5vh;
    height: 3.5vh;
    margin-right: 0.4em;
    mask: var(--folder) no-repeat center / contain;
    -webkit-mask: var(--folder) no-repeat center / contain;
    position: relative;
    background-color: var(--fg);
  }

    .togglebuttonBg{
        display: block; 
        width: 2.5vh;
        position: relative; 
        left: 0%; 
        top: 0vh;
        height: 5vh; 
        background-color: rgb(214, 214, 214); 
        border-radius: 2.5vh;
    }
    .togglebuttonSl{
        position: relative;
        top: 0px;
        display: block; 
        width: 2.5vh; 
        height: 2.5vh; 
        
        border-radius: 2.5vh;
        transform: translateY(0%);
        background: var(--lamp-icon) no-repeat center / contain;
        filter: invert(1) sepia(100%);
        background-color: rgb(255, 255, 255); 
        transition:  top 0.15s ease, background-color 0.15s ease, transform 0.15s ease;

    }
    #toggle:checked + .togglebuttonBg {
        background: rgb(14, 14, 14);
        transition:  top 0.15s ease, background-color 0.15s ease;
    }
    #toggle:checked + .togglebuttonBg .togglebuttonSl {
        top: 100%;
        transform: translateY(-100%);
        background: var(--lamp-icon);
        filter: invert(0) sepia(100%);
        background-color: rgb(255, 255, 255); 
        transition:  top 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
    }
    label[for="toggle"] {
      display: inline-block;
      width: auto;
    }

    .mdblock{
      position: relative; left: 50%; background: var(--readme-c); transform: translateX(-50%); width: 95%; border-radius: 4vh; margin-bottom: 4vh;

    }
    .mdlabel{
      height: 5vh; border-top-left-radius: 4vh; border-top-right-radius: 4vh; position: relative; top: 0vh;vertical-align: middle; padding: 3vh; padding-bottom: 0; line-height: 1; background-color: var(--readme-h);
    }
    .mdcontent{
      position: relative; padding: 2vh;padding-left: 2vw;padding-right: 2vw;padding-bottom: 3vh; width: auto; left: 50%; transform: translateX(-50%);
    }