* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
    border-color: currentColor;
}

body {
    background-color: rgb(30, 31, 28);
    /* padding: 400px; */
    /* padding-top: 40px; */
    margin: 0;
    display: block;
    font-family: "Fira Code", monospace;
    overflow-x: hidden;
    line-height: var(--line);
    background: var(--color-bg);
    color: var(--color-body-text);
}

.container {
    width: 59%;
    font-family: "Fira Code", monospace;
    /* height: 6000px; */
    align-items: center;
    justify-content: center;
    background-color:var(--color-editor);
    color: var(--color-body-text);
    margin-top: 4.3rem;
    padding-bottom: 43%;
}
::-webkit-scrollbar {
    display: none;
  }
  *::-webkit-scrollbar-corner,
  *::-webkit-scrollbar-button {
    display: none;
  }
  *::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
  }
  *::-webkit-scrollbar-thumb:hover {
    background: var(--color-scrollbar-thumb-hover);
  }
  *::-webkit-scrollbar-thumb:active {
    background: var(--color-scrollbar-thumb-active);
  }
  ::selection {
    background-color: var(--color-selection);
  }
  
  *,
  :before,
  :after {
    --tw-shadow: 0 0 #0000;
  }
  
  * {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  :root,
  :root.monokai {
    --color-bg: #1e1f1c;
    --color-editor: #272822;
    --color-body-text: #f8f8f2;
    --color-secondary-text: #cfcfc2;
    --color-line-text: #90908a;
    --color-line-text-hover: #c2c2bf;
    --color-line-highlight-bg: #3e3d32;
    --color-comment: #88846f;
    --color-tab: #34352f;
    --color-tab-text: #ccccc7;
    --color-tab-text-active: #ffffff;
    --color-accent-1: #a6e22e;
    --color-accent-2: #4e94ce;
    --color-selection: #878b9180;
    --color-scrollbar-border: #7f7f7f4d;
    --color-scrollbar-thumb: #79797966;
    --color-scrollbar-thumb-hover: #646464b3;
    --color-scrollbar-thumb-active: #bfbfbf66;
    --color-scrollbar-shadow: #000000;
    --color-focus: #75715e;
    --color-tab-icon-hover: #5a5d5e50;
    --color-tab-icon-active: #63666750;
    --color-code-bg: #22231e;
    --color-code-text: #ffffff;
    --color-code-text-inline: #fd971f;
    --color-code-keyword: #f92672;
    --color-code-function: #66d9ef;
    --color-code-operator: #f92672;
    --color-code-string: #e6db74;
    --color-code-variable: #ffffff;
    --color-code-constant: #ae81ff;
    --color-code-punctuation: #ffffff;
    --color-code-comment: var(--color-comment);
    --color-quote: var(--color-comment);
    --color-code-inserted: #a6e22e;
    --color-code-removed: #f92672;
  }
  
 
  
  :root.dark-plus {
    --color-bg: #252526;
    --color-editor: #1e1e1e;
    --color-body-text: #d4d4d4;
    --color-secondary-text: #bbbbbb;
    --color-line-text: #858585;
    --color-line-text-hover: #c6c6c6;
    --color-line-highlight-bg: transparent;
    --color-comment: #6a9955;
    --color-tab: #2d2d2d;
    --color-tab-text: #ffffff80;
    --color-tab-text-active: #ffffff;
    --color-accent-1: #4ec9b0;
    --color-accent-2: #4e94ce;
    --color-selection: #264f78;
    --color-scrollbar-border: #7f7f7f4d;
    --color-scrollbar-thumb: #79797966;
    --color-scrollbar-thumb-hover: #646464b3;
    --color-scrollbar-thumb-active: #bfbfbf66;
    --color-scrollbar-shadow: #000000;
    --color-focus: #007fd4;
    --color-tab-icon-hover: #5a5d5e50;
    --color-tab-icon-active: #63666750;
    --color-code-bg: #1c1c1c;
    --color-code-text: #d4d4d4;
    --color-code-text-inline: #ce9178;
    --color-code-keyword: #569cd6;
    --color-code-function: #4ec9b0;
    --color-code-operator: #d4d4d4;
    --color-code-string: #ce9178;
    --color-code-variable: #9cdcfe;
    --color-code-constant: #4fc1ff;
    --color-code-punctuation: #d4d4d4;
    --color-code-comment: #6a9955;
    --color-quote: var(--color-body-text);
    --color-quote-symbols: var(--color-comment);
  }
  
  :root.light-plus {
    --color-bg: #f3f3f3;
    --color-editor: #ffffff;
    --color-body-text: #000000;
    --color-secondary-text: #444444;
    --color-line-text: #237893;
    --color-line-text-hover: #0b216f;
    --color-line-highlight-bg: transparent;
    --color-comment: #008000;
    --color-tab: #ececec;
    --color-tab-text: #333333b3;
    --color-tab-text-active: #333333;
    --color-accent-1: #267f99;
    --color-accent-2: #0000ff;
    --color-selection: #add6ff;
    --color-scrollbar-border: #7f7f7f4d;
    --color-scrollbar-thumb: #64646466;
    --color-scrollbar-thumb-hover: #646464b3;
    --color-scrollbar-thumb-active: #00000099;
    --color-scrollbar-shadow: #dddddd;
    --color-focus: #0090f1;
    --color-tab-icon-hover: #b8b8b850;
    --color-tab-icon-active: #a6a6a650;
    --color-code-bg: #fbfbfb;
    --color-code-text: #001080;
    --color-code-text-inline: #800000;
    --color-code-keyword: #0000ff;
    --color-code-function: #795e26;
    --color-code-operator: #000000;
    --color-code-string: #a31515;
    --color-code-variable: #000000;
    --color-code-constant: #098658;
    --color-code-punctuation: #000000;
    --color-code-comment: #008000;
    --color-quote: var(--color-body-text);
    --color-quote-symbols: #0451a;
  }
  
  :root.github-dark {
    --color-bg: #1b1f23;
    --color-editor: #24292e;
    --color-body-text: #e1e4e8;
    --color-secondary-text: #959da5;
    --color-line-text: #768390;
    --color-line-text-hover: #e1e4e8;
    --color-line-highlight-bg: #2b3036;
    --color-comment: #6a737d;
    --color-tab: #1f2428;
    --color-tab-text: #959da5;
    --color-tab-text-active: #e1e4e8;
    --color-accent-1: #96d0ff;
    --color-accent-2: #4e94ce;
    --color-selection: #3392ff44;
    --color-scrollbar-border: #1b1f23;
    --color-scrollbar-thumb: #6a737d33;
    --color-scrollbar-thumb-hover: #6a737d44;
    --color-scrollbar-thumb-active: #6a737d88;
    --color-scrollbar-shadow: #00000088;
    --color-focus: #005cc5;
    --color-tab-icon-hover: #5a5d5e50;
    --color-tab-icon-active: #63666750;
    --color-code-bg: #202428;
    --color-code-text: #e1e4e8;
    --color-code-text-inline: #9ecbff;
    --color-code-keyword: #f97583;
    --color-code-function: #b392f0;
    --color-code-operator: #f97583;
    --color-code-string: #9ecbff;
    --color-code-variable: #9cdcfe;
    --color-code-constant: #79b8ff;
    --color-code-punctuation: #e1e4e8;
    --color-code-comment: #6a737d;
    --color-quote: #85e89d;
  }
  :root.github-light {
    --color-bg: #f6f8fa;
    --color-editor: #ffffff;
    --color-body-text: #24292e;
    --color-secondary-text: #6a737d;
    --color-line-text: #1b1f234d;
    --color-line-text-hover: #24292e;
    --color-line-highlight-bg: #f6f8fa;
    --color-comment: #6a737d;
    --color-tab: #eff2f6;
    --color-tab-text: #6a737d;
    --color-tab-text-active: #2f363d;
    --color-accent-1: #032f62;
    --color-accent-2: #0000ff;
    --color-selection: #0366d625;
    --color-scrollbar-border: #ffffff;
    --color-scrollbar-thumb: #959da533;
    --color-scrollbar-thumb-hover: #959da544;
    --color-scrollbar-thumb-active: #959da588;
    --color-scrollbar-shadow: #6a737d33;
    --color-focus: #2188ff;
    --color-tab-icon-hover: #b8b8b850;
    --color-tab-icon-active: #a6a6a650;
    --color-code-bg: #fcfcfc;
    --color-code-text: var(--color-body-text);
    --color-code-text-inline: var(--color-code-string);
    --color-code-keyword: #d73a49;
    --color-code-function: #6f42c1;
    --color-code-operator: #d73a49;
    --color-code-string: #032f62;
    --color-code-variable: #9cdcfe;
    --color-code-constant: #79b8ff;
    --color-code-punctuation: var(--color-body-text);
    --color-code-comment: #6a737d;
    --color-quote: #22863a;
  }
  
  :root.solarized-light {
    --color-bg: #eee8d5;
    --color-editor: #fdf6e3;
    --color-body-text: #333333;
    --color-secondary-text: #586e75;
    --color-line-text: #237893;
    --color-line-text-hover: #567983;
    --color-line-highlight-bg: #eee8d5;
    --color-comment: #93a1a1;
    --color-tab: #e4ddc9;
    --color-tab-text: #586e75;
    --color-tab-text-active: #333333;
    --color-accent-1: #268bd2;
    --color-accent-2: #0000ff;
    --color-selection: #eee8d5;
    --color-scrollbar-border: #7f7f7f4d;
    --color-scrollbar-thumb: #64646466;
    --color-scrollbar-thumb-hover: #646464b3;
    --color-scrollbar-thumb-active: #00000099;
    --color-scrollbar-shadow: #dddddd;
    --color-focus: #d3af86;
    --color-tab-icon-hover: #b8b8b850;
    --color-tab-icon-active: #a6a6a650;
    --color-code-bg: #f9f1dc;
    --color-code-text: #333333;
    --color-code-text-inline: #2aa198;
    --color-code-keyword: #268bd2;
    --color-code-function: #268bd2;
    --color-code-operator: #859900;
    --color-code-string: #2aa198;
    --color-code-variable: #268bd2;
    --color-code-constant: #d33682;
    --color-code-punctuation: #333333;
    --color-code-comment: #93a1a1;
    --color-quote: #859900;
  }

/* nav styling begins */

nav {
    background-color: var(--color-bg);
    font-family: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI, system-ui,
      Ubuntu, sans-serif;
      /* align-items: center; */
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: -19.6rem;
      margin-top: 4rem;
  }
   .navbar {
    background-color: var(--color-tab);
    display: flex;
    user-select: none;
    white-space: nowrap;
    outline-offset: -1px;
    width: fit-content;
    
  }
  nav a {
    font-family: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI, system-ui,
      Ubuntu, sans-serif;
    color: var(--color-tab-text);
    font-size: 1.166666rem;
    text-decoration: none;
    font-size: 0.8125em;
    font-weight: 500;
    text-align: start;
    min-width: 7.5rem;
    padding-top: 0.625em;
    padding-bottom: 0.625em;
    padding-right: 2.32em;
    padding-left: 0.925em;
    border-right: 1px solid var(--color-bg);
    display: flex;
    align-items: center;
  }
  
  nav a:hover {
    color: var(--color-tab-text);
  }
  
  nav .active{
    background-color: var(--color-editor);
  }
  
   nav .isactive {
    background-color: var(--color-editor);
    font-style: italic;
    color: var(--color-tab-text-active);
    padding-right: 0.225em;
    font-weight: 550;
    font-size: 0.8125em;
  }
  nav .isactive:hover {
    color: var(--color-body-text-active);
  }
  
   nav .isactive span {
    font-size: 1.6em;
    color: var(--color-tab-text-active);
    font-weight: 350;
    padding-top: 0;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    display: block;
    margin-left: 0.3rem;
  }
  
  nav .isactive span:hover {
    background-color: var(--color-tab-icon-hover);
    border-radius: 5px;
  }
  
  nav .isactive span:active {
    background-color: var(--color-tab-icon-active);
    border-radius: 5px;
  } 

  .c-links a {
    color: var(--color-accent-1);
  }
  .links a {
    display: flex;
    color: var(--color-accent-1);
  }
  
  .links ul {
    gap: 30px;
    flex-flow: row wrap;
  }
  
  footer,
  .links ul {
    justify-content: space-between;
    display: flex;
    flex-flow: row wrap;
  }
  
  .modes #theme {
    padding-left: 30px;
    border: none;
    outline: none;
    width: fit-content;
    background-color: var(--color-editor);
  }
  
  select {
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: "";
    color: var(--color-code-punctuation);
  }
  
  .up {
    list-style: none;
  }
  
  .modes span {
    font-size: 16px;
    font-family: "Fira Code", monospace;
    color: var(--color-body-text);
    width: 88px;
    height: 66px;
  }
  
  #theme a {
    color: var(--color-accent-1);
    text-decoration: underline;
    font-family: "Fira Code", monospace;
    font-size: 16px;
  }
  
  #theme {
    font-family: "Fira Code", monospace;
    font-size: 16px;
    /* background-color: #2f363d; */
    color: #dddddd;
    position: relative;
  }
  
  #modes a:hover {
    color: var(--color-accent-2);
  }
  
  .c-container a {
    color: var(--color-accent-1);
    text-decoration: underline;
  }
  
  .c-container a:hover {
    color: var(--color-accent-2);
  }
  
  .c-container #theme:hover {
    color: var(--color-accent-2);
    /* touch-action: cross-slide-x; */
  }
  
  .modes .colour {
    color: var(--color-accent-1);
    padding-right: 5px;
  }


