/* import CSS */
@import url("all.min.css");
/* Custom CSS */
@import url("kachina.uthabiti.css");

/* Import font file */
/* @font-face {
    font-family: 'ALT Rin Mikaru Khadijah';
    src: url('../fonts/RINMIKARU.eot');
    src: url('../fonts/RINMIKARU.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RINMIKARU.woff2') format('woff2'),
        url('../fonts/RINMIKARU.woff') format('woff'),
        url('../fonts/RINMIKARU.svg#ALT_RINMIKARU-Regular') format('svg');
    font-weight: 700;
    font-style: bold;
    font-display: swap;
} */

/* Skema variabel */
:root {
  /* Palette Uthabiti Kachina */
  --kachina-bright-yellow: #FFDA63; /* Kuning cerah pada aksen dan elemen */
  --kachina-golden-brown: #B8860B; /* Cokelat keemasan untuk detail dan lapisan */
  --kachina-sandstone: #DEB887;    /* Warna seperti batu pasir, lembut dan netral */
  --kachina-cream: #F5F5DC;       /* Warna krem sebagai latar belakang yang hangat */
  --kachina-deep-brown: #5C4033;   /* Cokelat tua untuk teks dan garis yang kuat */
  --kachina-light-yellow: #FFFACD; /* Kuning muda sebagai aksen halus */
  
  /* Pilihan Latar Belakang Alternatif (untuk mata lelah) */
  --soft-background-1: #F0FFF0; /* LightCyan (agak kehijauan lembut) */
  --soft-background-2: #FAEBD7; /* AntiqueWhite (putih kekuningan lembut) */
  --soft-background-3: #FFF0F5; /* LavenderBlush (merah muda pucat lembut) */
  --soft-background-4: #E0FFFF; /* Azure (biru muda pucat) */
  --soft-background-5: #D3D3D3; /* LightGrey (abu-abu muda netral) */

  /* Pilihan Warna Teks Alternatif (jika diperlukan untuk kontras dengan latar belakang lembut) */
  --soft-text-1: #333333; /* Abu-abu gelap */
  --soft-text-2: #4A4A4A; /* Abu-abu lebih muda */
}

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*img,*/ picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
#root, #__next {
  isolation: isolate;
}

/* End CSS Reset */

/* HTML */
html {
  background-color: var(--kachina-cream);
  color: var(--kachina-deep-brown);
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  /* font-family: Arial, Helvetica, sans-serif; */
  /* font-family: Tahoma, Geneva, Verdana, sans-serif; */
}
  h1,h2,h3,h4,h5,h6,h7,h8 {
  /* font-family: Arial, "Liberation Sans", Helvetica, sans-serif; */
  /* font-family: "Times New Roman", "Times Roman", "Tms Rmn", Times, "Free Serif", serif; */
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: normal;
}

p { margin-block-end: 5px; }
small { font-size: 9pt; }
footer { line-height: 1.1; margin-block-end: 2px; }

a { color: var(--uthabiti-dark); } a:visited { color: var(--uthabiti-dark); }
/* a:focus, */ a:hover { color: var(--uthabiti-yellow); }

pre, code {
  font-size: 12pt;
}
code {
  text-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
}

details {
  background-color: var(--kachina-light-yellow);
  padding: 8px;
  border: 3px solid var(--kachina-sandstone);
} details summary {
  -webkit-user-select: none; /* Safari */
  user-select: none;
}

/* Clearfix */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* Padding settings */
.pd-4px {padding: 4px;}
.pd-8px {padding: 8px;}
.pd-12px {padding: 12px;}
.pd-16px {padding: 16px;}
.pd-20px {padding: 20px;}
.pd-24px {padding: 24px;}
.pd-28px {padding: 28px;}
.pd-32px {padding: 32px;}

/* Margin settings */
.mn-8px {margin: 8px;}
.mn-12px {margin: 12px;}

/* Auto LR margin with max-width */
.mn-lr-900px {
  margin-left: auto;
  margin-right: auto;
  width: 900px;
  max-width: 100%;
}
.mn-lr-1024px {
  margin-left: auto;
  margin-right: auto;
  width: 1024px;
  max-width: 100%;
}
.mn-lr-1280px {
  margin-left: auto;
  margin-right: auto;
  width: 1280px;
  max-width: 100%;
}
.mn-lr-1366px {
  margin-left: auto;
  margin-right: auto;
  width: 1366px;
  max-width: 100%;
}

/* Kachina mode */
.kachina-header {
  background-color: var(--kachina-bright-yellow);
  color: var(--kachina-deep-brown);
  padding: 0.75rem 1.25rem;
  font-weight: bold;
}

.kachina-card {
  background-color: var(--kachina-sandstone);
  border-left: 4px solid var(--kachina-golden-brown);
  padding: 1rem;
  margin: 1rem 0;
}

.kachina-button {
  display: inline-block;
  background-color: var(--kachina-golden-brown);
  text-decoration: none;
  color: white !important;
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  margin-block-end: 0.2rem;
}

.kachina-button:hover {
  background-color: var(--kachina-bright-yellow);
  color: var(--kachina-deep-brown);
}

/* Extra background theme for accessbility */
html.tired-eyes {
  background-color: var(--soft-background-2); /* Contoh: menggunakan AntiqueWhite */
  color: var(--soft-text-1); /* Mungkin perlu menyesuaikan warna teks juga */
}
html.very-tired-eyes {
  background-color: var(--soft-background-4); /* Contoh: menggunakan Azure */
  color: var(--soft-text-2);
}
.accent {
  background-color: var(--kachina-bright-yellow);
  color: var(--kachina-deep-brown);
}
.secondary-element {
  background-color: var(--kachina-sandstone);
}

/* Spoiler */
.spoiler {
  background-color: var(--kachina-deep-brown);
  color: var(--kachina-deep-brown);
  -webkit-user-select: none; /* Safari */
  user-select: none;
}
.spoiler:hover {
  background-color: transparent;
  color: var(--kachina-deep-brown);
}
.spoiler-content { display: none; }

/* Cifera/Cipher mode */
.crypto-address {
  list-style-position: inside;
  list-style-type: none;
}
.crypto-address li::after {
  content: "";
  display: table;
  clear: both;
}