/* * */

:root {
  --lriwhite: #dbdbdb;
  --lrigolden: #aaa191;
}

body.night {
  background: black;
}

body.day {
  background: var(--lriwhite);
}

body.night,
body.day {
  margin: 0;
}

.center {
  text-align:center;
}

.strong {
  font-weight: bold;
}

.lriheader {
  font-size: 17px;
  position:fixed;
  padding:16px 0;
  display:flex;
  width:48%;
  margin-left:26%;
  margin-right:26%;
  top:0;
  z-index:1;
}

.lriheader img {
  margin-left:16px;
  display:block;
}

.day .lriheader {
  border-bottom: 1px solid black;
  background: var(--lriwhite);
}

.night .lriheader {
  border-bottom: 1px solid var(--lriwhite); 
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* idaich.com */

body.hp * {
  font-family: "Times New Roman", serif;
  text-decoration: none;
  list-style: none;
  color: var(--lriwhite);
  font-size: 17px;
  background: #000;
  padding-left: 1.5px ;
  padding-right: 1.5px ;
}

.hp nav ul li,
.hp nav ul li a {
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  font-weight: 700;
}

.hp {
  background: #000;
}

.hp header {
  float: left;
  margin: 5px 30px 0 0;
}

.hp hr {
  height: 1px;
  border: none;
  background: var(--lrigolden);
}

.hp nav ul {
    padding: 0;
    margin: 6.5px 35px 25px 0;
    float: left;
}

.hp main {
  clear: both;
}

.hp a:hover {
  background: var(--lriwhite);
  color: black;
}

/* idaich.com/ml, idaich.com/ct, idaich.com/lg */

.register {
  padding-top:90px;
  max-width:100%;
  font-size:15px;
  font-family:"courier",sans-serif;
  font-weight:100;
  margin-left:27.1%;
  margin-right:27.1%;
}

.register a {
  color: black;
  text-decoration: none;
}

.block {
  position: absolute;
  margin-top: 11px;
  display: flex;
  text-indent: 17px;
  right: 14px;
}

.excel-cell a {
  text-decoration: underline !important;
}

.excel-grid {
  display:table;
  border-collapse:collapse;
  width:100%;
  margin-bottom:16px;
}
.excel-row{
  display:table-row;
}

.excel-cell {
  display:table-cell;
  border:1px solid #000;
  padding:2px 5px;
  vertical-align:top;
}

/* memory lane reader */

.reader * {
  user-select: none;
  resize: none;
  color: #dbdbdb;
  font-size: 18px;
  text-decoration: none;
  font-family: "times new roman", sans-serif;
}

.reader hr {
  background-color: #dbdbdb;
  height: 1px;
  border: none;
  margin-left: 26%;
  margin-right: 26%;
}

.reader .hrup {
  background-color: #dbdbdb;
  margin-bottom: 12px;
}

.reader .hrdo {
  background-color: #dbdbdb;
  margin-top: 12px;
}

.reader .pagestart {
  padding-top: 66px;
}

.red {
  color: red;
}

.reader .list-height {
  line-height: 1.4;
  padding-bottom: 2px;
}

.reader .title {
  font-size: 21px;
  font-family: arial;
  padding-top: 4px;
  padding-bottom: 3px;
}

.reader .subt {
  font-size: 18px;
  font-family: arial;
  padding-top: 3px;
}

.reader .story {
  white-space: pre-wrap;

  max-width: 100%;
  margin-left: 27.1%;
  margin-right: 27.1%;
  text-align: justify;
  line-height: 1.33;
}

.reader [id] {
  scroll-margin-top: 103px;
}

/* screens */

.excel-cell:nth-child(1){width:90px;}
.excel-cell:nth-child(3){width:90px;}
.excel-cell:nth-child(4){width:30px;}

.shade {
  color:#a3a3a3;
}

/* music player */

.unscroll * {
  user-select: none;
  scroll-padding-top: 97px;
  resize: none;
  color: #dbdbdb;
  text-decoration: none;
}

body.unscroll {
  height: 100%;
  overflow: hidden;
}

.wrap {
  position: relative; /* Container for stacking images */
  width: 350px; /* Match the image width */
  height: 350px; /* Match the image height */
  margin: 0 auto; /* Center the wrapper */
}

.kover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;     /* fill the wrap */
  height: 100%;    /* exactly match wrap height */
  display: block;
  object-fit: cover; /* keep proportions and fill */
  margin: 0;       /* override global img margin */
}

.album-title {
  font-size: 14px;   /* change this */
  font-weight: bold;
  color: #dbdbdb;
}

.album-artist {
  font-size: 13px;   /* change this */
  color: #999;
}

