/* PALETTE */
  @property --colourPaper {
    syntax: "<color>";
    inherits: true;
    initial-value:rgb(253,253,253);
  }
  @property --colourInk {
    syntax: "<color>";
    inherits: true;
    initial-value:rgb(75,75,85);
    }
  @property --colourAccent {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(218, 61, 29, 0.55);
    }
  @property --lightNeutral1 {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(120, 120, 185, 0.65);
    }
  @property --lightNeutral2 {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(220, 240, 255, 0.25);
    }
  @property --paper25 {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(253, 253, 253, 0.25);
    }
  @property --glowAccent {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(61,105,205,0.99); /*rgba(1,35,255,0.99);*/
    }
  /*@property --scroller {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
    }/*

/* PARAMETERS */
  :root {
    --logo-size: 200px;
    --nav-top: 176px;
    --nav-min-width: 250px;
    --icon-min-size: 73px;
    --disc-height: 115px;
    --disc-size: 200px;
    --base-font-size: 18px;
    --square-image-size: 250px;
    --square-image-margin: 3px 35px;
    --border-radius-large: 25px;
    --border-radius-medium: 15px;
    --border-radius-small: 10px; 
    --min-limit: 320px;
    --section-min-width: var(--min-limit);
    --section-min-height: 8px;
    --content-min-width: 300px;
    --content-max-width: 1000px;
    --content-padding: 10px 55px;
    --order: 1;
    --navbar-icons: navbar-icons 1s;
    max-width:100vw;
    overflow-x:hidden;
    scroll-behavior: smooth;
    font-size:var(--base-font-size);
    }

  .anchor {
    scroll-margin-top:var(--scroll-adjust,150px);
    }

/* ADAPT IF SMALL SCREEN VERTICALLY */
  @media screen and (max-height: 750px) {
    :root {
      --logo-size: 80px;
      --nav-top: 56px;
      --icon-min-size: 73px;
      --disc-size: 155px;
      --disc-height: 93px;
      --button-menu-radius: 9px;
      --scroll-adjust: 20px;
      }
    .disc-wrap { width: 40px; }
    #section-header {
      height:0;
      min-height:0 !important;
      }
    #section-logo {
      opacity:0;
      height:0;  
      min-height:0;  
      }
    .section-nav {
      top:0 !important; 
      border-radius: 0 !important;
      margin:0 !important;
      }
    }
      
/* ADAPT IF SMALL SCREEN HORIZONTALLY */
  @media screen and (max-width: 1000px) {
    :root {
      overflow-x: hidden;
      --content-max-width: 620px;
      --content-padding: 10px 15px;
      --square-image-margin: 0;
      --order: 0;
      --history-container-width:300px;
      --navbar-icons: none;
      --icon-spacing: 3px;
      }
    }

/* FONTS */
  @font-face {
    font-family: 'Radio Canada';
    font-style: normal;
    font-weight: 400;
    src: url('font/radio-canada-v25-latin-regular.woff2') format('woff2');
    font-display: fallback;
    }
  /*@font-face {
    font-family: 'Radio Canada';
    font-style: normal;
    font-weight: 300;
    src: url('font/radio-canada-v25-latin-300.woff2') format('woff2');
    font-display: fallback;
    }*/
  @font-face {
    font-family: 'Radio Canada';
    font-style: normal;
    font-weight: 600;
    src: url('font/radio-canada-v25-latin-600.woff2') format('woff2');
    font-display: fallback;
    }

  .font-boost {
    font-size: 2.1rem;
    }

  hr { opacity:0.25 }