/* Framework-1 Starts */
.framework-1 {
    width: 80%;
    height: 20px;
    display: flex;
    padding: 30px;
    margin: 70px;
    justify-content: space-between;
}

.framework-1 .col-1 {
    width: 70%;
    text-align: left;
}

.framework-1 .col-1 h1 {
    font-family: monospace;
    color: #f8f8f2;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: normal;
}

.framework-1 .col-1 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 500;
    color: #cfcfc2;
}

.framework-1 .col-2 {
    width: 20%;
    text-align: right;
}

.framework-1 .col-2 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 500;
    color: #cfcfc2;
}


/* Framework-2 Starts */
.framework-2 {
    width: 80%;
    height: auto;
}

.framework-2 img {
    width: 90%;
    margin-left: 100px;
}

/* Framework-3 Starts */
.framework-3 {
    width: 85%;
    height: 20px;
    margin-top: 20px;
}

.framework-3 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

.framework-3 a {
    color: #a6e22e;
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
}

/* Framework-4 Starts*/
.framework-4 {
    width: 85%;
    height: 10px;
    margin-top: 60px;
}

.framework-4 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

.framework-4 a {
    color: #a6e22e;
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    justify-content: space-between;
}

/* Framework-5 Starts */
.framework-5 {
    width: 85%;
    height: 20px;
    margin-top: 50px;
}

