:root {
  /* Default theme (monokai-octagon) */
  --background: #282a3a;
  --text: #888D94;
  --numbers: #535763;
  --functionCol: #9cd1bb;
  --functionName: #BAD761;
  --parenthesis: #FF657A;
  --attr: #eaf2f1;
  --string: #FFD76D;
  --link: #c39ac9;
}

.theme-monokai-classic {
  --background: #272822;
  --text: #75715E;
  --numbers: #42423e;
  --functionCol: #66D9EF;
  --functionName: #A6E22E;
  --parenthesis: #F92672;
  --attr: #F8F8F2;
  --string: #E6DB74;
  --link: #AE81FF;
}

.theme-monokai-spectrum {
  --background: #222222;
  --text: #69676c;
  --numbers: #525053;
  --functionCol: #5ad4e6;
  --functionName: #7bd88f;
  --parenthesis: #fc618d;
  --attr: #f7f1ff;
  --string: #fce566;
  --link: #948ae3;
}

.theme-monokai-machine {
  --background: #283838;
  --text: #6B7678;
  --numbers: #545F62;
  --functionCol: #7CD5F1;
  --functionName: #A2E57B;
  --parenthesis: #FF6D7E;
  --attr: #F2FFFC;
  --string: #FFED72;
  --link: #BAA0F8;
}

.theme-monokai-ristretto {
  --background: #332924;
  --text: #c3b7b8;
  --numbers: #5B5B53;
  --functionCol: #6699CC;
  --functionName: #ADDA78;
  --parenthesis: #FD6883;
  --attr: #A8A9EB;
  --string: #F9CC6C;
  --link: #F38D70;
}

.theme-terminal {
  --background: #000000;
  --text: #FFFFFF;
  --numbers: #8b8b8b;
  --functionCol: #00FFFF;
  --functionName: #00FF00;
  --parenthesis: #0000FF;
  --attr: #FF0000;
  --string: #FFFF00;
  --link: #FF00FF;
}

.functionCol { color: var(--functionCol); }
.functionName { color: var(--functionName); }
.parenthesis { color: var(--parenthesis); }
.attr { color: var(--attr); }
.string { color: var(--string); }
.link { 
  color: var(--link); 
  text-decoration: underline;
}

body {
  background: var(--background);
  color: var(--text);
  font-family: Consolas, 'Courier New', monospace;
  display: flex;
  justify-content: center;
  max-width: 1200px;
  padding-top: 40px;
}

#themeButton {
  position: fixed;       /* Stick to screen */
  top: 16px;             /* Distance from top */
  right: 64px;           /* Distance from right */
  width: 40px;           /* Square shape */
  height: 40px;
  border: 1px solid var(--text); /* Light outline */
  background-color: var(--background);
  border-radius: 6px;    /* Slightly rounded corners */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);    /* Icon color */
  transition: background 0.2s, color 0.2s;
  z-index: 1000;         /* Stay on top of content */
}

#homeButton {
  position: fixed;       /* Stick to screen */
  top: 16px;             /* Distance from top */
  right: 16px;           /* Distance from right */
  width: 38px;           /* Square shape */
  height: 38px;
  border: 1px solid var(--text); /* Light outline */
  background-color: var(--background);
  border-radius: 6px;    /* Slightly rounded corners */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);    /* Icon color */
  transition: background 0.2s, color 0.2s;
  z-index: 1000;         /* Stay on top of content */
}

#themeButton:hover {
  background-color: var(--numbers); /* subtle hover background */
  color: var(--attr);        /* optional hover icon color */
}

#homeButton:hover {
  background-color: var(--numbers); /* subtle hover background */
  color: var(--attr);        /* optional hover icon color */
}

#paletteIcon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}

#homeIcon {
  width: 26px;
  height: 26px;
  fill: currentColor;
  display: block;
}

.code-block {
  font-size: 1.25rem;
  line-height: 2rem;
  display: inline-block;
  white-space: pre-wrap;
}

.line-numbers {
  background: var(--background);
  color: var(--numbers);
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 30px;
  user-select: none;
  line-height: 2rem;
  font-size: 1.25rem;
  text-align: right;
}

.email {
  color: var(--text);
}

@media (max-width: 1000px) {
  .line-numbers { 
    font-size: 0.9rem;
    line-height: 1.5rem;
    padding-top: 14.5px;
    padding-left: 10px;
    padding-right: 15px;
  }
  .code-block { 
    font-size: 0.9rem;
    line-height: 1.5rem;
  }
}