/* BASE */
  html { 
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    }
  body {
    box-sizing: border-box;
    font-family: Radio Canada, Arial, Helvetica, sans-serif;
    font-weight: 400;
    padding:0; margin:0;
    color: var(--colourInk);
    background-color: var(--colourPaper);
    }
  * { box-sizing: border-box; }
  div { 
    /*outline: 0.5px solid rgba(50,0,150,0.1);
    outline-offset: -0.5px;*/ }

  a {
    text-decoration:none;
    }
  a.external[target]:hover:after {
    content:'⇪'; /*'↗';*/
    font-size:0.7rem;
    font-weight:bold;
    color:rgba(0,0,0,0.5);
    position:absolute;
    margin-top:-9px;
    margin-left:-8px;
    }

/* LAYOUT */
  .flex {
    display: flex;
    justify-content: center;
    /*transition: all 0.75s;*/ 
    }
  .wrap {
    flex-wrap: wrap;
    justify-content: space-around;
    }
  .flex2 {
    display: flex; flex:1;
    justify-content:flex-start; 
    xalign-items:space-around;
    xalign-content:space-around;
    /*transition: all 0.75s;*/
    }
  .vert {
    flex-direction: column;
    align-items: center;
    }
  .txt-ctr {
    text-align: center;
    }
  .txt-min {
    font-size:0.6rem;
    color:grey;
    opacity:0.5;
    margin-bottom:-15px;
    }
  .section { 
    display: flex;
    justify-content: center;
    min-width: var(--section-min-width);
    min-height: var(--section-min-height);
    background-color: var(--paperColour);
    /*transition: all 1s;*/ 
    }
  .swap-order {
    order: var(--order);
    }
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--content-padding);
    width: 100%; max-width: var(--content-max-width);
    }
  .zone1 {
    /*width: var(--min-limit);*/
    padding:4px;
    }
  .zone2 {
    flex:1;
    padding:15px;
    min-width: var(--min-limit);
    }
  .panel {
    background-color:rgb(240,240,240); 
    padding:15px; 
    border-radius:15px;
    }
  .panel-content {
    width:290px;
    min-width:260px;
    }
          
