@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital@0;1&display=swap');
*{box-sizing:border-box;font-family:'Fira Sans Condensed',sans-serif}
html,body{margin:0;width:100%;min-height:100%;background:#fff;color:#000;cursor:cell}
body{overflow:hidden}
a,button,audio{cursor:cell}
.name{position:fixed;left:0;top:0;z-index:10;padding:20px;font-size:18px;color:#000;text-decoration:none}
.name:hover,.work-links a:hover,.text-link:hover,.download-list a:hover{color:red}

.bg-image{position:fixed;left:0;top:0;width:50vw;height:100vh;background-position:center;background-repeat:no-repeat;background-size:50% auto;background-color:#fff;pointer-events:none}
.img1{background-image:url("img/register_of_wills.png")}

.archive{position:fixed;top:0;right:0;width:50vw;height:100vh;overflow-y:auto;overflow-x:hidden;padding:70px clamp(40px,5vw,90px) 110px;background:#fff}
h1{margin:0 0 28px;font-size:clamp(30px,3.1vw,47px);line-height:1.02;font-weight:400}
.quote{margin:0 0 58px;max-width:680px;font-size:clamp(15px,1.25vw,19px);line-height:1.22;font-style:normal}
.works{margin:0;padding:0;list-style:none}.work{margin:0 0 27px}
.work-title{font-size:20px;line-height:1.12}.year{font-style:normal;white-space:nowrap}
.work-links{margin-top:3px;font-size:17px;line-height:1.3}
.work-links a,.text-link{color:#000;text-decoration:none;border:0;background:none;padding:0;font:inherit}
.download-link{white-space:nowrap}

.player{display:none;align-items:center;gap:10px;margin-top:10px;width:min(100%,430px);height:28px}
.player.open{display:flex}
.play-btn{position:relative;width:24px;height:24px;border:0;background:transparent;padding:0;flex:0 0 24px}
.icon-play{display:block;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid #000;margin-left:7px}
.play-btn.is-playing .icon-play{width:10px;height:12px;border:0;margin-left:6px;position:relative}
.play-btn.is-playing .icon-play:before,.play-btn.is-playing .icon-play:after{content:"";position:absolute;top:0;width:3px;height:12px;background:#000}
.play-btn.is-playing .icon-play:before{left:0}.play-btn.is-playing .icon-play:after{right:0}
.player-track,.player-time{font-size:12px;white-space:nowrap}
.progress{position:relative;height:12px;flex:1;cursor:cell}
.progress:before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:#aaa}
.progress-fill{position:absolute;left:0;top:5px;height:1px;width:0;background:#000}
.next-btn{border:0;background:none;padding:0 2px;font-size:22px;line-height:1}
.player audio{display:none}

.download-list{display:none;margin-top:8px;padding-left:0;font-size:14px;line-height:1.35}
.download-list.open{display:grid;gap:3px}
.download-list a{color:#000;text-decoration:none}

@media(max-width:780px){
 body{overflow:auto}.name{position:absolute;padding:18px 20px;font-size:16px}
 .bg-image{position:relative;width:100%;height:52vh;min-height:320px;background-size:45% auto}
 .archive{position:relative;width:100%;height:auto;overflow:visible;padding:44px 24px 80px}
 h1{margin-bottom:24px}.quote{margin:0 0 58px;max-width:680px;font-size:clamp(15px,1.25vw,19px);line-height:1.22;font-style:normal}.work{margin-bottom:23px}
 .work-title{font-size:18px}.work-links{font-size:16px}.player{width:100%}
}

.copyright-year{
  position:fixed;
  left:0;
  bottom:0;
  z-index:20;
  padding:20px;
  font-size:16px;
  line-height:1;
  color:#000;
  pointer-events:none;
}

@media(max-width:780px){
  .copyright-year{
    position:absolute;
    bottom:0;
    padding:18px 20px;
    font-size:14px;
  }
}


/* Match mikelrnieto.net home name exactly */
.name {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  padding: 1rem !important;
  z-index: 10 !important;
  font-family: 'Fira Sans Condensed', sans-serif !important;
  font-size: 16px !important;
  line-height: normal !important;
  font-weight: 400 !important;
  color: black !important;
  text-decoration: none !important;
}
.name a,
a.name {
  color: black !important;
  text-decoration: none !important;
  font: inherit !important;
}
.name a:hover,
a.name:hover {
  color: red !important;
  text-decoration: none !important;
}