/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
  --panel-border: darkcyan;
  --panel-header-bg: rgb(63, 184, 184);
  --panel-header-text: #ffffff;
  --panel-body-bg: rgb(177, 200, 241);
  --panel-body-alt: rgb(200, 220, 250);
  --panel-text: #1a1a1a;
  --panel-link: darkslateblue;
  --panel-radius: 5px;
}

body {
  background: linear-gradient(rgb(63, 184, 184), rgb(255, 192, 231));

  color: black;
  max-width: fit-content;
  margin: 0 auto;

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

#clock {
  z-index: 1;
  position: absolute;
  width: 555px;
  height: 119px;
  top: -16px;
  right: 55px;
  /* image-rendering: pixelated; */
  background-image: url(images/clock.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#time {
  margin: 49px auto 0;
  width: fit-content;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 45px;
  color: #b38380;
}

.quote {
  background-color: white;
  color: black;
  border: 2px solid darkslateblue;
  border-radius: 12px;
  padding: 15px;
}

header {
  grid-area: banner;
  width: fit-content;
  max-width: max-content;
}
aside#asideWrp {
  width: 260px;
  flex-shrink: 0;
}

main#mainWrp {
  flex: 1;
  min-width: 0;
}
.pannel-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background-color: rgb(177, 200, 241);
  border: 2px solid darkcyan;
  border-radius: 5px;
  padding: 15px;
}

.panel-header {
  background: var(--panel-header-bg);
  color: var(--panel-header-text);
  font-weight: bold;
  padding: 4px 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.panel-header::before {
  content: "🎀";
  font-size: 11px;
}

.panel-body {
  padding: 8px;
  color: var(--panel-text);
  line-height: 1.4;
}

.panel-body a {
  color: var(--panel-link);
  text-decoration: underline;
}

.panel-table {
  width: 100%;
  border-collapse: collapse;
}
.panel-table td {
  padding: 4px 6px;
  border-bottom: 1px solid #e2d0d6;
}
.panel-table tr:nth-child(even) td {
  background: var(--panel-body-alt);
}

.badge-box {
  text-align: center;
}
.badge-box img {
  width: 88px;
  height: 31px;
  display: block;
  margin: 0 auto 6px;
  border: 1px solid #999;
}
.badge-box textarea {
  width: 95%;
  height: 50px;
  font-size: 10px;
  font-family: monospace;
  resize: none;
}
.badge-caption {
  font-size: 10px;
  color: #7a5c63;
  margin-top: 4px;
}

/* Blog page */
.blog-page {
  box-sizing: border-box;
  min-height: 100vh;
  width: 100%;
  max-width: none;
  padding: 0 16px;
}

.blog-page *,
.blog-page *::before,
.blog-page *::after {
  box-sizing: border-box;
}

#blogMain {
  width: min(680px, 100%);
  margin: 0 auto;
  padding: 42px 0 70px;
}

.blog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.blog-header h1 {
  margin: 0;
  color: darkslateblue;
  font-size: 28px;
}

.sub,
.count,
time,
.empty {
  color: #7a5c63;
  font-size: 13px;
}

.sub {
  margin-top: 4px;
}

.blog-page button {
  border: 2px solid darkcyan;
  border-radius: var(--panel-radius);
  padding: 8px 14px;
  background: var(--panel-header-bg);
  color: var(--panel-header-text);
  cursor: pointer;
  font: inherit;
  font-weight: bold;
}

.blog-page button:hover {
  background: darkcyan;
}

.blog-page button.secondary {
  background: var(--panel-body-alt);
  color: var(--panel-text);
}

.blog-back {
  display: inline-block;
  margin-top: 16px;
  border: 2px solid darkcyan;
  border-radius: var(--panel-radius);
  padding: 6px 14px;
  background: var(--panel-header-bg);
  color: var(--panel-header-text);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
}

.blog-back:hover {
  background: darkcyan;
}

.composer {
  display: none;
  margin-bottom: 20px;
  border: 2px solid darkcyan;
  border-radius: var(--panel-radius);
  padding: 15px;
  background: var(--panel-body-bg);
}

.composer.visible {
  display: block;
}

.composer textarea {
  display: block;
  width: 100%;
  min-height: 105px;
  resize: vertical;
  border: 1px solid darkcyan;
  padding: 8px;
  background: #fff;
  color: var(--panel-text);
  font: inherit;
}

.compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid darkcyan;
  margin-top: 10px;
  padding-top: 10px;
}

#posts article {
  position: relative;
  margin: 14px 0;
  border: 2px solid darkcyan;
  border-radius: var(--panel-radius);
  padding: 16px;
  background: var(--panel-body-bg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#posts article p {
  margin: 0 0 14px;
}

.delete {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px !important;
  background: transparent !important;
  color: var(--panel-link) !important;
  font-size: 12px !important;
}

.empty {
  padding: 42px 0;
  text-align: center;
}

.blog-page dialog {
  width: min(360px, calc(100% - 32px));
  border: 2px solid darkcyan;
  border-radius: var(--panel-radius);
  padding: 24px;
  background: var(--panel-body-bg);
  color: var(--panel-text);
  font: inherit;
}

.blog-page dialog::backdrop {
  background: rgb(0 0 0 / 40%);
}

.blog-page dialog h2 {
  margin: 0 0 14px;
  color: darkslateblue;
  font-size: 20px;
}

.blog-page input {
  width: 100%;
  margin-bottom: 14px;
  border: 1px solid darkcyan;
  border-radius: var(--panel-radius);
  padding: 10px;
  background: #fff;
  color: var(--panel-text);
  font: inherit;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 520px) {
  .blog-header {
    align-items: stretch;
    flex-direction: column;
  }

  .blog-header button {
    align-self: flex-start;
  }
}