/* ICONS */
  .icon {
    margin:4px;
    margin-right:var(--icon-spacing,4px);
    padding:0px;
    min-width:var(--icon-min-size);
    min-height:var(--icon-min-size);
    max-width:200px;
    font-size:13px;
    background-color:white;
    border:1px solid rgba(0,0,0,0.2);
    filter:drop-shadow(0 2px 3px rgba(0,0,0,0.15));
    border:1px solid rgba(0,0,255,0.3);
    border-radius: var(--border-radius-medium);
    cursor:pointer;
    user-select: none;
    transition: all 0.1s ease-out;
    }
  .icon > div:first-child {
    font-size:36px;
    }
  .icon img {
    display:block;
    width:36px;
    margin-top:3px;
    margin-bottom:7px;
    }
  .icon:hover {
    box-shadow:0 0 11px var(--glowAccent);
    transform:scale(102%);
    }
  icon:active {
    box-shadow:0 0 8px 3px skyblue;
    transform:scale(115%);
    }
  .icon-footer {
    width:35px; height:35px;
    margin:0 10px; padding:0;
    opacity:0.65;
    transition:all 0.3s;
    }
  .icon-footer:hover, .icon-footer:active {
    filter:drop-shadow( 0 0 5px 3px var(--glowAccent));
    transform:scale(108%);
    }

  .shadow {
    box-shadow:0 2px 5px rgba(0,0,0,0.15);
    }
  .section-navbar a {
    text-decoration: none;
    color:inherit;
    }
  #section-footer {
    position: sticky; left:0; right:0; bottom:0;
    -webkit-backdrop-filter: blur(55px); backdrop-filter: blur(55px);
    background-image: linear-gradient(var(--lightNeutral2),var(--lightNeutral2));
    border-top:1px solid rgba(0,0,0,0.05);
    z-index:10000;
    }
  #footer {
    min-height: 50px; 
    }
  #footer-push {
    min-height: 50px;
    }

  #section-navbar {
    padding:24px;
    }

  #section1 {
    padding-top:24px;
    }

  #section-logo {
    position:sticky; top:0; left:0; right:0; 
    background-image: linear-gradient(var(--lightNeutral1),var(--lightNeutral2) 80%, lightblue /*var(--paper25) 90%*/ );
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
    border-top:1px solid rgba(0,0,0,0.05);
    z-index: 10025;
    transition:all 0.75s;
    }
  #logo {
    display:flex;
    pointer-events:none;
    animation:logo-pulse 3s 1.5s;
    }
  #logo-image {
    display:block;
    transform:translateY(35px);
    border-radius: 256px;
    background-color: aliceblue;
    box-shadow: 0 2px 5px rgba(0,0,0,0.75);
    padding:3px; margin:15px; margin-top:-60px;
    width:var(--logo-size);
    height:auto;
    transition: all 1s;
    animation: logo-squeeze 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-play-state: paused;
    animation-delay: calc(var(--scroller,0) * -1s);
    }
  @keyframes logo-squeeze {
    10% {
      width: 100px;
      }
    100% {
      width: 100px;
      }
    }
  @keyframes logo-pulse {
    10% {
      transform:scale(100%);
      }
    13% {
      transform:scale(108%);
      }
    30% {
      transform:scale(100%);
      }
    33% {
      transform:scale(108%);
      }
    50% {
      transform:scale(100%);
      }
    53% {
      transform:scale(108%);
      }
    75% {
      transform:scale(100%);
      }
    }
  @keyframes navbar-icons {
     0% {
      opacity: 0;
      }
     1% {
      opacity: 0;
      }
     3% {
      opacity: 0.9;
      }
    100% {
      opacity: 0.9;
      } 
    }


  .section-nav {
    justify-content: space-between;
    position:sticky; z-index:10010;
    overflow:hidden;
    top:var(--nav-top);
    xbackground-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.75),rgba(0,0,0,0.35));
    min-height:48px;
    xborder-bottom:0.1px solid rgba(0,0,0,0.1);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    xborder-radius:99px;
    xmargin:0 5%;
    padding-left:4px;
    transition: all 1s;
    min-width:var(--nav-min-width);
    animation: navbar-squeeze 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-play-state: paused;
    animation-delay: calc(var(--scroller,0) * -1s); 
    }
      
  .section-nav-inner {
    justify-content: space-between;
    xposition:sticky; xz-index:10010;
    overflow:hidden;
    xtop:var(--nav-top);
    background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.75),rgba(0,0,0,0.35));
    min-height:48px;
    border-bottom:0.1px solid rgba(0,0,0,0.1);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    border-radius:99px;
    margin:0 5%;
    padding-left:4px;
    xtransition: all 1s;
    min-width:var(--nav-min-width);
    xanimation: navbar-squeeze 1s;
    xanimation-iteration-count: 1;
    xanimation-fill-mode: both;
    xanimation-play-state: paused;
    xanimation-delay: calc(var(--scroller,0) * -1s); 
    }

  @keyframes navbar-squeeze {
    10% {
      top:76px;
      }
    100% {
      top:76px;
      }
    }

/* SCHEDULE */
  #section-schedule {
    padding:10px;
    }
  #section-schedule > div {
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 15px;
    justify-content: space-evenly;
    background-color:rgb(254,250,245);
    background-clip: padding-box;
    }
  #section-schedule > div > div {
    max-width:390px;
    }
  .presenter {
    font-size:0.9rem;
    color:grey;
    }
  .schedule-hr {
    color:silver;
    opacity:0;
    max-width:205px;
    }

