:root {
  --bg: #1d2021;
  --bg-soft: #222222;
  /* --bg-soft: #32302f; */
  --fg: #ebdbb2;
  --fg-dim: #a89984;
  --titles: #fbf1c7;
  --accent: #b8bb26;
  --border: #928374;

  --syntax-keyword: #fe8019;  /* Gruvbox Orange */
  --syntax-string:  #8ec07c;  /* Gruvbox cyan */
  --syntax-func:    #83a598;  /* Gruvbox Blue */
  --syntax-type:    #fabd2f;  /* Gruvbox Yellow */
  --syntax-const:   #d3869b;  /* Gruvbox Purple */
  --syntax-comment: #928374;  /* Gruvbox Gray */
}

[data-theme="light"] {
  --bg: #fbf1c7;
  --bg-soft: #f2e5bc;
  --fg: #3c3836;
  --fg-dim: #7c6f64;
  --titles: #282828;
  --accent: #af3a03;
  --border: #928374;

  --syntax-keyword: #af3a03;  /* Darker Orange */
  --syntax-string:  #689d6a;  /* Darker cyan */
  --syntax-func:    #076678;  /* Darker Blue */
  --syntax-type:    #b57614;  /* Darker Yellow */
  --syntax-const:   #8f3f71;  /* Darker Purple */
  --syntax-comment: #928374;  /* Gray */
}

html {
  background-color: var(--bg);
  color: var(--fg);
  font-family: "JetBrains Mono", monospace;
  font-size: 1.2em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  transition: background-color 0.2s ease;
}

body {
  /* width: 1000px; */
  /* padding: 15px; */
  /* display: flex; */
  /* flex-direction: column; */
  max-width: 1000px;  /* Slightly wider than 800, but still readable */
  width: 95%;        /* Takes up most of the screen on mobile */
  margin: 0 auto;    /* Centers the body since we aren't using the html flex trick anymore */
  padding: 15px;
  display: flex;
  flex-direction: column;
  /* position: relative; */
}

h1, h2, h3, h4, h5 {
  color: var(--titles);
  font-family: "Inter", sans-serif;
}

b, strong {
  color: var(--titles);
}

a {
  color: var(--accent);
  /* text-decoration-style: dotted; */
}

.site-title {
  font-size: 2.5em;
  margin-bottom: 10px;
  text-align: center;
}

nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1.2em;
  margin-bottom: 20px;
  justify-content: center;
}

.block {
  border: 1px dotted var(--border);
  padding: 5px 15px;
  margin: 0 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--bg-soft);
}

#theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  background: transparent;
  /* Thin circle with the same color as your text/nav */
  border: 1px solid var(--fg); 
  outline: none;
  border-radius: 50%;      /* Perfect circle */
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 15px;       /* Gap from the navigation items */
  transition: all 0.2s ease;
  vertical-align: middle;
}

/* On hover, the circle and icon glow with the Gruvbox orange accent */
#theme-toggle:hover {
  border-color: var(--accent);
  background-color: var(--bg-soft);
}

#theme-toggle:hover svg {
  fill: var(--accent);
}

#theme-toggle svg {
  fill: var(--fg); /* Icon color matches the border and nav text */
  width: 16px;     /* Slightly smaller to fit comfortably inside the ring */
  height: 16px;
}

.wave {
  background: var(--bg);
  color: var(--titles);
  text-shadow: 1px 1px 10px var(--accent);
}

#profile-pic {
    width: 150px;
    height: 150px;
    object-fit: cover;
    /* border: 1px solid var(--accent); */
    float: right;
    position: relative;
    margin-left: 20px;
    margin-bottom: 10px;
    shape-outside: circle(50%);
}

footer {
  margin-top: 30px;
  color: var(--fg-dim);
  justify-content: center;
  text-align: center;
}