/* =========================================================
   Design Tokens (CSS Custom Properties)
   ========================================================= */
:root {
  /* Colors */
  --color-bg:           #efefe6;
  --color-surface:      #f9f9f9;
  --color-text:         rgba(4, 4, 4, 0.92);
  --color-text-muted:   rgba(51, 51, 51, 0.9);
  --color-accent-blue:  rgba(0, 29, 255, 0.9);
  --color-accent-indigo:rgba(73, 86, 255, 0.9);
  --color-accent-purple:rgba(72, 0, 255, 0.9);
  --color-accent-pink:  rgba(145, 38, 138, 0.9);
  --color-accent-red:   rgba(127, 0, 0, 0.9);
  --color-shadow:       rgba(0, 0, 0, 0.15);
  --color-link:         #008080;   /* turquoise */
  --color-link-visited: #800080;   /* purple    */
  --color-link-hover:   #0026ff;
  --color-link-active:  #b200ff;

  /* Typography */
  --font-primary:   "Open Sans", "Rovique Free", "Segoe UI", sans-serif;
  --font-secondary: "Yu Gothic", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-display:   "Century Gothic", "Rovique Free", "Tw Cen MT", sans-serif;

  /* Spacing */
  --space-xs: 2px;
  --space-sm: 6px;
  --space-md: 10px;
  --space-lg: 30px;

  /* Layout */
  --max-width: 900px;
  --container-padding: 0 var(--space-lg);
}

/* =========================================================
   Base Reset
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: var(--color-bg);
  font-family: var(--font-secondary);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

audio, canvas, iframe, svg, video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }

/* =========================================================
   Layout Containers
   ========================================================= */
#wrapper {
  width: 96%;
  max-width: var(--max-width);
  margin: 0 auto;
}

#header,
article,
#trance {
  width: 100%;
  max-width: var(--max-width);
  min-width: min(30%, 100%);
  margin: 0 auto;
  text-align: center;
  display: block;
  padding: 0;
  box-shadow: 0 0 10px var(--color-shadow);
}

#header {
  background-image: linear-gradient(
    to right top,
    #FF0C0C, #FF7F7F, #FDFFF9, #82FF98, #0CFF4D
  );
  border-radius: 6px 6px 0 0;
}

article {
  background: var(--color-surface);
  border-radius: 0;
}

#trance {
  background-image: linear-gradient(
    to right top,
    #00ff00, #34ff00, #5dff00, #9bff00, #ffffff,
    #ff856d, #ff5735, #ff2b00, #ff0000
  );
  border: 0;
  border-radius: 0 0 6px 6px;
}

/* =========================================================
   Typography
   ========================================================= */
h1, h2, h3, h4, h5, p, blockquote {
  margin-left: 0;
  margin-right: 0;
}

h1 {
  font-family: var(--font-primary);
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.1em;
  line-height: 1.2;
  font-weight: 300;
  text-align: center;
  margin: 0 0 0 var(--space-lg);
  text-shadow: 1px 1px 1px #c6006e;
}

h2 {
  font-family: var(--font-primary);
  color: var(--color-accent-blue);
  font-size: 1.1em;
  line-height: 1.2;
  font-weight: 300;
  text-align: left;
  margin: 0 var(--space-lg);
  padding: var(--space-xs);
  text-shadow: 0 0 1px #009;
}

h3 {
  font-family: var(--font-secondary);
  color: var(--color-accent-indigo);
  font-size: 0.95em;
  line-height: 1.2;
  font-weight: 300;
  text-align: left;
  margin: var(--space-xs) var(--space-lg) var(--space-sm) var(--space-lg);
  padding: var(--space-xs);
  text-shadow: 0 0 1px #009;
}

h4 {
  font-family: var(--font-display);
  color: var(--color-accent-blue);
  font-size: 0.9em;
  line-height: 1.1;
  font-weight: 300;
  text-align: center;
  margin: 0 auto;
  padding: 3px;
  text-shadow: 1px 1px 1px #b200ff;
}

h5 {
  font-family: var(--font-display);
  color: rgba(246, 216, 255, 0.95);
  font-size: 0.8em;
  line-height: 0.9;
  font-style: italic;
  font-weight: 300;
  text-align: center;
  margin: 0 auto;
  padding: var(--space-xs);
  text-shadow: 1px 1px 1px #3c006e;
}