.framework-5 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

.framework-5 a {
    color: rgb(117, 154, 41);
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    justify-content: space-between;
}

/* Framework-6 Starts */
.framework-6 {
    width: 85%;
    height: 20px;
    margin-top: 70px;
}

.framework-6 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

/* Framework-7 Starts */
.framework-7 {
    width: 85%;
    height: 20px;
    margin-top: 70px;
}

.framework-7 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

/* Framework-8 Starts */
.framework-8 {
    width: 85%;
    height: 100px;
    margin-top: 130px;
}

.framework-8 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

/* Framework-9 Starts */
.framework-9 {
    width: 85%;
    height: 100px;
    margin-top: 30px;
}

.framework-9 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

/* Framework-10 Starts */
.framework-10 {
    width: 85%;
    height: 100px;
    margin-top: 30px;
}

.framework-10 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

/* Framework-11 Starts */
.framework-11 {
    width: 85%;
    height: 10px;
    margin-top: 5px;
}

.framework-11 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

.framework-11 a {
    color: rgb(117, 154, 41);
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    justify-content: space-between;
}

/* Framework-12 Starts */
.framework-12 {
    width: 85%;
    height: 100px;
    margin-top: 120px;
}

.framework-12 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

/* Framework-13 Starts */
.framework-13 {
    width: 85%;
    height: 100px;
    margin-top: 50px;
}

