:root {
  --color-background: #ffffff; /* White background */
  --color-foreground: f8f9fa; /* Light gray*/
  --color-text: #333333; /* Dark grey for text*/
  --color-primary: #007bff; /*Standard blue*/
  --color-primary-hover: #0056b3; /* Darker blue for hover */
  --color-border-subtle: #e9ecef; /* border color*/
  --font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --navbar-height: 70px;
  --navbar-padding: 1rem;
  --container-width: 1140px;
  --transition-speed: 0.2s;
}

body {
  margin: 0;
  font-family: var(--font-family-sans-serif);
  font-size: 1rem;
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-background);
}

.navbar {
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid; /*var(--color-border-subtle);*/
}
.navbar *,
.navbar *::before,
.navbar *::after {
  box-sizing: border-box;
}
.navbar {
  /* Removing default list styles*/
}
.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar {
  /* Basic link styling*/
}
.navbar a {
  text-decoration: none;
  color: var(--color-text);
}
.navbar a:active {
  text-decoration: underline;
}

.navbar__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--navbar-padding);
}

.navbar__brand {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
}

/* For mobile*/
.navbar__toggle {
  display: block;
  padding: 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 1001; /*Ensure it's on top of the menu*/
}

.navbar__toggle .bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: var(--color-text);
  transition: all var(--transition-speed) ease-in-out;
}

.navbar__toggle.is-active .bar:nth-child(2) {
  opacity: 0;
}

.navbar__toggle.is-active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.navbar__toggle.is-active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.navbar__menu {
  display: none; /*  hidden by default on mobile*/
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: var(--navbar-height);
  left: 0;
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

.navbar__menu.is-active {
  display: flex;
}

.navbar__item {
  text-align: center;
  border-bottom: 1px solid var(--color-border-subtle);
}

.navbar__item:last-child {
  border-bottom: none;
}

.navbar__link {
  display: block;
  padding: 1.5rem;
  transition: background-color var(--transition-speed) ease;
}

.navbar__link:hover,
.navbar__link:focus {
  background-color: var(--color-foreground);
}

.navbar__link--cta {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

:is(.navbar__toggle, .navbar__link):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Media query for screens*/
@media (min-width: 768px) {
  .navbar__toggle {
    display: none;
  }
  .navbar__menu {
    display: flex;
    align-items: center;
    position: static;
    width: auto;
    background-color: transparent;
    border: none;
    box-shadow: none;
  }
  .navbar__list {
    display: flex;
    align-items: center;
  }
  .navbar__item {
    border: none;
    margin-left: 0.5rem;
  }
  .navbar__link {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border-bottom: 2px solid transparent;
  }
  .navbar__link:not(.navbar__link--cta):hover,
  .navbar__link:not(.navbar__link--cta):focus {
    background-color: transparent;
    border-bottom: var(--color-primary);
    color: var(--color-text);
  }
  .navbar__item--cta {
    margin-left: 1.5rem;
  }
  .navbar__link--cta {
    color: #fff;
    background-color: var(--color-primary);
    padding: 0.75rem 1.5rem;
    transition: background-color var --transisition-speed ease;
    border-bottom: none;
  }
  .navbar__link--cta:hover,
  .navbar__link--cta:focus {
    background-color: var(--color-primary-hover);
    border-bottom: none;
  }
}
.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 75%;
  max-width: 1200px;
  border-left: solid;
  border-right: solid;
  border-width: 1px;
  padding-top: 10px;
}

.content {
  text-indent: 3ch;
}

.bio {
  display: flex;
  justify-content: flex-start;
  gap: 40px;
}

#picture {
  max-width: 500px;
  margin: 50px;
}

#name {
  padding: 0;
  font-size: 2em;
  margin-bottom: 10px;
  margin-top: 10px;
}

#bio {
  max-width: 500px;
}

#picture-links {
  padding: 0;
  margin: 0;
}

#picture-links li {
  display: inline;
}

.picture-and-links a {
  color: black;
  text-decoration: underline;
  text-decoration-thickness: 20%;
  text-decoration-color: black;
}
.picture-and-links a::visited {
  color: black;
}

.section {
  margin-top: 33px;
}

.center {
  text-align: center;
}

.image {
  width: 350px;
  height: 350px;
  border-radius: 10;
  object-fit: cover;
  object-position: top;
}

.word-content {
  margin: 0 20px;
  padding-top: 42px;
}

.wrapper {
  display: flex;
  justify-content: center;
}

.blog-wrapper {
  display: flex;
  flex-direction: column;
}

/*# sourceMappingURL=main.css.map */