p {
  font-family: var(--font-secondary);
  color: var(--color-text);
  font-size: 1em;
  line-height: 1.5;
  text-align: justify;
  margin: 8px var(--space-lg) 0 var(--space-lg);
  padding: var(--space-xs);
  font-weight: 300;
  text-shadow: 0 0 1px rgba(0, 0, 40, 0.4);
}

/* Custom classes (replacing invalid p1 / pan elements) */
.p1 {
  font-family: var(--font-display);
  color: var(--color-accent-purple);
  font-size: 0.94em;
  line-height: 1.36;
  text-align: center;
  margin: 3px var(--space-lg) 0 var(--space-lg);
  padding: var(--space-xs);
  font-weight: 300;
  text-shadow: 0 0 1px #4c4c4c;
}

.pan {
  font-family: var(--font-primary);
  color: var(--color-accent-red);
  font-size: 0.95em;
  line-height: 1;
  font-style: italic;
  font-weight: 200;
  float: right;
  margin: 0 var(--space-md) 0 var(--space-lg);
}

/*  ==========================
    HCB_COMMENT_BOX
    ==========================  */
#HCB_comment_box {width:90%;height:auto;text-align:center;margin:5px auto;overflow:hidden;display:block;border:0;radius;6px;padding:0;}
#HCB_comment_box textarea,#HCB_comment_box input.text{border-top:1px solid #e4e4e4;border-left:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4;border-right:1px solid #e4e4e4a;background-color:#E4E4E4;}
#HCB_comment_box input.text {font-family:OpenSymbol, sans-serif;color:rgba( 58, 58, 58,0.9);-webkit-font-smoothing:antialiased;font-size:0.98em;line-height:1em;text-align:justify;margin:1px 0 0;padding:0;font-weight:300;}
#HCB_comment_box .hcb-wrapper-half{display:block;width:50%;float:left;}
#HCB_comment_box .hcb-wrapper{clear:both;}
#HCB_comment_box input.text{display:block;width:90%;border:1px solid #0093fc;padding:0;border-radius:4px;}
#HCB_comment_box input.submit{border-top:1px solid #FCB1A2;border-left:1px solid #FCB1A2;border-bottom:1px solid #BB2B0F;border-right:1px solid #BB2B0F;border-radius:4px;background-color:#b50000;color:#f9f9f9;font-weight:bold;cursor:pointer;}
#HCB_comment_box div.comment{color:#fcfcfc; background: rgba(252, 252, 252, 0.6); margin:0; padding:1px;}
#HCB_comment_box name.text{font-family:OpenSymbol, sans-serif;color:rgba( 145, 35, 138,0.9);-webkit-font-smoothing:antialiased;font-size:0.94em;line-height:0.96em;text-align:justify;margin:8px 0 0;padding:0;font-weight:300;}
#HCB_comment_box .comment .likes{color:purple;}
#HCB_comment_box .author-name, {font-family:OpenSymbol, sans-serif;color:rgba( 145, 35, 138,0.9);-webkit-font-smoothing:antialiased;font-size:0.96em;line-height:1.2em;text-align:justify;margin:8px 0 0;padding:1px;font-weight:300;}
#HCB_comment_box .hcb-comment-body,
#HCB_comment_box .hcb-comment-tb a {font-size: 21px; /* Adjust the value depending on wanted text size */}
#HCB_comment_box .text-blur {color:#ff006e;}
#HCB_comment_box .text-focus {color:#b300ff;}
#HCB_comment_box #hcb_form_content,
#HCB_comment_box #hcb_form_email,
#HCB_comment_box #hcb_form_name,
#HCB_comment_box #hcb_form_website {background-color:#f9f9f9; border:1px solid #0093fc;padding:0;border-radius:4px;}
#HCB_comment_box .hcb-link{color:#b200ff;text-decoration:none;hover:#ff006e;font-size:1em; line-height:1.2em;text-align:left;}
#HCB_comment_box blockquote.text{font-family:OpenSymbol, sans-serif;color:rgba( 145, 35, 138,0.9);-webkit-font-smoothing:antialiased;font-size:0.96em;line-height:1em;text-align:justify;margin:8px 0 0;padding:0;font-weight:300;}.logo {background-color:transparent;width:95%;text-align:center;margin:0 auto;display:block;border:0;padding:5px;}  

blockquote {
  font-family: var(--font-secondary);
  color: var(--color-accent-pink);
  font-size: 0.96em;
  line-height: 1.35;
  text-align: justify;
  margin: 8px 20px 0;
  padding: 0;
  font-weight: 300;
}

/* =========================================================
   Links
   ========================================================= */
