/* ------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------!!! HEADER RULES !!!---------------------------------------------- */


    #Header{display:flex;flex-direction:row;text-align:center;clip:rect(auto auto auto auto);transition:clip 1s var(--smoothEase)}
    .main-title{display:flex;flex-direction:column;transition:none}
    .head-img{opacity:.5;padding:0 1% 0 1%;position:fixed;height:3.5vw;background:url(/img/logo_small.webp);background-size:cover}
    .head-img:first-of-type{left:1%}.head-img:last-of-type{right:1%}

    #home-title{
      font:400 10vw/.8 var(--fontMainText);letter-spacing:.5vw;
      color:var(--accent);-webkit-text-stroke:1px #000
    }
    #pg-subtitle{
      margin:auto;text-align:center;
      height:1em;
      visibility:hidden;
      padding-top:.3em;padding-bottom:.3em;z-index:50
    }
    #home:target #pg-subtitle{visibility:hidden}
    #home-title,#home-subtitle,#pg-subtitle{text-shadow:-1px 1px 3px #000}
    #home-subtitle .Stroke,#pg-subtitle .Stroke{font:400 3vw/1 var(--fontMainText)}


    #home:target .main-title{
      visibility:visible;position:relative;left:18.5%;
      animation:title-slide-up 1.5s var(--smoothEase)
    }
    #home:not(:target) .main-title{
      visibility:hidden;position:absolute;left:68.5%;
      animation:title-slide-down 1.5s var(--smoothEase)
    }


    #disco:target #sub-disco,#folio:target #sub-folio,
    #bio:target #sub-bio,#berklee:target #sub-berklee,#about:target #sub-about
                                  {visibility:visible;position:relative;animation:reveal 1.5s var(--smoothEase)}
    [id]:not(:target) [id^="sub-"]{visibility:hidden;position:absolute;animation:conceal 1.5s var(--smoothEase)}


    @media screen and (max-width:900px){
        #home:target .main-title{left:1.8% }
        #home:not(:target) .main-title{left:51.8% }
        .main-title{flex-direction:column-reverse}
        
        #home-title{font-size: 15vw;letter-spacing: -0.4vw;-webkit-text-stroke:1px var(--accent);text-shadow:-1px 1px 2px #000}
        #home-subtitle .Stroke, #pg-subtitle{color:var(--link);-webkit-text-fill-color:var(--link);-webkit-text-stroke-width:0;-webkit-text-stroke-color:transparent}
        #home-subtitle .Stroke{font:200 4.5vw/1 var(--fontMainText)}
        #pg-subtitle{font:200 6vw/1 var(--fontMainText)}
        .head-img{display:none}
    }


/* ------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------!!! FOOTER RULES !!!---------------------------------------------- */


    #Footer{
      padding:3em 0 1em;overflow:hidden;
      font-size:.8vw;line-height:1.5em
    }
    .footer-img{height:5vw;transition:.3s} .footer-img:hover{transform:scaleX(1.08) scaleY(1)}
    #Footer a{letter-spacing:.1em} #Footer a:hover{letter-spacing:.15em} #Footer .Lined:hover {border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)}
    
    @media screen and (max-width:900px){#Footer{padding:1rem 0 1rem;font-size:3.2vw} .footer-img{height:20vw} #Footer a:hover{letter-spacing:.1em}}



/* ------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------!!! NAVIGATION MENU !!!---------------------------------------------- */


    #Nav {transform:translate(0px);overflow:hidden}
    #Nav a {
      margin:auto;padding:.5%;
      font: 400 1.15vw var(--fontMainText);text-decoration:none
    }
    [data-navigation] img {
      margin:.5%;position:fixed;
      width:8vw;height:auto
    }
    @media screen and (max-width:900px) {
        #Nav{letter-spacing:0}
        #Nav a{margin:3% 0 3% 0;font-size:4vw; padding:1.8%} [data-navigation] img,.light{display:none} .light{animation-play-state:paused}
    }


    /* ! CANDLES */
    .Candles{visibility:visible}
    #about:target .Candles, #about:target .light {visibility:hidden}
    #about:target .light {animation:light-down 1.5s var(--smoothEase)}
    #about:target #candle-L > img {animation:candle-down-L .8s var(--smoothEase)} #about:not(target) #candle-L > img {animation:candle-up-L 1.5s var(--smoothEase)}
    #about:target #candle-R > img {animation:candle-down-R .8s var(--smoothEase)} #about:not(target) #candle-R > img {animation:candle-up-R 1.5s var(--smoothEase)}
    .light {
      width:25vw;height:25vw;bottom:-15%;
      text-align:center;background:radial-gradient(ellipse at center, rgba(200, 140, 100, 0.60) 0%, rgba(225, 200, 140, 0) 40%, rgba(255, 220, 180, 0) 90%);
      animation:light-up 1.5s var(--smoothEase),flicker 8s infinite ease-in-out;transition:.8s
    }

    /* ! ANGELS */
    #about:target .Angels{visibility:visible;opacity:1} #about:not(target) .Angels{visibility:hidden;opacity:0;animation-play-state:paused}

    #about:target #angel-L{animation:angel-leftIn 1.5s var(--smoothEase)} #about:not(target) #angel-L{animation:angel-leftOut .8s var(--smoothEase)}
    #about:target #angel-R{animation:angel-rightIn 1.5s var(--smoothEase)}  #about:not(target) #angel-R{animation:angel-rightOut .8s var(--smoothEase)}