/* =========================================================
   STROFTHUB
   OLD WEB / FRUTIGER AERO / PERSONAL HOMEPAGE
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  background: #62dff5;
}

body {
  margin: 0;

  color: #111;

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

  font-size: 12px;

  /*
    ACTUAL tiled web background.
  */

  background-color: #72e3f4;

  background-image:
    url("https://brooklynights.nekoweb.org/sky_tile.gif");

  background-repeat: repeat;

  background-attachment: fixed;

  cursor:
    url("https://brooklynights.nekoweb.org/definecur.png"),
    auto;
}


/* =========================================================
   SITE WIDTH
   ========================================================= */

.site {

  width: 100%;

  max-width: 1180px;

  margin: 0 auto;

  padding:
    14px
    12px
    40px;
}


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

.top-header {

  position: relative;

  height: 118px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    20px
    28px;

  overflow: hidden;

  border:
    2px solid #001c9c;

  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      #55e4ff 0%,
      #1878ef 17%,
      #1223c9 60%,
      #071aa8 100%
    );

  box-shadow:

    inset 0 2px 0 #91f6ff,
    inset 0 -5px 0 #06127a,

    0 3px 0 #ffffff,
    0 5px 12px rgba(0,0,100,.35);
}


/* rainbow-ish decorative glow */

.top-header::before {

  content: "";

  position: absolute;

  width: 360px;
  height: 150px;

  left: 36%;

  top: -40px;

  background:
    linear-gradient(
      125deg,
      transparent 20%,
      rgba(255,0,255,.45),
      rgba(0,255,255,.35),
      transparent 65%
    );

  transform: rotate(-15deg);

  opacity: .75;

  pointer-events: none;
}


/* =========================================================
   SITE TITLE
   ========================================================= */

.header-title {

  position: relative;

  z-index: 2;

  color: white;

  text-shadow:
    2px 2px #07147b;
}

.site-name {

  font-family:
    Georgia,
    serif;

  font-size: 36px;

  font-weight: bold;

  line-height: 1;
}

.site-url {

  margin-top: 5px;

  font-family:
    "Courier New",
    monospace;

  font-size: 12px;
}


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

.header-decoration {

  position: absolute;

  left: 45%;

  color: white;

  font-family: Georgia, serif;

  font-size: 24px;

  text-shadow:
    2px 2px #00116c;

  opacity: .9;
}

.header-decoration span {

  font-size: 18px;

  margin:
    0 10px;
}


/* =========================================================
   CLOCK
   ========================================================= */

.clock {

  position: relative;

  z-index: 2;

  padding:
    18px
    25px;

  border-radius: 28px;

  border:
    3px solid #7deeff;

  background:
    linear-gradient(
      180deg,
      #fffef0,
      #eafffa
    );

  box-shadow:

    inset 0 4px 0 white,
    inset 0 -5px 0 #9fd7d8,

    0 2px 0 #001783;

  color: #07146d;

  font-family:
    Georgia,
    serif;

  font-size: 24px;

  font-weight: bold;
}


/* =========================================================
   BUTTON STRIP
   ========================================================= */

.button-strip {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 3px;

  min-height: 42px;

  margin:
    8px 0;

  padding:
    4px;

  overflow: hidden;

  border:
    2px solid #001ca7;

  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      #f6ffff,
      #79dff4
    );

  box-shadow:
    inset 0 2px white,
    inset 0 -2px #4e9ab0;
}

.button-strip img {

  max-width: 120px;

  max-height: 31px;

  width: auto;

  height: auto;

  object-fit: contain;
}


/* =========================================================
   THREE COLUMNS
   ========================================================= */

.layout {

  display: grid;

  grid-template-columns:
    212px
    minmax(450px, 1fr)
    275px;

  gap: 10px;

  align-items: start;
}


/* =========================================================
   WINDOW
   ========================================================= */

.window {

  margin-bottom: 10px;

  border:
    2px solid #001a9f;

  border-radius: 9px;

  overflow: hidden;

  background: white;

  box-shadow:

    0 2px 0 white,

    inset 0 0 0 1px #0732e5,

    0 3px 7px rgba(0,0,100,.25);
}


/* =========================================================
   WINDOWS-STYLE TITLE BAR
   ========================================================= */