.framework-13 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

/* Framework-14 Starts */
.framework-14 {
    width: 85%;
    height: 100px;
    margin-top: 30px;
}

.framework-14 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

/* Framework-15 Starts */
.framework-15 {
    width: 85%;
    height: 200px;
    margin-top: 30px;
}

.framework-15 h1 {
    font-family: monospace;
    color: #f8f8f2;
    font-size: 24px;
    font-weight: 700;
    margin-left: 100px;
}

.framework-15 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
    margin-top: 20px;
}

/* Framework-16 Starts */
.framework-16 {
    width: 85%;
    height: 180px;
    margin-top: 30px;
}

.framework-16 h1 {
    font-family: monospace;
    color: #f8f8f2;
    font-size: 24px;
    font-weight: 700;
    margin-left: 100px;
}

.framework-16 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
    margin-top: 20px;
}

/* Framework-17 Starts */
.framework-17 {
    width: 85%;
    height: 60px;
    margin-top: 30px;
}

.framework-17 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

/* Framework-18 Starts */
.framework-18 {
    width: 85%;
    height: 190px;
    margin-top: 40px;
}

.framework-18 h1 {
    font-family: monospace;
    color: #f8f8f2;
    font-size: 24px;
    font-weight: 700;
    margin-left: 100px;
}

