/* =========================================================
   IZ ONLINE — 2000s IM / MUSIC BLOG
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(circle at 15% 15%, rgba(87, 255, 221, .12), transparent 28%),
    radial-gradient(circle at 85% 75%, rgba(57, 180, 255, .10), transparent 32%),
    #0c1214;

  color: #cfe2e2;

  font-family:
    Tahoma,
    Verdana,
    Arial,
    sans-serif;

  font-size: 12px;

  scrollbar-color: #41696b #0b1113;
}

/* =========================================================
   MAIN APPLICATION WINDOW
   ========================================================= */

#window {
  width: min(1080px, calc(100% - 20px));
  margin: 25px auto;

  background: #151e20;

  border: 1px solid #557072;

  box-shadow:
    0 0 0 1px #050809,
    0 0 30px rgba(66, 255, 216, .09),
    0 15px 50px rgba(0, 0, 0, .7);
}

/* =========================================================
   TITLE BAR
   ========================================================= */

.titlebar {
  height: 31px;

  padding: 0 7px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background:
    linear-gradient(
      to bottom,
      #3d5d60 0%,
      #2b4548 45%,
      #1c2c2f 100%
    );

  border-bottom: 1px solid #070c0d;

  color: #efffff;

  font-size: 11px;
  font-weight: bold;
}

.titlebar-left {
  display: flex;
  align-items: center;
  gap: 7px;
}

.app-icon {
  width: 16px;
  height: 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #6df5d1;

  color: #112423;

  border: 1px solid #baffed;

  font-size: 10px;
  font-weight: bold;

  box-shadow:
    inset 1px 1px rgba(255,255,255,.7),
    inset -1px -1px rgba(0,0,0,.5);
}

.window-buttons {
  display: flex;
  gap: 3px;
}

.window-buttons span {
  width: 19px;
  height: 17px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #304b4e;

  border: 1px solid #688184;
  border-right-color: #0a1112;
  border-bottom-color: #0a1112;

  color: #d6e6e6;

  font-size: 10px;
}

/* =========================================================
   MENU
   ========================================================= */

.menu {
  height: 24px;

  padding: 0 9px;

  display: flex;
  align-items: center;
  gap: 17px;

  background: #101719;

  border-bottom: 1px solid #314749;

  color: #91aaaa;

  font-size: 10px;
}

.menu span:first-child {
  color: #73f4d0;
}

.menu span:hover {
  color: white;
}

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

.content {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);

  gap: 8px;

  padding: 8px;
}

/* =========================================================
   PANELS
   ========================================================= */

.panel {
  margin-bottom: 8px;

  background: #101719;

  border: 1px solid #405a5d;

  box-shadow:
    inset 1px 1px rgba(255,255,255,.025),
    inset -1px -1px rgba(0,0,0,.6);
}

.panel-title {
  min-height: 25px;

  padding: 5px 7px;

  background:
    linear-gradient(
      to bottom,
      #2b494c,
      #1c3033
    );

  border-bottom: 1px solid #091011;

  color: #82f7dc;

  font-size: 10px;
  font-weight: bold;
}

.panel-body {
  padding: 8px;
}

/* =========================================================
   PROFILE
   ========================================================= */

.profile {
  text-align: center;
}

.avatar {
  width: 72px;
  height: 72px;

  margin: 2px auto 8px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle,
      #315b5b,
      #142629 70%
    );

  border: 1px solid #68d9c0;

  color: #7df5d5;

  font-size: 28px;

  box-shadow:
    inset 0 0 15px rgba(95,255,220,.13),
    0 0 12px rgba(95,255,220,.05);
}

.username {
  color: white;

  font-size: 14px;
  font-weight: bold;
}

.status {
  margin-top: 4px;

  color: #6ff1cc;

  font-size: 9px;
}

.status::before {
  content: "● ";

  color: #72f5d0;
}

/* =========================================================
   AWAY MESSAGE
   ========================================================= */

.away {
  margin-top: 8px;

  padding: 5px;

  background: #0a1011;

  border: 1px dotted #30494b;

  color: #789595;

  font-size: 9px;

  text-align: left;

  line-height: 1.4;
}

.away strong {
  color: #8bd8c7;
}

/* =========================================================
   BUDDY LIST
   ========================================================= */

.buddy {
  display: flex;
  align-items: center;

  padding: 5px 3px;

  border-bottom: 1px dotted #293d3f;

  color: #b9cccc;
}

