body {
  margin: 0;
  padding: 30px;

  background:
    linear-gradient(
      rgba(18, 0, 36, 0.2),
      rgba(18, 0, 36, 0.2)
    ),
    url("background.jpg");

  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;

  color: #f4eaff;
  font-family: Verdana, sans-serif;
}

.site {
  max-width: 1000px;
  margin: auto;
}

header {
  text-align: center;
  border: 2px solid #b86cff;
  background: #21003d;
  padding: 20px;
  box-shadow: 0 0 20px #b86cff;
}

h1 {
  color: #b86cff;
  text-shadow: 0 0 8px #b86cff, 0 0 15px #1aff8c;
  margin: 0;
}

.subtitle {
  color: #1aff8c;
}

nav {
  margin: 20px 0;
  padding: 12px;
  text-align: center;
  background: linear-gradient(90deg, #4b0082, #1aff8c, #4b0082);
  border: 2px solid #1aff8c;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  margin: 0 15px;
}

.layout {
  display: flex;
  gap: 20px;
}

.sidebar {
  width: 260px;
}

.main {
  flex: 1;
}

.window {
  background: rgba(26, 0, 51, 0.9);
  border: 2px solid #b86cff;
  margin-bottom: 20px;
  box-shadow: 0 0 10px #b86cff, 0 0 20px #1aff8c;
}

.titlebar {
  background: linear-gradient(90deg, #b86cff, #1aff8c);
  color: #120024;
  padding: 8px;
  font-weight: bold;
}

.window p,
.window h2,
.window a {
  padding: 0 15px;
}

.window a {
  display: block;
  color: #1aff8c;
  text-decoration: none;
  margin: 10px 0;
}

.window a:hover {
  color: white;
  text-shadow: 0 0 8px #1aff8c;
}

h2 {
  color: #1aff8c;
}

.terminal {
  background: black;
  color: #1aff8c;
  border: 2px solid #1aff8c;
  padding: 15px;
  font-family: "Courier New", monospace;
  box-shadow: 0 0 15px #1aff8c;
}

footer {
  text-align: center;
  color: #b86cff;
  margin-top: 20px;
}

@media screen and (max-width: 700px) {
  .layout {
    flex-direction: column;
  }

  .sidebar {
    width: auto;
  }
}