.window-title {

  height: 32px;

  display: flex;

  align-items: center;

  gap: 6px;

  padding:
    0 8px;

  color: white;

  font-family:
    Georgia,
    serif;

  font-size: 15px;

  font-weight: bold;

  background:
    linear-gradient(
      180deg,
      #5de6ff 0%,
      #1959ec 18%,
      #071ec9 55%,
      #07139b 100%
    );

  border-bottom:
    2px solid #001078;

  text-shadow:
    1px 1px #00117c;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.75);
}

.window-buttons {

  margin-left: auto;

  font-family:
    Arial,
    sans-serif;

  font-size: 11px;
}


/* =========================================================
   WINDOW BODY
   ========================================================= */

.window-body {

  padding: 10px;

  background:
    #ffffff;
}


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

.nav-body {

  padding:
    8px 10px 12px;
}

.nav-label {

  margin:
    0 0 4px;

  padding:
    2px;

  text-align: center;

  color: #111;

  font-size: 14px;

  font-weight: bold;

  background:
    linear-gradient(
      90deg,
      #b91fff,
      #2bbcff,
      #ffdf00,
      #ff349e
    );
}

.nav-body a {

  display: block;

  margin:
    4px 0;

  padding:
    5px;

  color: #111;

  text-align: center;

  text-decoration: none;

  border:
    1px solid #0054a6;

  background:
    linear-gradient(
      180deg,
      #fff,
      #dff8ff
    );

  box-shadow:
    inset 0 1px white;

  font-size: 12px;
}

.nav-body a:hover {

  background:
    linear-gradient(
      180deg,
      #c9f8ff,
      #7ad8ff
    );

  color: #001b9b;
}


/* =========================================================
   CENTERING
   ========================================================= */

.centered {

  text-align: center;
}


/* =========================================================
   SITE BUTTON
   ========================================================= */

.site-button {

  max-width: 100%;

  image-rendering: auto;

  border:
    1px solid #777;

  box-shadow:
    1px 1px 0 white;
}


/* =========================================================
   TINY TEXT
   ========================================================= */

.tiny {

  font-size: 9px;

  line-height: 1.55;

  margin:
    7px 0;
}


/* =========================================================
   UPDATE LOG
   ========================================================= */

.update-log {

  height: 205px;

  overflow-y: auto;

  font-size: 10px;

  line-height: 1.6;
}

.update-log ul {

  padding-left: 17px;

  margin-top: 4px;
}

.update-log hr {

  border: none;

  border-top:
    1px dashed #222;

  margin:
    8px 0;
}


/* =========================================================
   STATUS
   ========================================================= */

.status div {

  display: flex;

  justify-content: space-between;

  gap: 5px;

  padding:
    5px 0;

  border-bottom:
    1px dotted #aaa;
}

.status div:last-child {

  border-bottom: none;
}

.status span {

  color: #555;
}

.status b {

  color: #063ca4;
}


/* =========================================================
   PAGE HEADING
   ========================================================= */

.page-heading {

  margin:
    0 0 8px;

  padding:
    3px;

  text-align: center;

  color: white;

  font-family:
    Georgia,
    serif;

  font-size: 21px;

  font-weight: bold;

  text-shadow:
    1px 1px #061b9b;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      #1626c8 28%,
      #0816c2 72%,
      #ffffff
    );

  border-bottom:
    1px solid #1424a9;
}


/* =========================================================
   HERO COLLAGE
   ========================================================= */

.hero-collage {

  display: grid;

  grid-template-columns:
    1.5fr
    1fr;

  grid-template-rows:
    1fr 1fr;

  gap: 3px;

  height: 225px;

  margin-bottom: 12px;

  padding: 3px;

  border:
    1px dashed #555;

  background: #fff;
}

.hero-collage img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border:
    1px solid #888;
}

.hero-collage img:first-child {

  grid-row:
    1 / 3;
}


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

.content-text {

  font-family:
    "Courier New",
    monospace;

  font-size: 12px;

  line-height: 1.55;
}

.content-text p {

  margin:
    12px 0;
}


/* =========================================================
   MINI BUTTONS
   ========================================================= */

.mini-buttons {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 7px;

  margin:
    14px 0;
}

.mini-buttons img {

  max-width: 90px;

  max-height: 35px;

  width: auto;

  height: auto;

  transition:
    transform .12s;
}

.mini-buttons img:hover {

  transform:
    translateY(-2px)
    rotate(-2deg);
}


/* =========================================================
   PROGRESS
   ========================================================= */

