:root {
  --bg-color: #171717;
  --text-color: #e4e4e7;
  --main-font-family: Tahoma, Arial, sans-serif;
  --secondary-font-family: Merryweather, serif;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--secondary-font-family);
}

p {
  font-family: var(--main-font-family);
  line-height: 1.6;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.acordeon__detail[open]::details-content {
  padding: 10px;
  background-color: #161616;
}

.acordeon__detail p {
  margin: 0;
}

.acordeon__summary {
  padding: 10px;
  background: #232323;
  border-bottom: 1px solid #333;
}

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

.acordeon__summary::marker {
  content: "⇢ ";
  color: red;
  font-size: 1.5rem;
}

.acordeon__detail[open] .acordeon__summary::marker {
  content: "⇣ ";
}