.framework-18 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
    margin-top: 20px;
}

/* Framework-19 Starts */
.framework-19 {
    width: 85%;
    height: 180px;
    margin-top: 30px;
}

.framework-19 h1 {
    font-family: monospace;
    color: #f8f8f2;
    font-size: 24px;
    font-weight: 700;
    margin-left: 100px;
}

.framework-19 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
    margin-top: 20px;
}

.framework-19 .a-class {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: rgb(108, 106, 89);
    margin-left: 100px;
}

.framework-19 a {
    text-decoration: none;
    color: rgb(149, 201, 44);
    font-family: monospace;
}

/* Framework-20 Starts */
.framework-20 {
    width: 85%;
    height: 130px;
    margin-top: 30px;
}

.framework-20 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

/* Framework-21 Starts */
.framework-21 {
    width: 85%;
    height: 60px;
    margin-top: 30px;
}

.framework-21 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

/* Framework-22 Starts*/
.framework-22 {
    width: 85%;
    height: 80px;
    margin-top: 60px;
}

.framework-22 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

.framework-22 a {
    color: #a6e22e;
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    justify-content: space-between;
}

/* Framework-23 Starts */
.framework-23 {
    width: 85%;
    height: 180px;
    margin-top: 30px;
}

.framework-23 h1 {
    font-family: monospace;
    color: #f8f8f2;
    font-size: 24px;
    font-weight: 700;
    margin-left: 100px;
}

.framework-23 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
    margin-top: 20px;
}

.framework-23 a {
    text-decoration: none;
    color: rgb(149, 201, 44);
    font-family: monospace;
}

/* Framework-24 Starts */
.framework-24 {
    width: 80%;
    height: auto;
}

.framework-24 img {
    width: 90%;
    margin-left: 100px;
    margin-top: 30px;
}

/* Framework-25 Starts */
.framework-25 {
    width: 85%;
    height: 70px;
    margin-top: 30px;
}

.framework-25 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}

/* Framework-26 Starts */
.framework-26 {
    width: 85%;
    height: 60px;
    margin-top: 50px;
}
.framework-26 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
}
.framework-26 p {
    font-family: monospace;
    font-size: 16px;
    font-weight: 400;
    color: #f8f8f2;
    margin-left: 100px;
    margin-top: 20px;
}