.progress-box {

  margin:
    10px 0;

  padding:
    5px;

  overflow: hidden;

  white-space: nowrap;

  color: #111;

  border:
    2px solid #0610c0;

  background:
    #faffff;

  box-shadow:
    inset 0 0 0 2px #66d9ff;

  text-align: center;

  font-size: 9px;
}

.progress-box b {

  color: #ffde00;

  text-shadow:
    1px 1px #111;

  letter-spacing: 1px;
}


/* =========================================================
   FEATURE
   ========================================================= */

.feature {

  display: grid;

  grid-template-columns:
    145px
    1fr;

  gap: 12px;

  padding:
    8px;

  border:
    1px dashed #555;

  background:
    linear-gradient(
      135deg,
      #fff,
      #eafaff
    );
}

.feature img {

  width: 145px;

  height: 110px;

  object-fit: contain;

  background: #fff;

  border:
    1px solid #999;
}

.feature h3 {

  margin:
    0 0 8px;

  color: #071cae;

  font-family:
    Georgia,
    serif;

  font-size: 18px;
}

.feature p {

  font-size: 10px;

  line-height: 1.55;
}


/* =========================================================
   OLD WEB LINKS
   ========================================================= */

a {

  color: #001baf;

  font-weight: bold;
}

a:hover {

  color: #e0009b;
}


/* =========================================================
   SCRAPBOOK
   ========================================================= */

.scrapbook {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding:
    10px;

  border:
    1px dotted #888;

  background:
    #f9ffff;
}

.scrapbook img {

  max-width: 100px;

  max-height: 60px;

  object-fit: contain;

  transition:
    transform .15s;
}

.scrapbook img:nth-child(odd) {

  transform:
    rotate(-2deg);
}

.scrapbook img:nth-child(even) {

  transform:
    rotate(2deg);
}

.scrapbook img:hover {

  transform:
    rotate(0)
    scale(1.1);
}


/* =========================================================
   CHAT
   ========================================================= */

.chat {

  height: 285px;

  overflow-y: auto;

  background:
    #fff;
}

.chat-message {

  padding:
    8px 10px;

  border-bottom:
    1px solid #ddd;

  font-family:
    Arial,
    sans-serif;

  font-size: 11px;
}

.chat-message b {

  display: inline-block;

  color: #333;
}

.chat-message span {

  float: right;

  color: #777;

  font-size: 9px;
}

.chat-message p {

  margin:
    5px 0 0;
}

.chat-input {

  display: flex;

  border-top:
    2px solid #1021a8;

  background:
    #f1f1f1;
}

.chat-input input {

  flex: 1;

  min-width: 0;

  padding:
    8px;

  border: none;

  outline: none;

  font-family:
    Arial,
    sans-serif;
}

.chat-input button {

  width: 35px;

  border: none;

  color: white;

  background:
    linear-gradient(
      #4cdcff,
      #0930c6
    );
}


/* =========================================================
   RANDOM IMAGE
   ========================================================= */

.random-image {

  display: block;

  width: 100%;

  max-height: 130px;

  object-fit: contain;

  margin-bottom: 8px;
}


/* =========================================================
   RIGHT LINKS
   ========================================================= */

.link-list a {

  display: block;

  padding:
    5px;

  border-bottom:
    1px dotted #aaa;

  text-decoration: none;
}


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

footer {

  margin-top: 12px;

  padding:
    12px;

  text-align: center;

  border:
    2px solid #0020a0;

  background:
    rgba(255,255,255,.85);

  box-shadow:
    inset 0 2px white;
}

footer img {

  max-width: 100px;
}

footer p {

  margin:
    5px 0;

  font-size: 9px;

  line-height: 1.5;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

  .layout {

    grid-template-columns:
      180px
      minmax(0, 1fr);
  }

  .rightbar {

    grid-column:
      1 / -1;

    display: grid;

    grid-template-columns:
      repeat(2, 1fr);

    gap: 10px;
  }

  .rightbar .window {

    margin-bottom: 0;
  }

}


@media (max-width: 600px) {

  .site {

    padding:
      6px;
  }

  .top-header {

    height: 100px;

    padding:
      15px;
  }

  .site-name {

    font-size: 25px;
  }

  .clock {

    padding:
      10px;

    font-size: 17px;
  }

  .header-decoration {

    display: none;
  }

  .layout {

    display: block;
  }

  .sidebar,
  .rightbar {

    display: block;
  }

  .hero-collage {

    height: 180px;
  }

  .button-strip {

    justify-content: flex-start;

    overflow-x: auto;
  }

}