/* NAVBAR ITEMS */
  .tuning-dial {
    position:absolute; right:0;
    text-align:right;
    margin:2px 5px 
    }
  #tuning-dial img {
    height:45px;
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.75)); 
    }
  #stereo {
    display:inline-block;
    text-align: right;
    vertical-align: top;
    color:orange; opacity:0.9;
    text-shadow: 0 0 10px red, 0 0 20px red;
    font-size: 14px;
    font-weight:600;
    padding-top:16px; padding-right:20px;
    width:80px;
    opacity:1;
    transition: all 1s;
    pointer-events: none;
    }
  #frequency {
    color:whitesmoke;
    margin-left:16px; margin-top:16px;
    width:55px;
    font-weight: bold; font-style:italic;
    transition: all 1s;
    pointer-events: none;
    }
  .tuning-strip {
    height:51px; margin:0px;
    }
  .tuning-strip img {
    height:45px;
    margin-left:26px; margin-top:1px;
    }
  .nav-strip-buttons {
    display: inline-block;
    white-space: pre;
    margin-top:14px;
    font-size: 0.8rem;
    color:rgba(255,255,255,0.15);
    text-align:center;
    min-width:270px;
    opacity:1;
    transition: all 1s 0.3s;
    }
  #strip-buttons {
    margin-top:-35px;
    width:100px;
    transform: translateY(20px);
    filter:drop-shadow(0 0 3px rgba(0,0,0,0.25));
    opacity:0.85;
    transition: all 1s;
    animation: var(--navbar-icons);
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-play-state: paused;
    animation-delay: calc(var(--scroller,0) * -1s);
    }
  #strip-buttons .icon {
    background:transparent;
    color:white;
    margin-right:0; margin-left:0px;
    padding-right:7px; padding-left:7px;
    border:none; border-right:1px solid rgba(255,255,255,0.1); border-left:1px solid rgba(255,255,255,0.1);
    opacity:0.90;
    transition:all 0.3s;
    }
  #strip-buttons .icon div:first-child {
    font-size:23px !important;
    }
  #strip-buttons .icon:hover {
    opacity:1;
    transform:scale(1.05) translateY(-1px);
    box-shadow:none;
    filter:drop-shadow(0 0 8px whitesmoke);
    }
  #strip-buttons .icon img {
    width:24px; margin:2px; margin-top:3px;
    }

/* CONTENT IMAGES */
  .crew {
    font-weight: 300;
    text-align:center;
    margin:var(--square-image-margin);
    }
  .crew img {
    width:var(--square-image-size);
    height:var(--square-image-size);
    border-radius: var(--border-radius-large);
    box-shadow: 0 2px 5px rgba(0,0,0,0.75);
    padding:3px; margin:8px; 
    transition: all 0.3s;
    transform: rotate3d(1,2,1,3deg);
    }
  .crew img:hover {
    transform: rotate3d(1,2,1,0deg);
    }
  .crew-avatar {
    width:150px;
    height:auto;
    max-height:150px;
    overflow:hidden;
    margin:20px 23px; margin-bottom: 0; padding:0; 
    /*transition: all 0.3s;*/
    }
  .crew-avatar img { width:150px; }
  .a01 img { margin-top:0; }
  .a02 img { margin-top:-150px; }
  .a03 img { margin-top:-300px; }
  .a04 img { margin-top:-450px; }
  .a05 img { margin-top:-600px; }
  .a06 img { margin-top:-750px; }
  .a07 img { margin-top:-900px; }
  .a08 img { margin-top:-1050px; }
  .a09 img { margin-top:-1200px; }
  .a10 img { margin-top:-1350px; }
  .a11 img { margin-top:-1500px; }
  .a12 img { margin-top:-1650px; }
  .a13 img { margin-top:-1800px; }
  .a14 img { margin-top:-1950px; }
  .a15 img { margin-top:-2100px; }

  .crew-mini img {
    box-shadow:0 3px 5px rgba(0,0,0,0.2);
    width:125px;
    height:auto;
    border-radius:7px;
    }

  .icon-schedule {
    max-height:96px;
    overflow:hidden;
    margin-bottom:10px;
    margin-top:15px;
    }
  .icon-schedule img {
    width:288px;
    }
  .s00 img { width:45px; } 
  .s01 img { margin-top:0; }
  .s02 img { margin-top:-96px; }
  .s03 img { margin-top:-192px; }
  .s04 img { margin-top:-288px; }
  .s05 img { margin-top:-384px; }
  .s06 img { margin-top:-480px; }
  .s07 img { margin-top:-576px; }
  .s08 img { margin-top:-672px; }
  .s09 img { margin-top:-768px; }
  .s10 img { margin-top:-864px; }
  .s11 img { margin-top:-960px; }
  .s12 img { margin-top:-1056px; }
  .s13 img { margin-top:-1152px; }
  .s14 img { margin-top:-1248px; }
  .s15 img { margin-top:-1344px; }
  
  .pivot {
    transition: all 0.3s 0.3s;
    }
  .pivot:hover {
    transform: rotateY(180deg);
    }

  .qr-code img {
    width:150px; height:auto;
    margin:15px;
    border:1px solid rgba(0,0,0,0.2);
    border-radius:8px;
    box-shadow:inset 0 0 2px rgba(0,0,0,0.2);
    }

