body {
  margin: 0;
  box-sizing: border-box;
}

.intro {
  padding: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.intro .heading {
  padding: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.intro .heading h1 {
  font-size: 30px;
}

.intro .heading img {
  width: 40px;
  height: auto;
}

.intro #system-check {
  display: flex;
  align-items: start;
  flex-direction: column;
  padding: 10px;
  border-style: dotted;
  border-color: #444444;
  width: fit-content;
  background-color: var(--vscode-input-background);
}

.codicon-account {
  color: green;
}

.found::before {
  color: green;
  content: "✓ ";
}

.not-found::before {
  color: red;
  content: "✗ ";
}

.not-found-optional::before {
  color: yellow;
  content: "⚠ ";
}

.refresh-button-div {
  margin-top: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  /* padding: 20px 0px; */
  /* width: 70%; */
}

.menu .menu-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  padding: 10px;
}

.menu .menu-item .menu-item-heading  {
  font-size: 18px;
  margin: 2px 10px;
  margin-bottom: 8px;
  vertical-align: middle;
  justify-content: center;
  align-content: center;
  text-align: center;
}

.menu .menu-item .menu-item-text {
  margin: 0px 10px;
  justify-content: center;
}

.menu vscode-link {
  color: var(--vscode-foreground);
  text-decoration: none;
}

.menu vscode-link:hover {
  color: var(--vscode-foreground);
  text-decoration: none;
}

.menu .menu-item img {
  background-color: #3A3D41;
  padding: 20px;
  width: 45px;
  height: auto;
}

.menu .menu-item img:hover {
  background-color: #45494E;
}