/* ============================================================
   MAIN PAGE
   ============================================================ */

body {
  margin: 0px;
  padding: 0px;

  background-color: rgb(0, 0, 0);

  background-image:
    radial-gradient(white 1px, transparent 1px),
    radial-gradient(rgb(102, 204, 255) 1px, transparent 1px);

  background-size:
    40px 40px,
    80px 80px;

  background-position:
    0px 0px,
    20px 20px;

  color: rgb(255, 255, 255);

  font-family: "Courier New", Courier, monospace;
}


.page {
  width: 1280px;
  margin: 0px auto;
  padding: 20px 10px 40px;
}



/* ============================================================
   HEADER
   ============================================================ */

.header {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 30px;

  text-align: center;

  margin-bottom: 10px;
}


.title-wrap .welcome {
  color: rgb(255, 233, 77);
  font-size: 32px;
  margin-bottom: 10px;
}


.title-wrap h1 {
  margin: 0px;

  color: rgb(255, 233, 77);

  font-size: 74px;
  font-weight: bold;
  line-height: 1;

  text-shadow:
    rgb(160, 92, 255) 0px 0px 6px;
}


.shooting-star {
  color: rgb(255, 179, 0);

  font-size: 40px;

  white-space: nowrap;

  text-shadow:
    rgb(204, 102, 255) 0px 0px 10px;
}



/* ============================================================
   MAIN LAYOUT
   ============================================================ */

.main-layout {
  display: flex;
  align-items: flex-start;

  gap: 35px;

  margin-top: 20px;
}



/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
  width: 260px;
}


.panel {
  border: 3px solid rgb(191, 191, 191);

  padding: 18px;

  background: rgba(0, 0, 0, 0.35);
}


.panel h2 {
  text-align: center;

  color: rgb(51, 224, 255);

  font-size: 24px;

  margin: 0px 0px 12px;
}


.panel hr {
  border-width: 2px medium medium;

  border-style: solid none none;

  border-color:
    rgb(128, 128, 128)
    currentcolor
    currentcolor;

  border-image: none;

  margin: 15px 0px;
}



/* ============================================================
   NAVIGATION
   ============================================================ */

.nav-links {
  list-style: none;

  margin: 0px;

  padding: 0px;
}


.nav-links li {
  margin: 20px 0px;
}


.nav-links a {
  color: rgb(255, 66, 255);

  font-size: 24px;

  text-decoration: underline;

  font-weight: bold;
}


.nav-links a:hover {
  color: rgb(51, 224, 255);
}



/* ============================================================
   MUSIC BOX
   ============================================================ */

.music-box {
  text-align: center;

  color: rgb(51, 224, 255);

  margin-top: 25px;
}


.music-title {
  font-size: 18px;

  margin-bottom: 15px;
}


.band {
  color: rgb(255, 234, 0);

  font-size: 24px;

  font-weight: bold;

  margin-bottom: 8px;
}


.song {
  color: rgb(255, 234, 0);

  font-size: 20px;

  line-height: 1.4;

  margin-bottom: 20px;
}


.realplayer {
  display: inline-block;

  border: 2px solid rgb(102, 102, 102);

  background: rgb(17, 17, 17);

  padding: 8px 14px;

  color: rgb(204, 204, 204);

  font-size: 16px;

  font-weight: bold;
}



/* ============================================================
   MINI BOX / QUOTE OF THE DAY
   ============================================================ */

.mini-box {
  margin-top: 25px;

  border: 2px solid rgb(102, 102, 102);

  padding: 10px;

  text-align: center;

  background: rgba(0, 0, 0, 0.45);
}


.mini-title {
  color: rgb(51, 224, 255);

  font-weight: bold;

  margin-bottom: 8px;
}


.mini-text {
  color: rgb(255, 234, 0);

  font-size: 16px;

  font-weight: bold;
}



/* ============================================================
   MAIN CONTENT
   ============================================================ */

.content {
  flex: 1 1 0%;
}


.top-line,
.content hr {
  border-width: 2px medium medium;

  border-style: solid none none;

  border-color:
    rgb(207, 207, 207)
    currentcolor
    currentcolor;

  border-image: none;

  margin: 12px 0px 20px;
}



/* ============================================================
   BLINK MESSAGE
   ============================================================ */

