/* Gruvbox Dark Hard Colorscheme */

:root {
  --bg0: #1d1f21;
  --bg1: #282a2e;
  --bg2: #32353b;
  --bg3: #3c3f45;
  --bg4: #45484e;

  --fg0: #ebdbb2;
  --fg1: #fbf1c7;
  --fg2: #fdf6e3;
  --fg3: #eee8d5;


  --gray_24: #928374;
  --gray_100: #7c6f64;

  --red: #cc241d;
  --green: #989d1a;
  --yellow: #d79921;
  --blue: #458588;
  --purple: #9d5f9d;
  --aqua: #689d6a;
  --orange: #fe8019;
}

html {
  scroll-padding-top: 7em; /* Adjusted to match header's calculated height */
}

body {
  background-color: var(--bg0);
  color: var(--fg1);
  font-family: 'Mulish', monospace;
  cursor: default;
  margin: 0;
  padding-top: 7em; /* Adjusted to match header's calculated height */
}

a {
  color: var(--yellow);
  text-decoration: none;
}

a:hover {
  color: var(--bright_yellow);
  text-decoration: underline;
}

h1 {
  color: var(--green)
}

h2 {
  color: var(--yellow)
}

h3 {
  color: var(--aqua)
}

h4 {
  color: var(--purple)
}

h5 {
  color: var(--green)
}

h6 {
  color: var(blue)
}

p, a {
	font-weight: 300;
}

code, pre {
  background-color: var(--bg2);
  color: var(--fg1);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-family: 'Mulish', monospace;
  font-size: 0.9rem;
}

button {
  background-color: var(--yellow);
  color: var(--bg1);
  border: none;
  padding: 0.6rem 0.6rem;
  cursor: pointer;
  font-size: 0.9rem;
}

button:hover {
  background-color: var(--bright_yellow);
}

blockquote {
  border: 1px solid var(--green);
  margin: 0;
  padding: 1rem 2rem;
}

input[type="text"],
input[type="email"],
textarea {
    background-color: var(--bg1);
    color: var(--fg1);
    border: 1px solid var(--yellow);
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    outline: none;
    border: 1px solid var(--green);
}

.header-container {
}

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to bottom, var(--bg0) 70%, transparent);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	z-index: 1000; /* Ensure header is on top */
	box-sizing: border-box; /* Include padding in element's total width and height */
	min-height: 5em; /* Set a minimum height for the header */
	display: flex; /* Use flexbox to center content vertically */
	align-items: center; /* Center content vertically */
}

header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%; /* Ensure container takes full width of header */
	margin: 0 auto; /* Center the container */
	padding: 1rem 1rem; /* Apply padding here */
}



nav {
	display: flex;
	margin-left: 2em;
	color: var(--fg1);
	gap: 1em;
}

nav a {
	color: var(--fg1);
}

nav a:hover {
	color: var(--fg1);
}

.card {
  background-color: var(--bg2);
  border: 1px solid var(--bg2);
  border-radius: 2px;
  padding: 1rem;
}

.card:hover {
  border: 1px solid var(--yellow);
  cursor: pointer;
}