a:link    { color: var(--color-link);        text-decoration: none; }
a:visited { color: var(--color-link-visited); }
a:hover   { color: var(--color-link-hover);   }
a:active  { color: var(--color-link-active);  }

/* =========================================================
   Lists
   ========================================================= */
ol.a, ol.b, ol.c, ol.d {
  list-style-position: outside;
  margin: var(--space-xs) 35px var(--space-sm);
  padding: 0 0 0 var(--space-lg);
  font-family: var(--font-secondary);
  color: var(--color-text-muted);
  font-size: 1em;
  line-height: 1.3;
  text-align: left;
  font-weight: 300;
  text-shadow: 0 0 1px #000;
}
ol.a { list-style-type: circle; }
ol.b { list-style-type: square; }
ol.c { list-style-type: upper-roman; }
ol.d { list-style-type: lower-alpha; }

/* =========================================================
   Utility Classes
   ========================================================= */
.image-align-left { float: left;  margin-right: var(--space-md); }
.right            { float: right; width: 95%; max-width: 95%; margin: 5px auto; display: block; }

.logo {
  background-color: transparent;
  width: 95%;
  text-align: center;
  margin: 0 auto;
  display: block;
  border: 0;
  padding: 5px;
}

.feedback {
  background: rgba(0, 0, 0, 0.75);   /* darker for contrast */
  color: #f0f0f0;                     /* light text on dark bg */
  width: 96%;
  max-width: 96%;
  min-width: min(33%, 100%);
  font-family: var(--font-secondary);
  font-size: 0.75em;
  line-height: 1.3;
  text-align: center;
  margin: 5px auto;
  display: block;
  padding: 8px;
}

.screen {
  background-color: #000;
  width: 94%;
  max-width: 94%;
  min-width: min(30%, 100%);
  text-align: center;
  margin: 1px auto;
  display: block;
  overflow: hidden;
  border: 2px solid #5700ff;
  border-radius: 6px;
  box-shadow: 0 0 10px #05a7ff;
}

.enl {
  float: left;
  width: 80%;
  max-width: 37.5%;
  min-width: min(30%, 100%);
  margin-left: 20px;
  display: block;
  overflow: hidden;
  border: 0;
  padding: 10px;
}

.responsive {
  width: 94%;
  max-width: 94%;
  min-width: min(30%, 100%);
  text-align: center;
  margin: 0 auto;
  border: 0;
  padding: 2px;
}

/* =========================================================
   Media
   ========================================================= */
#video {
  background-color: #000;
  width: 94%;
  max-width: 75%;
  min-width: min(37.5%, 100%);
  max-height: 100%;
  text-align: center;
  margin: 0 auto;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid #a136ff;
  border-radius: 5px;
  box-shadow: 0 0 15px #a136ff;
}

iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;
  border: 0;
  padding: 0;
}

.responsive-iframe {
  position: absolute;
  inset: 0;              /* replaces top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
}

.audio-player {
  width: 92.5%;
  height: 35px;
  margin: 0 var(--space-lg);
  padding: 0;
  background-color: #e6e6e6;
  border-radius: 5px;
  box-shadow: 0 0 6px rgba(194, 232, 230, 0.2);
  text-align: center;
}

audio {
  display: block;
  width: 92.5%;
  min-width: min(30%, 100%);
  height: 30px;
  margin: 1px auto;
  overflow: hidden;
  background-color: #c1f8ff;
  border: 1px solid #c1f8ff;
  border-radius: 6px;
  box-shadow: 0 0 8px #7600ad;
  text-align: center;
}

/* =========================================================
   Dividers
   ========================================================= */
hr {
  border: 0;
  border-top: 1px solid #00aa02;
  width: 96%;
  margin: 1px auto;
}

/* =========================================================
   Container (fixed from HTML-attribute-in-CSS bug)
   ========================================================= */
.container {
  border-radius: 5px;
  background-color: #e2f8ff;
  width: 100%;
  min-width: min(37.5%, 100%);
  max-width: 70%;
  border: 2px solid #00137f;
  padding: 5px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width: 400px) {
  html { font-size: 18px; }
}

@media (max-width: 600px) {
  #header, article, #trance { min-width: 100%; border-radius: 0; }
  h1, h2, h3, p, .p1, .pan, ol.a, ol.b, ol.c, ol.d {
    margin-left: var(--space-md);
    margin-right: var(--space-md);
  }
  .enl { float: none; width: 100%; max-width: 100%; margin: 10px 0; }
}