/* Tracklist */
.row .title {
  font-size: 12.3px;
  color: #666;
}

.row .duration {
  font-size: 12px;   /* track durations */
  color: #aaa;
}

.album {
  font-family: Helvetica, Arial, sans-serif;
  width: 350px;
  margin: 74px auto;
  background: #303030;   /* dark gray, not too dark */
  border: 1px solid #444;
  color: #eee;
}

.bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;       /* inner spacing (also pushes tracklist) */
  background: inherit; /* use same bg as album */
  border-top: 1px solid #444;
}

#play {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 3px;
  background: #555;
  color: #dbdbdb;
  font-size: 14px;
  cursor: pointer;
}
#play:active { transform: translateY(1px); }

#distroller {
  display: none;
}

/* Tracklist */
.list {
  margin: 0;
  padding: 0;
  list-style: none;

  /* new for scroll */
  max-height: 81px;      /* ~3 tracks tall (adjust if row height changes) */
  overflow-y: auto;
  position: relative;
}

/* subtle scrollbar (dark theme) */
.list::-webkit-scrollbar {
  width: 6px;
}
.list::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 3px;
}
.list::-webkit-scrollbar-track {
  background: #2b2b2b;
}

.list::after {
  content: "";
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom, rgba(48,48,48,0), rgba(48,48,48,1));
  pointer-events: none;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-top: 1px solid #444;
  cursor: pointer;
  color: #666;
}

.row .duration { color: #666; font-size: 12px; }

.row:hover {
  background: #444;
}

.list .row.active {
  background: #555;
  font-weight: bold;
}

.list .row.active .title,
.list .row.active .duration {
  color: #999 !important;
}

.list .row.active:hover .title,
.list .row.active:hover .duration {
  color: #999 !important; /* stays red even on hover */
}

/* video player */

.videoplayer{
  width:100%;
  max-width:640px;       /* cap it on desktop */
  margin:75px auto 0;
  background:#303030;
  border:1px solid #444;
  position:relative;
  font-family:Helvetica, Arial, sans-serif;
  box-sizing:border-box; /* keep borders inside width */
}

.videoplayer video{
  width:100%;
  height:auto;           /* preserve aspect ratio */
  display:block;
}


.videoplayer .controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#303030;
  border-top:1px solid #444;
  padding:12px;
  color:#dbdbdb;
  font-size:14px;
}

.videoplayer button{
  width:32px;
  height:32px;
  border:none;
  border-radius:3px;
  background:#555;
  color:#dbdbdb;
  font-size:14px;
  cursor:pointer;
}
.videoplayer button:active{transform:translateY(1px);}

/* --- progress zone --- */
.progress-zone{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 12px;
  height:32px;
}

/* track (hidden by default) */
.progress-container{
  flex:1;
  height:8px;
  background:#555;
  position:relative;
  cursor:pointer;
  border-radius:2px;
  opacity:0;
  transition:opacity .12s linear;
}

/* invisible anchor for handle */
#progress{
  position:absolute;
  top:50%;
  left:0;
  width:0;
  height:0;
}

/* square handle (hidden by default) */
#progress::after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  transform:translate(-50%,-50%);
  width:12px;
  height:12px;
  background:#aaa191;
  border-radius:2px;
  opacity:0;
  transition:opacity .12s linear;
}

/* duration (hidden by default) */
#duration{
  font-size:12px;
  color:#aaa;
  margin-right:0;
  opacity:0;
  transition:opacity .12s linear;
}

/* reveal bar + handle + duration all together */
.progress-zone:hover .progress-container,
.progress-zone:hover #progress::after,
.progress-zone:hover #duration{
  opacity:1;
}


/* screens */

@media (max-width:1400px){
  .register{margin-left:4%;margin-right:4%;}
  .lriheader{width:100%;margin:0;}
 .excel-grid {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width:700px){
  .register{margin-left:0;margin-right:0;}
  .videoplayer{
    width:100%;
    max-width:100%;
    margin:75px 0 0 0;
    box-sizing:border-box; /* include border in width */
  }
}

@media (max-width:370px){
  .unscroll{overflow:auto;}
}

@media only screen and (max-width: 1400px) {
  .reader .story {
    margin-left: 7%;
    margin-right: 7%;
  }

  .pagestart {
    margin-left: 4%;
    margin-right: 4%;
  }

  .reader hr {
    margin-left: 0% !important;
    margin-right: 0% !important;
  }

  .reader .lriheader {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
  }
}

@media only screen and (max-width: 600px) {

  .reader .story {
    margin-left: 4%;
    margin-right: 4%;
  }

}