/* VINYL-45 */
  @keyframes disc-spin {
    100% { transform:rotate(359.9deg); }   
    }
  @keyframes disc-stop {
    to { transform:rotate(359.9deg); }
    }
  @keyframes disc-short {
    0% { transform:rotate(0deg); }
    1% { transform:rotate(1deg); }
    2.5% { transform:rotate(11deg); }
    5% { transform:rotate(45deg); }
    7.5% { transform:rotate(90deg); }
    10% { transform:rotate(150deg); }
    75% { transform:rotate(1800deg); }
    85% { transform:rotate(2000deg); }
    93% { transform:rotate(2100deg); }
    98% { transform:rotate(2155deg); }
    99% { transform:rotate(2159deg); }
    100% { transform:rotate(2160deg); }
    }
  .disc-wrap {
    display:flex;
    justify-content: center;
    position: fixed;
    bottom:0; left:0; right:0;
    width:40px;
    height:var(--disc-height);
    transition: all 0.5s;
    z-index:10000;
    }
  .disc-wrap:hover {
    transform:translateY(-8px);
    }
  .disc {
    width:var(--disc-size);
    height:var(--disc-size);
    cursor:pointer;
    transition: all 0.5s 0.7s ease-out;
    filter: drop-shadow(0 0 15px rgba(0,0,0,0.75));
    }
  .disc img { 
    width: var(--disc-size); height:var(--disc-size);
    transition: all 0.5s 0.7s ease-out;
    }
  .disc-base { 
    animation: disc-stop 2.6s ease-out forwards;
    -transform:rotate(0deg); 
    transition: all 3s ease-out;
    }
  .disc-base:hover { 
    animation: disc-short 9.3s linear .05s forwards;
    }
  .disc-glint { 
    position:absolute; top:0;
    opacity:0.65;
    user-select: none;
    pointer-events: none;
    }
  @keyframes fadein {
      0% { opacity:0 }
    100% { opacity:1 }   
    }

  #section1, #section3 {
    background-color: rgb(245,245,245);
    }

  .btn-play {
    width:65px; height:38px;
    border:1px solid silver;
    border-radius:60px;
    padding:3px;
    background-color:rgb(130,130,130);
    background-clip:content-box; 
    box-shadow:0 1px 3px rgba(0,0,0,0.2);
    font-size:25px;
    color:whitesmoke;
    }
  .btn-play:hover {
    background-color:rgb(150,150,150);
    }
  .btn-play:active, .btn-play:focus {
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.3);
    background-color:rgb(140,140,140);
    color:white;
    }

  .audio {
    //animation: fadein 0.75s 0.25s both;
    width: 28px; height:28px; max-width:28px; max-height:28px;
    min-width:28px; min-height:28px;
    border-radius:11px; padding:4px;
    border:3px solid rgba(255,255,255,0.75);
    background-size: cover;
    background-origin: border-box;
    border:1px solid rgba(0,0,0,0.1);
    }
  .audio-wide {
    max-width:200px;
    min-width:100px;
    width:200px;
    }
  audio {
    border-radius:99px;
    transition: all 0.5s;
    }
  audio:playing, .btn-play:focus {
    background-color: orange;
    background-image: linear-gradient(var(--glowAccent,skyblue),transparent);
    }
  body:has(audio:playing) .disc-base { 
    animation: disc-spin 1.3s linear 0s infinite forwards;
    }
          