.blink-box {
  text-align: center;

  color: rgb(255, 234, 0);

  font-size: 20px;

  font-weight: bold;

  margin-bottom: 18px;
}



/* ============================================================
   PHOTO + DYNAMIC CONTENT ROW
   ============================================================ */

.intro-row {
  display: flex;

  align-items: flex-start;

  gap: 40px;
}



/* ============================================================
   PHOTO BOX
   ============================================================ */

.photo-box {
  width: 420px;

  flex-shrink: 0;

  border: 4px solid rgb(29, 79, 255);

  padding: 0px;

  background: rgb(5, 5, 5);

  box-shadow:
    rgb(34, 34, 255) 0px 0px 10px;
}


.photo-box img {
  display: block;

  width: 100%;

  height: auto;

  cursor: pointer;
}


.photo-header {
  padding: 8px;

  text-align: center;

  color: rgb(51, 224, 255);

  font-size: 20px;

  font-weight: bold;

  border-bottom: 2px solid rgb(29, 79, 255);
}


.photo-message {
  text-align: center;

  color: rgb(255, 234, 0);

  font-size: 18px;

  font-weight: bold;

  padding: 8px 5px 4px;
}


.photo-caption {
  text-align: center;

  padding: 8px 12px;

  font-size: 16px;

  line-height: 1.4;

  color: rgb(255, 255, 255);
}


.photo-number {
  text-align: center;

  color: rgb(51, 224, 255);

  font-size: 14px;

  font-weight: bold;

  padding: 6px 5px 10px;
}



/* ============================================================
   ABOUT ME / DYNAMIC RIGHT SIDE
   ============================================================ */

.about-box {
  flex: 1 1 0%;

  min-width: 0;
}


.about-box h2,
.links-section h2 {
  color: rgb(51, 224, 255);

  font-size: 28px;

  margin: 0px 0px 12px;
}


.about-box p,
.about-box li,
.links-section p {
  font-size: 22px;

  line-height: 1.45;
}


.about-box ul {
  margin-top: 10px;

  padding-left: 30px;
}


.about-box hr {
  border-width: 2px medium medium;

  border-style: solid none none;

  border-color:
    rgb(138, 138, 138)
    currentcolor
    currentcolor;

  border-image: none;

  margin: 18px 0px;
}


.about-box a {
  color: rgb(255, 66, 255);

  font-weight: bold;
}


.about-box a:hover {
  color: rgb(51, 224, 255);
}


.big-quote {
  color: rgb(255, 234, 0);

  font-weight: bold;

  text-align: center;
}



/* ============================================================
   COOL LINKS
   ============================================================ */

.links-section {
  text-align: center;

  margin: 25px 0px 12px;
}


.links-section a {
  color: rgb(255, 66, 255);

  text-decoration: underline;

  font-weight: bold;
}


.links-section a:hover {
  color: rgb(51, 224, 255);
}



/* ============================================================
   UNDER CONSTRUCTION
   ============================================================ */

.construction-box {
  display: flex;

  justify-content: center;

  margin: 28px 0px;
}


.construction-inner {
  display: flex;

  align-items: center;

  gap: 20px;

  border: 4px dashed rgb(255, 234, 0);

  padding: 18px 28px;

  background: rgba(0, 0, 0, 0.55);

  max-width: 680px;
}


.worker {
  font-size: 50px;
}


.construction-title {
  color: rgb(255, 234, 0);

  font-size: 28px;

  font-weight: bold;

  margin-bottom: 8px;

  text-align: center;
}


.construction-text {
  font-size: 20px;

  text-align: center;
}



/* ============================================================
   VISITOR COUNTER
   ============================================================ */

.visitor-box {
  width: fit-content;

  margin: 25px auto;

  border: 3px solid rgb(191, 191, 191);

  padding: 12px 20px;

  font-size: 24px;

  color: rgb(51, 224, 255);

  background: rgba(0, 0, 0, 0.45);
}


.counter {
  color: rgb(0, 255, 51);

  font-size: 38px;

  font-weight: bold;

  margin-left: 15px;

  letter-spacing: 3px;
}



/* ============================================================
   NETSCAPE
   ============================================================ */

.netscape-box {
  text-align: center;

  margin: 20px 0px 45px;

  color: rgb(51, 224, 255);

  font-size: 20px;
}