.buddy:last-child {
  border-bottom: 0;
}

.buddy-icon {
  width: 19px;

  margin-right: 3px;

  color: #6ff3d0;

  text-align: center;
}

.buddy.offline {
  color: #5e7071;
}

.buddy.offline .buddy-icon {
  color: #465657;
}

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

.nav a {
  display: block;

  padding: 5px 6px;

  color: #a6e5db;

  text-decoration: none;

  border-bottom: 1px dotted #293d3f;
}

.nav a:last-child {
  border-bottom: 0;
}

.nav a::before {
  content: "» ";

  color: #6ef1cf;
}

.nav a:hover {
  background: #1c3032;

  color: white;
}

/* =========================================================
   MUSIC PLAYER
   ========================================================= */

.player {
  background: #090e0f;
}

.player-screen {
  padding: 7px;

  background:
    linear-gradient(
      135deg,
      #0b1718,
      #101f20
    );

  border: 1px solid #293c3d;

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

.track {
  overflow: hidden;

  color: #82f7d9;

  white-space: nowrap;

  font-size: 10px;
  font-weight: bold;
}

.artist {
  margin-top: 2px;

  color: #638787;

  font-size: 9px;
}

.visualizer {
  height: 34px;

  margin: 8px 0;

  padding: 2px;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  gap: 2px;

  background: #060a0b;

  border: 1px solid #253637;
}

.visualizer span {
  width: 5px;

  background: #54d9bc;

  animation: bars .75s infinite alternate ease-in-out;
}

.visualizer span:nth-child(1) {
  height: 12px;
}

.visualizer span:nth-child(2) {
  height: 22px;
  animation-delay: .12s;
}

.visualizer span:nth-child(3) {
  height: 16px;
  animation-delay: .25s;
}

.visualizer span:nth-child(4) {
  height: 27px;
  animation-delay: .08s;
}

.visualizer span:nth-child(5) {
  height: 11px;
  animation-delay: .32s;
}

.visualizer span:nth-child(6) {
  height: 23px;
  animation-delay: .17s;
}

.visualizer span:nth-child(7) {
  height: 15px;
  animation-delay: .28s;
}

.visualizer span:nth-child(8) {
  height: 25px;
  animation-delay: .05s;
}

@keyframes bars {
  from {
    transform: scaleY(.35);
  }

  to {
    transform: scaleY(1);
  }
}

.progress {
  height: 6px;

  margin-bottom: 7px;

  background: #050809;

  border: 1px solid #263738;
}

.progress-bar {
  width: 43%;
  height: 100%;

  background: #58d8bd;
}

.player-buttons {
  display: flex;

  gap: 3px;
}

.player-buttons button {
  flex: 1;

  padding: 3px 0;

  background:
    linear-gradient(
      to bottom,
      #30484b,
      #172527
    );

  border: 1px solid #607679;
  border-right-color: #070c0d;
  border-bottom-color: #070c0d;

  color: #bcece4;

  font-family: Tahoma, sans-serif;

  font-size: 9px;

  cursor: pointer;
}

.player-buttons button:hover {
  color: white;
}

.player-buttons button:active {
  border-color: #070c0d;
  border-right-color: #607679;
  border-bottom-color: #607679;
}

/* =========================================================
   BLOG
   ========================================================= */

.blog {
  min-width: 0;
}

.welcome {
  padding: 11px;

  background:
    linear-gradient(
      135deg,
      rgba(72, 153, 145, .15),
      rgba(15, 31, 34, .05)
    );

  border-bottom: 1px dotted #365153;
}

.welcome h1 {
  margin: 0 0 5px;

  color: #88ffe4;

  font-size: 17px;

  letter-spacing: -.5px;
}

.welcome p {
  margin: 0;

  color: #91adad;

  line-height: 1.5;
}

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

.chat {
  padding: 11px;
}

.message {
  display: grid;

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

  gap: 7px;

  margin-bottom: 14px;
}

.message:last-child {
  margin-bottom: 0;
}

.message-icon {
  width: 31px;
  height: 31px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      135deg,
      #294b4d,
      #172729
    );

  border: 1px solid #58787a;

  color: #79f4d3;

  font-size: 14px;

  box-shadow:
    inset 1px 1px rgba(255,255,255,.06);
}

.message-header {
  margin-bottom: 3px;

  color: #75f2d1;

  font-size: 10px;
  font-weight: bold;
}

.message-header time {
  margin-left: 7px;

  color: #587274;

  font-size: 9px;
  font-weight: normal;
}