/* VU METER */
  @property --level {
    syntax: "<length>";
    inherits: true;
    initial-value: 128px;
    }
  @property --level-neg {
    syntax: "<length>";
    inherits: true;
    initial-value: 128px;
    }
  .vu-container {
    position:relative;
    border:1px solid silver;
    border-radius:99px;
    padding:3px;
    width:264px;
    }
  .vu-wrap {
    position:relative;
    display:flex;
    justify-content:center;
    width:256px; height:21px; padding:3px;
    background-color:rgb(100,100,100);
    border-radius:50px;
    border:1px solid rgba(0,0,0,0.1);
    box-shadow:0 2px 5px rgba(0,0,0,0.3);
    overflow:hidden;
    }
  .vu {
    background-image:linear-gradient(90deg,rgba(100,100,100,0.9),calc(var(--level) - 5px),transparent var(--level),transparent var(--level-neg),rgba(100,100,100,0.9) calc(var(--level-neg) + 15px)),linear-gradient(90deg,orangered,yellow,aquamarine,aquamarine,aquamarine,yellow,orangered);
    width:256px;
    background-position:-4px 0;
    }
  .vu-wrap:after {
    content:"";
    position:absolute;
    top:-1px; left:0;
    width:inherit; height:inherit; padding:0;
    background-image:linear-gradient(90deg,transparent 75%,rgb(100,100,100) 75%);
    background-repeat:repeat;
    background-size:14.8px,256px;
    background-position:-4px 0;
    }

/* OVERLAYS */
  .overlay, .overlay-history-1, .overlay-history-2 {
    opacity:0;
    visibility:hidden;
    position:fixed;
    left:-100px; right:0; top:-25px; bottom:0;
    max-width:250px;
    padding:70px 5px; 
    z-index:10000;
    display:flex; flex-flow: column; justify-content:center; align-items:center; align-content:space-evenly;
    border-right:1px solid rgba(0,0,0,0.1);
    transition:all 0.3s ease-out;
    }

/* SIDEBAR */
  .overlay a {
    text-decoration:none;
    color:inherit;
    }
  .overlay .icon {
    width:180px;
    padding:0 10px;
    min-height:60px;
    max-height:60px;
    justify-content:space-evenly;
    align-items:center;
    align-content:space-evenly;
    font-size:0.9rem;
    }

/* HAMBURGER MENU (NAVBAR) */
  #label-menu {
    border:0.5px solid rgba(0,0,0,0.48);
    border-radius:var(--button-menu-radius,99px);
    background-color: rgba(0,0,0,0.09);
    background-image:linear-gradient(rgba(0,0,0,0.09),rgba(255,255,255,0.2) 40%,rgba(0,0,0,0.09) 40%,rgba(0,0,0,0.09));
    box-shadow:0 0 7px rgba(0,0,0,0.3);
    max-height:44px;
    margin:0;
    margin-top:4px;
    margin-left:-15px;
    padding-top:6px;
    opacity:0;
    width:0;
    transition:all 0.3s, opacity 1s 0.25s, width 0.8s;
    font-size:28px;
    z-index:99;
    cursor:pointer;
    }
  #label-menu:hover {
    filter:drop-shadow(0 0 5px rgba(255,255,255,0.75));
    box-shadow:0 0 12px rgba(255,255,255,0.75);
    }
  #label-menu:active {
    filter:drop-shadow(0 0 7px white);
    box-shadow:0 0 25px white;
    }
  #label-menu:active .menu-detail {
    background-color:rgba(255,255,255,0.85);
    }
  #label-menu:focus {
    filter:drop-shadow(0 0 5px white);
    box-shadow:0 0 5px white;
    }
  .menu-detail {
    display:block;
    margin:4px 7px;
    height:5px;
    width:30px;
    background-color:rgba(255,255,255,0.6);
    transition:all 0.2s;
    }
  body:has(input.button-menu:focus) .overlay {
    -webkit-backdrop-filter:blur(15px);
    backdrop-filter:blur(15px);
    background-color:rgba(255,255,255,0.25);
    opacity:1;
    visibility:visible;
    left:0;
    }

