:root {
  /* Colors */
  --color-1: #191919;
  --color-2: #225c00;
  --color-3: #35770f;
  --color-4: #468720;

  /* Shadows */
  --shadow-1: 0px 4px 4px rgba(0, 0, 0, 0.15);
}

body {
  background: var(--color-1);
}

h1 {
  color: white;
}

h2 {
  color: white;
}

hr {
  border: none;
  height: 2px;
  background-color: var(--color-1);
}

p {
  color: white;
}

div {
  border: 0px solid black;
}

.tabs {
  display: flex;
  justify-content: center;
  background: var(--color-3);
  box-shadow: var(--shadow-1);
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 12px;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 20px;
  text-decoration: none;
  color: white;
  display: inline-block;
}

.tab:hover {
  background: var(--color-4);
}

.tab.active {
  background: var(--color-4);
}

#header {
  padding: 0px 20px;
}

#content {
  padding: 0px 20px;
}

#profile-header {
    display: flex;
    gap: 30px;
}

#container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 20px;
  background: var(--color-2);
  border-radius: 20px;
  box-shadow: var(--shadow-1);
}

#profile-pic {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid var(--color-1);
  box-shadow: var(--shadow-1);
}