.message-body {
  padding: 8px 9px;

  background: #172224;

  border: 1px solid #32494b;

  color: #c6d8d8;

  line-height: 1.6;

  box-shadow:
    inset 1px 1px rgba(255,255,255,.015);
}

.message-body strong {
  display: block;

  margin-bottom: 3px;

  color: #e9ffff;

  font-size: 12px;
}

.message-body a {
  color: #70efd0;

  text-decoration: none;
}

.message-body a:hover {
  color: white;

  text-decoration: underline;
}

.message-meta {
  margin-top: 4px;

  color: #526c6d;

  font-size: 9px;
}

.message-meta span {
  margin-right: 10px;
}

.message-meta .music-tag {
  color: #6bcdb8;
}

/* =========================================================
   DATE DIVIDERS
   ========================================================= */

.date-divider {
  display: flex;
  align-items: center;

  gap: 8px;

  margin: 16px 0;

  color: #536e70;

  font-family: "Courier New", monospace;

  font-size: 9px;

  white-space: nowrap;
}

.date-divider::before,
.date-divider::after {
  content: "";

  height: 1px;

  flex: 1;

  background: #263b3d;
}

/* =========================================================
   ARCHIVE BUTTON
   ========================================================= */

.archive-link {
  display: block;

  margin: 4px auto 2px;

  width: fit-content;

  padding: 6px 12px;

  background:
    linear-gradient(
      to bottom,
      #30484b,
      #172527
    );

  border: 1px solid #607679;

  color: #7cefd2;

  text-decoration: none;

  font-size: 9px;
}

.archive-link:hover {
  color: white;

  background: #294548;
}

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

.footer {
  padding: 8px;

  background: #0e1517;

  border-top: 1px solid #304547;

  color: #50696a;

  text-align: center;

  font-size: 9px;
}

.footer strong {
  color: #71cdb8;
}

/* =========================================================
   POST EDITOR
   ========================================================= */

#postForm label {
  display: block;

  margin: 10px 0 5px;

  color: #71f3d0;

  font-size: 10px;
  font-weight: bold;
}

#postForm input,
#postForm select,
#postForm textarea {
  width: 100%;

  padding: 7px;

  background: #0a1011;

  border: 1px solid #40595b;
  border-right-color: #172526;
  border-bottom-color: #172526;

  color: #d8eeee;

  font-family: Tahoma, Verdana, Arial, sans-serif;

  font-size: 12px;

  outline: none;
}

#postForm input:focus,
#postForm select:focus,
#postForm textarea:focus {
  border-color: #70f5d0;

  box-shadow:
    0 0 7px rgba(112,245,208,.12);
}

#postForm textarea {
  min-height: 230px;

  resize: vertical;

  line-height: 1.55;
}

.post-preview {
  margin-top: 16px;

  border: 1px solid #40595b;

  background: #11191b;
}

#preview {
  min-height: 80px;

  padding: 10px;
}

.post-actions {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 15px;
}

.post-actions button,
.post-actions a {
  padding: 6px 10px;

  background:
    linear-gradient(
      to bottom,
      #314648,
      #172628
    );

  border: 1px solid #617477;
  border-right-color: #080e0f;
  border-bottom-color: #080e0f;

  color: #bcece5;

  font-family: Tahoma, Verdana, Arial, sans-serif;

  font-size: 10px;

  text-decoration: none;

  cursor: pointer;
}

.post-actions button:hover,
.post-actions a:hover {
  color: white;

  background: #294548;
}

/* =========================================================
   SCROLLBARS
   ========================================================= */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0d1315;
}

::-webkit-scrollbar-thumb {
  background: #365b5e;

  border: 1px solid #152122;
}

::-webkit-scrollbar-thumb:hover {
  background: #4a7779;
}

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

@media (max-width: 700px) {

  #window {
    width: calc(100% - 8px);

    margin: 4px auto;
  }

  .content {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;
  }

  .sidebar .panel {
    margin-bottom: 0;
  }

  .profile {
    grid-column: span 2;
  }
}

@media (max-width: 450px) {

  .sidebar {
    display: block;
  }

  .profile {
    grid-column: auto;
  }

  .menu {
    gap: 9px;

    overflow: hidden;

    white-space: nowrap;
  }

  .message {
    grid-template-columns: 29px minmax(0, 1fr);
  }

  .message-icon {
    width: 27px;
    height: 27px;
  }
}