* {
  box-sizing: border-box;
}

/* BODY */
body {
  margin: 0;
  font-family: "Comic Sans MS", cursive;
  color: #f1e8ff;

  background:
    radial-gradient(circle at top, rgba(120, 0, 255, 0.25), transparent 40%),
    #050008;

  background-attachment: fixed;
}

/* STAR OVERLAY */
body::before {
  content: "";
  position: fixed;
  inset: 0;

  background-image:
    radial-gradient(#ffffff 1px, transparent 1px),
    radial-gradient(#bb88ff 1px, transparent 1px);

  background-size: 140px 140px, 220px 220px;

  opacity: 0.2;
  pointer-events: none;
}

/* HEADER */
header {
  padding: 50px 20px;
  text-align: center;

  background-image:
    linear-gradient(rgba(0,0,0,0.7), rgba(20,0,40,0.85)),
    url('https://i.pinimg.com/originals/5b/04/f9/5b04f989b42dde6f36477ce004db180b.gif');

  background-size: cover;
  background-position: center;

  border-bottom: 2px solid #7a2cff;
}

header h1 {
  margin: 0;
  font-size: 60px;

  color: #ffffff;

  text-shadow:
    0 0 10px #a855ff,
    0 0 25px #6d1fff;
}

header p {
  color: #d9c2ff;
}

/* NAVBAR */
.navbar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  background: #0b0014;

  border-bottom: 1px solid #6622cc;
}

.navbar a {
  color: #f0dfff;
  padding: 14px 20px;
  text-decoration: none;

  transition: 0.3s;
}

.navbar a:hover {
  background: linear-gradient(90deg, #3b005f, #7b2fff);

  color: white;

  text-shadow: 0 0 10px #d29cff;
}

/* CONTENT AREA */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 15px;
}

/* SIDEBAR */
.side {
  flex: 30%;
  padding: 20px;

  background: rgba(15, 0, 30, 0.9);

  border-radius: 14px;
}

/* MAIN CONTENT */
.main {
  flex: 65%;
  padding: 20px;

  background: rgba(5, 0, 15, 0.92);

  border-radius: 14px;
}

/* IMAGES */
img {
  max-width: 100%;
  border-radius: 10px;

  border: none;
  box-shadow: none;

  transition: 0.3s;
}

img:hover {
  transform: scale(1.03);

  border: none;
  box-shadow: none;
}

/* PLACEHOLDER BOXES */
.fakeimg {
  background:
    linear-gradient(
      135deg,
      rgba(120,0,255,0.15),
      rgba(40,0,70,0.35)
    );

  border-radius: 10px;

  padding: 20px;

  color: #d7c2ff;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
  color: #f5eaff;

  text-shadow:
    0 0 10px rgba(168,85,255,0.5);
}

/* LINKS */
a {
  color: #bb88ff;
}

a:hover {
  color: #ffffff;

  text-shadow:
    0 0 10px #c084ff;
}

/* FOOTER */
footer {
  padding: 25px;
  text-align: center;

  background:
    linear-gradient(
      90deg,
      #07000f,
      #130022
    );

  border-top: 2px solid #6d28d9;
}

/* MOBILE */
@media screen and (max-width: 700px) {

  .container,
  .navbar {
    flex-direction: column;
  }

  header h1 {
    font-size: 42px;
  }
}