/* HISTORY DETAIL (YOU ASKED FOR IT :) */
  .overlay-history-1, .overlay-history-2 {
    text-shadow:0 0 17px white;
    top:-120px;
    z-index:9000; 
    padding-top:160px; left:100px;
    width:100vw; max-width:100vw;
    pointer-events:none;
    }
  .overlay-history p {
    margin:0px;
    }
  .overlay-history img {
    margin:10px;
    }
  #label-history-detail {
    display:inline-block;
    cursor:pointer;
    text-decoration: underline;
    font-weight: bold;
    color: skyblue;
    user-select: none;
    transition:all 0.3s;
    }
  #label-history-detail:hover {
    transform:translateX(5px);
    background-color:white;
    box-shadow:0 0 15px white;
    }
  body:has(input.show-history-part1:checked) .overlay-history-1 {
    -webkit-backdrop-filter:blur(15px);
    backdrop-filter:blur(15px);
    background-color:rgba(255,255,255,0.25);
    opacity:1;
    visibility:visible; pointer-events:auto;
    left:0;
    }
  body:has(input.show-history-part2:checked) .overlay-history-2 {
    -webkit-backdrop-filter:blur(15px);
    backdrop-filter:blur(15px);
    background-color:rgba(255,255,255,0.35);
    opacity:1;
    visibility:visible; pointer-events:auto;
    left:0;
    }
  .history-container {
    width:var(--history-container-width,900px);
    align-items:flex-start; justify-content:center; align-content:center;
    flex-direction:column;
    overflow:hidden;
    }
  .history-container h3 {
    width:var(--history-container-width,900px);
    margin:8px 0;
    transition:all 0.75s;
    }
  .history-strip {
    align-items:center; justify-content:flex-start; align-content:flex-start; flex:1;
    overflow:visible;
    transition:all 0.75s;
    }
  .history-item {
    width:300px; max-width:300px; min-width:300px;
    border-left:0.5px solid rgba(0,0,0,0.1);
    border-right:0.5px solid rgba(0,0,0,0.1);
    height:350px;
    }
  .history-item ul {
    font-size:0.82rem;
    text-align:left; padding-left:32px; padding-right:15px;
    }
  .history-item p {
    font-size:0.87rem;
    color:rgb(90,90,130);
    }
  .history-item sup {
    font-size:0.55rem;
    }
  .overlay-history input {
    background-color:rgba(255,255,255,0.8); border:1px solid rgba(0,0,0,0.3);
    border-radius:5px;
    height:45px; width:42px; margin:2px;
    }
  .overlay-history input:hover {
    box-shadow:inset 0 0 2px 2px rgba(0,0,0,0.2);
    }
  .overlay-history input:focus {
    box-shadow:0 2px 15px 1px rgba(0,0,0,0.3);
    background-color:white;
    }
  body:has(input.history01:focus) .history-strip { transform:translateX(0); } 
  body:has(input.history02:focus) .history-strip { transform:translateX(-300px); }
  body:has(input.history03:focus) .history-strip { transform:translateX(-600px); }
  body:has(input.history04:focus) .history-strip { transform:translateX(-900px); }
  body:has(input.history05:focus) .history-strip { transform:translateX(-1200px); }
  body:has(input.history06:focus) .history-strip { transform:translateX(-1500px); }

  /* ALL TRIGGERS */
    #triggers {
      position:fixed;
      width:0;
      height:0;
      top:0;
      left:0;
      overflow:hidden;
      }

    .font-reset {
      font-size:var(--base-font-size);
      }
    #version-info {
      position:fixed;
      right:0;
      margin:8px;
      margin-top:18px;
      padding:5px;
      color:rgba(0,0,0,0.2);
      font-size:0.7rem;
      text-align:right;
      border-right:3px solid;
      }
          
