body {
  font-family: Arial, sans-serif;
  background-color: #1c1f22;
  color: #f0f0f0;
  margin: 0;
  padding: 0;
}
header {
  background-color: #121619;
  padding: 20px;
  text-align: center;
}
header h1 {
  margin: 0;
  color: #aad6ff;
}
.tagline {
  font-size: 1.1em;
  margin-top: 5px;
  color: #ccc;
}
nav a {
  margin: 0 10px;
  color: #aad6ff;
  text-decoration: none;
}
nav a:hover {
  text-decoration: underline;
}
main {
  padding: 20px;
}
section {
  margin-bottom: 40px;
}
details {
  background-color: #2e3b44;
  padding: 10px;
  margin: 10px 0;
  border-left: 5px solid #aad6ff;
}
.visual {
  width: 100%;
  max-width: 500px;
  display: block;
  margin: 10px auto;
  border: 2px solid #aad6ff;
}
.tip-box {
  background-color: #2e3b44;
  padding: 15px;
  border-left: 5px solid #aad6ff;
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
iframe {
  width: 100%;
  height: 200px;
}
footer {
  background-color: #121619;
  text-align: center;
  padding: 10px;
  color: #888;
}
#forumForm {
  margin-top: 10px;
}
#forumPosts .post {
  background-color: #2e3b44;
  padding: 10px;
  margin: 10px 0;
  border-left: 4px solid #aad6ff;
}
#forumPosts .reply {
  background-color: #394b5a;
  margin: 5px 0 0 15px;
  padding: 5px 10px;
  border-left: 3px solid #7bb3ff;
}
.time {
  font-size: 0.8em;
  color: #aaa;
}