.netscape-badge {
  display: inline-block;

  margin-top: 10px;

  padding: 12px 24px;

  border: 3px solid rgb(191, 191, 191);

  background:
    linear-gradient(
      to right,
      rgb(34, 51, 68),
      rgb(221, 221, 221)
    );

  color: rgb(17, 17, 17);

  font-weight: bold;

  font-size: 26px;
}


.netscape-badge img {
  max-width: 100%;

  height: auto;

  display: block;
}



/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  border-top: 2px solid rgb(207, 207, 207);

  padding-top: 24px;

  text-align: center;

  color: rgb(51, 224, 255);

  font-size: 24px;
}


.footer-small {
  font-size: 16px;
}



/* ============================================================
   RAP MUSIC REVIEWS
   ============================================================ */

.rap-intro {
  text-align: center;

  padding: 8px;

  font-size: 18px;

  line-height: 1.4;
}


.rap-review {
  display: flex;

  gap: 18px;

  align-items: flex-start;

  margin: 18px 0px;
}


.rap-review-info {
  flex: 1;

  min-width: 0;

  font-size: 16px;
}


.rap-review-info p {
  margin-top: 8px;

  font-size: 17px;

  line-height: 1.4;
}


.rap-artist {
  font-size: 21px;

  font-weight: bold;

  color: rgb(255, 234, 0);

  text-shadow:
    rgb(255, 0, 0) 1px 1px;
}


.rap-album {
  color: rgb(255, 255, 255);

  font-weight: bold;

  font-size: 18px;

  margin-top: 4px;
}


.rap-year {
  color: rgb(51, 224, 255);

  font-size: 14px;

  margin-top: 4px;
}


.rap-rating {
  color: rgb(255, 234, 0);

  font-size: 22px;

  margin-top: 6px;

  letter-spacing: 2px;
}


.rap-footer {
  text-align: center;

  color: rgb(255, 234, 0);

  font-size: 18px;

  font-weight: bold;

  margin-top: 15px;
}



/* ============================================================
   FAKE RAP ALBUM COVERS
   ============================================================ */

.fake-album-cover {
  width: 125px;

  min-width: 125px;

  height: 125px;

  border: 3px ridge rgb(204, 204, 204);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  box-sizing: border-box;

  padding: 8px;

  text-align: center;

  font-family: Arial, Helvetica, sans-serif;

  box-shadow:
    4px 4px 0px rgb(0, 0, 0);
}


.fake-cover-artist {
  font-size: 12px;

  font-weight: bold;

  letter-spacing: 1px;
}


.fake-cover-title {
  font-size: 17px;

  font-weight: 900;

  line-height: 1;
}



/* Fake Album #1 */

.rap-cover-1 {
  background:
    linear-gradient(
      135deg,
      rgb(255, 0, 0),
      rgb(0, 0, 0) 55%,
      rgb(255, 255, 0)
    );

  color: rgb(255, 255, 255);
}



/* Fake Album #2 */

.rap-cover-2 {
  background:
    repeating-linear-gradient(
      45deg,
      rgb(0, 51, 153),
      rgb(0, 51, 153) 10px,
      rgb(0, 0, 0) 10px,
      rgb(0, 0, 0) 20px
    );

  color: rgb(255, 255, 255);
}



/* Fake Album #3 */

.rap-cover-3 {
  background:
    linear-gradient(
      to bottom,
      rgb(255, 102, 0),
      rgb(51, 0, 0)
    );

  color: rgb(255, 255, 0);
}



/* Fake Album #4 */

.rap-cover-4 {
  background:
    radial-gradient(
      circle,
      rgb(102, 0, 153),
      rgb(0, 0, 0)
    );

  color: rgb(0, 255, 255);
}



/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1300px) {

  .page {
    width: auto;

    max-width: 1280px;

    padding-left: 20px;

    padding-right: 20px;
  }

}


@media (max-width: 900px) {

  .main-layout {
    flex-direction: column;
  }


  .sidebar {
    width: 100%;
  }


  .intro-row {
    flex-direction: column;
  }


  .photo-box {
    width: 100%;

    max-width: 420px;

    margin: 0px auto;
  }


  .about-box {
    width: 100%;
  }

}


@media (max-width: 650px) {

  .rap-review {
    flex-direction: column;

    align-items: center;
  }


  .rap-review-info {
    width: 100%;

    text-align: left;
  }


  .fake-album-cover {
    width: 150px;

    height: 150px;
  }

}