/* BALLOON */
  .balloon {
    position:fixed;
    bottom:-270px;
    left:calc(90vw - 100px);
    z-index:20000;
    animation:balloon-rise 5s 10s both; 
    }
  .balloon img {
    width:200px;
    }
  @keyframes balloon-rise {
    0% { 
      visibility:hidden;
      opacity:0;
      transform:translate(50px,0);
      }
    1% {
      opacity:1;
      visibility:visible;
      }
    50% {
      transform:translateY(-42vh);
      }
    70% {
       transform:translateY(-28vh) rotateZ(-3deg);
      }
    90% {
      opacity:1;
      }
    100% {
      visibility:hidden;
      opacity:0;
      transform:translate(-15vw,calc(-110vh - 200px)) }
      }
          
/* POEM VERSES */
  .poem {
    flex-wrap:wrap;
    justify-content:space-between;
    }
  .verse {
    min-width:290px;
    width:320px;
    flex-grow:1;
    padding-right:10px;
    }
          
/* GALLERY PHOTOS */
  .gallery-photo {
    border:0.5px solid rgba(0,0,0,0.35);
    border-radius:15px; 
    margin:9px 6px;
    padding:0;
    filter:grayscale(0.5);
    min-width:100px;
    transition:width 0.9s;
    }

  .gallery-photo img {
    display:block;
    border:0.5px solid rgba(0,0,0,0.2);
    border-radius:10px;
    background-color:whitesmoke;
    height:176px;
    margin:5px; 
    }

/* FLIP CARD */
.card≈flip {
  background-color: transparent;
  width: 280px;
  height: 280px;
  perspective: 1500px;
  .flip»inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s 0.1s;
    transform-style: preserve-3d;
    .flip»front, .flip»back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: inherit;
        overflow: hidden;
        }
    .flip»front {
        z-index: 999;
        }
    .flip»back {
        transform: rotateY(180deg);
        }
    .flip»back[data-a*="axis:both"] {
        transform: rotateY(180deg) rotateZ(90deg);
        }
    }
  &:hover .flip»inner {
    transform: rotate3d(1, 1, 0, 180deg);
    }
  .flip»inner[data-a*="shape:circle"] {
    border-radius: 9000px;
    }
  }

@media screen and (max-width: 1000px) {
  /* For elements that transition to hidden */
  .hide-on-mobile {
      width: 0 !important;
      opacity: 0 !important;
      visibility: hidden !important;
      }
  .show-on-mobile {
      opacity: 1 !important;
      visibiltiy: visible !important;
      width:45px !important;
  }

@media screen and (max-height: 750px) {
  /* For elements that transition to hidden */
  .hide-on-mobile-v {
      width: 0 !important;
      opacity: 0 !important;
      visibility: hidden !important;
      }
  }


/*  @view-transition {
    navigation: auto;
    animation-duration: 1s;
    animation-delay:0.5s;
    }
  html::view-transition {
    animation-duration: 1s;
    animation-delay:0.5s;
    }
  html::view-transition-group(*) {
    animation-duration: 1s;
    animation-delay:0.5s;
    }  */