/* ==============================================================
   01. SITE SETTINGS
   Edit these variables to quickly change the layout and colors.
   ============================================================== */

:root {
  --container-background: #fafafa;
  --panel-background: #ffbcda90;
  --soft-gray: #f0f0f0;
  --medium-gray: #dddddd;
  --dark-gray: #8f8f8f;
  --text-color: #000000;
  --link-color: #797979;
  --accent: #8476d6;
  --accent-dark: #fd71b0;
  --border-color: #8278c1;

  --content-width: 680px;
  --sidebar-width: 160px;
  --site-width: var(--content-width);

  --header-height: 180px;
  --header-overlap: 20px;
}

@font-face {
  font-family: "Bangalore";
  src: url("fonts/Bangalor.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==============================================================
   02. RESET + GLOBAL ELEMENTS
   ============================================================== */

* {
  box-sizing: border-box;
  cursor: url("images/cursor_iys.webp") 0 0, auto;
}

html {
  color-scheme: light;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 15px;

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

  background-color: #8476d6;
  background-image: url("images/unicorn_bg_iys.png");
  background-attachment: fixed;
  background-repeat: repeat;

  color: var(--text-color);
  font-family: "Silkscreen", sans-serif;
  font-size: 10px;
  line-height: 10px;
}

/*
  Regular images keep their natural dimensions.

  Because they are inline elements, they can sit beside text.
  If an image does not fit in the remaining space, it moves
  to the following line like a word.
*/
img {
  width: auto;
  max-width: none;
  height: auto;
 
}



a {
  display: inline-block;
  color: var(--link-color);
  text-decoration: none;
  transition:
    color 150ms ease,
    font-size 150ms ease,
    transform 150ms ease;
}

a:hover,
a:focus-visible {
  color: var(--accent);
  font-size: calc(1em + 2px);
  transform: translate(-2px, -2px) skew(-3deg);
}

strong,
em,
u {
  color: var(--accent);
}

s {
  color: #bebebe;
}

p {
  margin: 0 0 1em;
}

/* ==============================================================
   03. ACCESSIBILITY
   ============================================================== */

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 12px;
  color: #ffffff;
  background: var(--accent-dark);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==============================================================
   04. SITE SHELL
   Holds the transparent header and the main site container.

   Total desktop width:
   680px content + 160px sidebar = 840px
   ============================================================== */

.site-shell {
  width: min(100%, var(--site-width));
  margin: 0 auto;
}

/* ==============================================================
   05. TRANSPARENT HEADER
   ============================================================== */

.site-header {
  position: relative;
  z-index: 2;

  width: 100%;
  height: var(--header-height);
  margin-bottom: calc(var(--header-overlap) * -1);

  background: transparent;
  text-align: center;
}

/*
  Header images are responsive so an 840px image does not
  overflow on smaller screens.
*/
.site-header img {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ==============================================================
   06. MAIN SITE CONTAINER
   ============================================================== */

.site-container {
  position: relative;
  z-index: 1;

  width: 100%;
  margin: 0 auto;
  padding: 5px;

  background-color: var(--container-background);

  /* Optional old container texture:
  background-image: url("images/container-background.png");
  */

  border: 3px solid var(--border-color);
  border-radius: 7px;
  box-shadow: 1px 0 11px #000000;
  overflow: hidden;
}

/* ==============================================================
   07. UPDATE BOX
   ============================================================== */

.updates-grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.update-card {
  padding: 8px;
  background: var(--panel-background);
  border-radius: 7px;
}

.update-card h2 {
  margin: 0 0 7px;
  padding: 3px 6px;
  color: var(--accent-dark);
  background-image: url("images/cat2.gif");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: auto 100%;

  font-family: "Bangalore", fantasy;
  font-size: 10px;
  font-weight: 400;
}

.update-card p {
  font-size: 9px;
  text-align: left;
}

.two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

/* ==============================================================
   08. SIDEBAR + MAIN CONTENT COLUMNS
   ============================================================== */

.page-columns {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  align-items: start;
}

.right-column {
  min-width: 0;
}

.sidebar {
  padding: 6px;
}

.main-content {
  min-width: 0;
  padding: 6px 9px;
}
.main-content p {
  font-size: 9px;
  line-height: 10px;
}
.comment-section {
  width: 50%;
  box-sizing: border-box;
  padding: 24px;

  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 10px;
}

/* Ensure the loaded widget stays inside the section */
#HCB_comment_box {
  width: 100%;
  overflow-wrap: anywhere;
}

#HCB_comment_box textarea,
#HCB_comment_box input[type="text"] {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Use the full content width on phones and tablets */
@media (max-width: 768px) {
  .comment-section {
    width: 100%;
    padding: 16px;
  }
}

/* ==============================================================
   09. SIDEBAR NAVIGATION
   ============================================================== */

.navigation h2,
.sidebar-section h2 {
  display: flex;
  align-items: center;
  margin: 0 0 1px;
  padding: 0;
  color: #fd71b0;
  font-family: "Bangalore", fantasy;
  font-size: 12px;
}

.navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation li {
  border-bottom: 1px solid #d8d8d8;
}

.navigation a {
  display: block;
  width: 100%;
  padding: 4px 8px 4px 12px;
  color: var(--dark-gray);
  background: #e6e6e6;
}

.navigation a:hover,
.navigation a:focus-visible,
.navigation a[aria-current="page"] {
  color: #555555;
  background: var(--soft-gray);
}

.sidebar-section {
  margin-top: 18px;
}

/* ==============================================================
   10. CONTENT CARDS + HEADINGS
   ============================================================== */

.content-card {
  margin-bottom: 16px;
  text-align: center;
}

.content-card h1 {
  margin: 0 0 8px;
  padding-bottom: 1px;
  color: var(--accent-dark);
  font-size: 10px;
}

/* ==============================================================
   11. DECORATIVE BOX
   ============================================================== */

.box22 {
  width: 80%;
  margin: 1em auto;
}

.u01 {
  height: 18px;
  margin: 0 18px 0 19px;
  background: url("images/f-ue.gif") repeat-x;
}

.s01 {
  height: 19px;
  margin: 0 18px 0 19px;
  background: url("images/f-sita.gif") repeat-x;
}

.box-top {
  height: 18px;

  background-image:
    url("images/f-kado1.gif"),
    url("images/f-kado2.gif");

  background-position:
    top left,
    top right;

  background-repeat:
    no-repeat,
    no-repeat;
}

.box-center {
  background-image:
    url("images/f-migi.gif"),
    url("images/f-hidari.gif");

  background-position:
    top right,
    top left;

  background-repeat:
    repeat-y,
    repeat-y;
}

.box-inner {
  height: 100px;
  margin: 0 18px 0 19px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #ffffff;
}

.box-bottom {
  height: 19px;

  background-image:
    url("images/f-kado3.gif"),
    url("images/f-kado4.gif");

  background-position:
    top left,
    top right;

  background-repeat:
    no-repeat,
    no-repeat;
}

/* ==============================================================
   12. REUSABLE CODE BOX
   ============================================================== */

.code-scroll {
  width: 110px;
  max-width: 100%;
  height: 30px;
  padding: 8px;
  overflow: scroll;

  color: #27436b;
  border: 2px dotted #ef8b20;
  border-radius: 5px;
  box-shadow: inset 1px 1px 2px rgba(0, 20, 20, 0.35);

  text-align: left;
}

.code-scroll pre {
  min-width: max-content;
  margin: 0;
  font: inherit;
  white-space: pre;
}

.code-scroll code {
  font: inherit;
}

textarea.code-scroll {
  display: block;
  resize: none;
  font: inherit;
  white-space: pre;
}

/* ==============================================================
   13. PUFFY BOX
   ============================================================== */

.puffy-box {
  display: inline-block;
  padding: 6px 10px;

  background: #ffffff;

  border: 3px solid #e2e2e2;
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-right-color: #b9b9b9;
  border-bottom-color: #b9b9b9;
  border-radius: 5px;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    inset -1px -1px 2px rgba(0, 0, 0, 0.1),
    2px 3px 5px rgba(0, 0, 0, 0.22);
}

/* ==============================================================
   14. STYLE GUIDE HELPERS
   ============================================================== */

.styleguide-label {
  margin: 0 0 5px;
  color: var(--accent-dark);
  font-weight: 700;
}

.styleguide-note {
  padding: 8px;
  background: var(--soft-gray);
  border-left: 3px solid var(--accent);
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 16px;
}

.color-swatch {
  min-height: 45px;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.color-swatch code {
  padding: 1px 3px;
  background: rgba(255, 255, 255, 0.8);
}

/* ==============================================================
   15. FOOTER
   ============================================================== */

.site-footer {
  clear: both;
  padding: 10px;
  border-top: 1px solid var(--medium-gray);
  text-align: center;
}

.site-footer p {
  margin: 0;
  color: var(--dark-gray);
  font-size: 10px;
  text-transform: uppercase;
}

/* ==============================================================
   16. MOBILE LAYOUT
   ============================================================== */

@media (max-width: 600px) {
  body {
    padding: 8px;
    align-items: flex-start;
  }

  .site-header {
    height: auto;
    min-height: 100px;
    margin-bottom: -12px;
  }

  .updates-grid,
  .page-columns {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .update-card {
    min-height: auto;
    border-bottom: 1px solid var(--medium-gray);
    border-left: 0;
  }

  .navigation ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

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

  .main-content {
    padding-top: 14px;
  }
}