html {
    scroll-behavior: smooth;
    overflow-y: scroll;
    font-size: 10px;
}

body {
    color: #FFF;
    background-color: #000;
}

#contain {
    background-image: url(../images/galaxy-tall.jpg);
    background-size: cover;
    background-position: bottom;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    animation: reveal 2s both ease-in-out;
}

#star, #s3a2 {
    display: none;
}

.sec {
    min-height: 100vh;
    padding: 7rem 2rem 3rem;
}

header {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: flex-start;
}

@keyframes reveal {
    0% {
        filter: opacity(0) blur(20px);
    }
    
    100% {
        filter: opacity(1) blur(0);
    }
}

@keyframes on {
    0% {
    text-shadow: none;
    }
    
    100% {
    text-shadow: 0 0 3px #FAC3DB;
    }
}

h1 {
    font-family: 'Rubik Glitch', sans-serif;
    font-size: 8.5rem;
    color: #000;
    padding: 0 2rem 4rem;
    margin-top: 15rem;
    animation: reveal 2s 4s both ease-in-out, on 0s 6s both ease-in-out;
}

h1 + p {
    text-align: left;
    color: #DDD;
    text-shadow: 0 0 8px #000;
    font-family: "Jost", sans-serif;
    font-size: 1.8rem;
    padding: 0 2rem 2rem;
    width: 70%;
    animation: reveal 1s 2s both ease-in-out;
}

.i {
    font-style: italic;
}

#cta {
    font-family: "Jost", sans-serif;
    font-size: 1.9rem;
    text-align: center;
    animation: reveal 1s 3s both ease-in-out;
}

#cta a{
    display: block;
    color: #DDDDA7;
    text-decoration: none;
    padding: 0.75rem 3rem;
    margin: 0 2rem;
    border-radius: 75px;
    background-color: #061A35;
    border: 2px dotted #DDDDA7;
}

#cta a:link {
    color: #DDDDA7;
    text-decoration: none;
    border: 2px dotted #DDDDA7;
}

#cta a:hover, p + p a:focus {
    color: #DDDDA7;
    text-decoration: none;
    border: 2px solid #DDDDA7;
}

#cta a:active {
    color: #DDDDA7;
    text-decoration: none;
    font-weight: 500;
}

/*:::::::::::::::::::::::::::::::::::::

                                        NAV

::::::::::::::::::::::::::::::::::::::*/

nav {
    background-color: #061A35;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    height: 58px;
    overflow: hidden;
    border-bottom: 1px rgba(221, 221, 167, 0.5) solid;
    transition: all 500ms ease-in-out;
}

button {
    color: #DDDDA7;
    border: none;
    width: 100%;
    margin: 1rem 0;
    line-height: 2;
    font-family: "Jost", serif;
    font-size: 1.8rem;
    text-align: center;
    background: url(../images/hamburger.svg) no-repeat center;
    text-indent: -9999px;
}

nav.open {
    height: 194px;
}

nav.open ul {
    opacity: 1;
    height: 100%;
}

ul {
    background-color: #061A35;
    font-family: "Jost", serif;
    font-size: 1.8rem;
    text-align: center;
    opacity: 0;
    height: 0;
    transition: all 700ms ease-in-out;
}


li {
    line-height: 1.5;
}

li a, button {
    display: block;
    color: #DDDDA7;
    text-decoration: none;
}

li a:link, button:link {
    color: #DDDDA7;
    text-decoration: none;
}

li a:hover, li a:focus {
    font-weight: 400; 
    color: #061A35;
    background-color: #DDDDA7;
    transition: all 300ms ease-in-out;
}

li a:active {
    font-weight: 600;
    transition: all 50ms ease-in-out;
    color: #061A35;
    background-color: #DDDDA7;
}

li a:visited, button:visited {
    color: #DDDDA7;
    background-color: #061A35;
}

/*:::::::::::::::::::::::::::::::::::::

                                SECTION ONE - STORY

::::::::::::::::::::::::::::::::::::::*/

#s1 {
    background-color: #4A2B8C;
}

h2 {
    font-family: "Jost", sans-serif;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    font-size: 7rem;
    font-weight: 800;
}

#s1 h2 {
    color: #000;
}

h3 {
    padding: 3rem 0 0; 
    font-family: "Jost", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.5rem
}

h3 + p {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

p {
    font-family: "Jost", sans-serif;
    font-size: 1.7rem;
    line-height: 1.3;
}

p + p, .bpad {
    margin-bottom: 1.5rem;
}

.img {
    margin: 3rem;
}

img {
    width: 100%;
    height: auto;
}

@keyframes imgFade {
    0% {
        opacity: 0;
        clip-path: inset(50% 50% 50% 50%);
    }
    
    100% {
        opacity: 1;
        clip-path: inset(0% 0% 0% 0%);
    }
}

#pyramid {
    animation: imgFade linear both;
    animation-timeline: view();
    animation-range: cover 10% cover 40%;
}

/*:::::::::::::::::::::::::::::::::::::

                        SECTION TWO - THE ALBUM

::::::::::::::::::::::::::::::::::::::*/

#s2 {
    background-color: #061A35;
}

#s2 h2 {
    color: #4A2B8C;
}

#s2a1 {
    padding: 5rem 0 0;
}

#s2a2 h3 {
    padding: 3rem 0 0;
}

#s2a2 p:first-of-type {
    font-weight: 400;
}

#para {
    height: 100vh;
    background-color: #061a35;
    background-image: url(../images/para-sm.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#para h3 {
    text-align: center;
    line-height: 80vh;
    vertical-align: middle;
    text-shadow: 0 0 10px #000;
}

#tree {
    animation: imgFade linear both;
    animation-timeline: view();
    animation-range: cover 10% cover 40%;
}

/*:::::::::::::::::::::::::::::::::::::

                            SECTION THREE - SHOWS

::::::::::::::::::::::::::::::::::::::*/

#s3 {
    background-color: #663973;
    overflow-y: hidden;
}

#s3 h2 {
    color: #061A35;
}

#s3 h3 + p {
    margin-bottom: 2rem;
}

.card {
    background-color: #061A35;
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    font-weight: 600;
    padding: 2rem;
}

.vertical {
    height: 100px;
    border-left: dotted 3px #DDDDA7;
}

.horizontal {
    width: 80px;
    height: 0.5px;
    border-bottom: dotted 3px #DDDDA7;
}

.left, .top, .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top, .bottom {
    line-height: 1;
}

.bottom {
    margin-top: 0.5rem;
}

.card p {
    color: #663973;
}

.day {
    font-size: 2.6rem;
}

.month {
    margin-bottom: 0.5rem;
}

.month, .time {
    font-size: 2rem;
}

.place {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 0;
}

.right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dol {
    font-size: 6rem;
    line-height: 1;
}

.per {
    font-size: 2.3rem;
    margin-bottom: 0;
    line-height: 1;
}



/*:::::::::::::::::::::::::::::::::::::

                        SECTION FOUR THE ARTIST

::::::::::::::::::::::::::::::::::::::*/

#s4 {
    background-color: #9B8DDC;
}

#s4 h2 {
    color: #663973;
}

#contain-s4 {
    display: flex;
    flex-direction: column;
}

#s4a1 {
    order: 2;
}

#s4a2 {
    order: 1;
}

#s4a1 p {
    margin: 1rem 0 1rem;
}

#socials {
    display: flex;
    gap: 1rem;
}

.auto {
    width: auto;
}

#wanderer {
    animation: imgFade linear both;
    animation-timeline: view();
    animation-range: cover 10% cover 40%;
}

/*:::::::::::::::::::::::::::::::::::::

                                    MEDIA QUERIES

::::::::::::::::::::::::::::::::::::::*/

@media screen and (min-width: 440px) {
/*:::::::::::::::::::::::::::::::::::::

                            SECTION THREE - SHOWS

::::::::::::::::::::::::::::::::::::::*/
    
    #card-contain {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .card {
        width: 340px;
    }
    
}

@media screen and (min-width: 500px) {
/*:::::::::::::::::::::::::::::::::::::

                                    COVER

::::::::::::::::::::::::::::::::::::::*/
    
    #contain {
        background-image: url(../images/galaxy-med.jpg);
    }
    
    h1 {
        padding: 0 4rem 5rem;
        font-size: 10rem;
        margin-top: 13rem;
    }
    
    h1 + p {
        width: 50%;
        padding: 0 4rem 2rem;
    }
    
    #cta {
        padding-left: 2rem;
    }
    
/*:::::::::::::::::::::::::::::::::::::

                                    SECTION ONE - STORY

::::::::::::::::::::::::::::::::::::::*/
    
    .sec {
        padding: 7rem 3rem 3rem;
    }
    
/*:::::::::::::::::::::::::::::::::::::

                                    SECTION TWO - THE ALBUM

::::::::::::::::::::::::::::::::::::::*/
    
    picture {
        display: flex;
        width: 100%;
        justify-content: center;
    }
    
    #pyramid, #tree, #wanderer {
        width: 70%;
    }
    
    #para {
        background-image: url(../images/para-lg.jpg);
    }
    
}

@media screen and (min-width: 640px) {
/*:::::::::::::::::::::::::::::::::::::

                                    COVER

::::::::::::::::::::::::::::::::::::::*/
    
    h1 {
        width: 80%;
        word-spacing: -1rem;
    }
    
/*:::::::::::::::::::::::::::::::::::::

                                    NAV

::::::::::::::::::::::::::::::::::::::*/
    
    nav, nav.open {
        height: 58px;
    }
    
    ul {
        display: flex;
        justify-content: flex-end;
        opacity: 1;
        font-size: 2rem;
        margin-right: 2rem;
    }
    
    button {
        display: none;
    }
    
    li a {
        transition: all 1ms ease-in-out;
        width: 128px;
        padding: 1.5rem;
    }
    
/*:::::::::::::::::::::::::::::::::::::

                                    SECTION ONE - STORY

::::::::::::::::::::::::::::::::::::::*/
    
    .sec {
        padding: 7rem 4rem 3rem;
    }
    
/*:::::::::::::::::::::::::::::::::::::

                                SECTION TWO - THE ALBUM

::::::::::::::::::::::::::::::::::::::*/
    
    picture {
        display: flex;
        width: 100%;
        justify-content: center;
    }
    
    #tree {
        width: 60%;
    }
    
}

@media screen and (min-width: 722px) {
/*:::::::::::::::::::::::::::::::::::::

                                    COVER

::::::::::::::::::::::::::::::::::::::*/
    header {
        justify-content: center;
    }
    
    h1 {
        margin-top: 0;
    }
    
    h1, h1 + p {
        padding-left: 9rem;
    }
    
    #cta {
        padding-left: 7rem;
    }
    
/*:::::::::::::::::::::::::::::::::::::

                                SECTION TWO - THE ALBUM

::::::::::::::::::::::::::::::::::::::*/
    
    #tree {
        width: 50%;
    }
    
    #wanderer {
        width: 60%;
    }
    
}

@media screen and (min-width: 780px) {

/*:::::::::::::::::::::::::::::::::::::

                            SECTION THREE - SHOWS

::::::::::::::::::::::::::::::::::::::*/
    #s3a1 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .text {
        width: 700px;
    }
    
    #card-contain {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
        width: 700px;
        justify-content: center;
    }
    
    .card {
        margin-bottom: 0;
    }
    
    .card:last-of-type {
        margin-right: auto;
    }
    
}

@media screen and (min-width: 890px) {

    
/*:::::::::::::::::::::::::::::::::::::

                                    COVER

::::::::::::::::::::::::::::::::::::::*/ 
    
    @keyframes x-motion {
      0% {
        left: -100%;
      }
  
      100% {
        left: calc(110% - 30px);
      }
    }

    @keyframes y-motion {
      0%, 100% {
        top: 50%;
      }
  
      50% {
        top: 15%;
      }
    }
    
    @keyframes spin {
        0% {
            rotate: 0deg;
        }
        
        100% {
            rotate: 360deg;
        }
    }
    
    #star {
        display: block;
        margin: 0;
        width: 40px;
        position: absolute;
        top: 100px;
        left: 0;
        z-index: 100;
        animation: y-motion 4s 5s cubic-bezier(.65,.09,.47,.95) both, x-motion 4s 5s cubic-bezier(.65,.09,.47,.95) both, spin 500ms 3.5s linear both 25;
    }
    
/*:::::::::::::::::::::::::::::::::::::

                                SECTION ONE - STORY

::::::::::::::::::::::::::::::::::::::*/   
    
    .sec {
        padding: 7.5rem 6rem 3rem;
    }
    
    #contain-s1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        padding: 5rem 0 0;
    }
    
    h3 {
        padding: 0;
    }
    
    #pyramid {
        width: 100%;
    }
    
    #pic1 {
        margin: 0;
    }
    
    
/*:::::::::::::::::::::::::::::::::::::

                                SECTION TWO - THE ALBUM

::::::::::::::::::::::::::::::::::::::*/
    
    #s2a1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 577px;
        gap: 2rem;
        justify-content: center;
        align-items: center;
    }
    
    #text {
        align-self: flex-start;
    }
    
    #tree {
        width: 100%;
    }  
    
}

@media screen and (min-width: 900px) {
/*:::::::::::::::::::::::::::::::::::::

                                    COVER

::::::::::::::::::::::::::::::::::::::*/
    
    #contain {
        background-image: url(../images/galaxy-lg.webp);
    }
    
/*:::::::::::::::::::::::::::::::::::::

                                SECTION TWO - THE ALBUM

::::::::::::::::::::::::::::::::::::::*/
    
    #tree {
        height: 480px;
        width: auto;
    }

/*:::::::::::::::::::::::::::::::::::::

                        SECTION FOUR - THE ARTIST

::::::::::::::::::::::::::::::::::::::*/    
    
    #contain-s4 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding: 5rem 0 0;
    }
    
    #s4a1 {
        order: 1;
    }
    
    #s4a1 p {
        margin: 0 0 2rem;
    }

    #s4a2 {
        order: 2;
        margin: 0;    
    }
    
    #wanderer {
        width: 85%;
    }
    
}

@media screen and (min-width: 1200px) {
    
    h1 + p {
        width: 40%;
    }

/*:::::::::::::::::::::::::::::::::::::

                            SECTION ONE - STORY

::::::::::::::::::::::::::::::::::::::*/       
    
    .sec {
        padding: 7.5rem 10rem 3rem;
    }
    
    #s1 {
        height: 100vh;
    }
    
        
    #pyramid {
        width: 80%;
    }
    
/*:::::::::::::::::::::::::::::::::::::

                            SECTION THREE - SHOWS

::::::::::::::::::::::::::::::::::::::*/
    
    #s3 {
        position: relative;
        overflow-x: hidden;
    }
    
    #s3a1 {
        align-items: flex-start;
    }
    
    #s3a2  {
        display: block;
        margin: 0;        
    }
    
    #whole {
        position: absolute;
        right: -325px;
        top: 13%;
        width: 650px;
    }
    
    #words {
        position: absolute;
        right: -325px;
        top: 13%;
        width: 650px;
    }
    
    @keyframes spin2 {
        0% {
            rotate: 360deg;
        }
        
        100% {
            rotate: 0deg;
        }
    }
    
    #words.in-view {
        animation: spin2 15s both linear infinite;
    }
    
    #piece {
        position: absolute;
        right: -325px;
        top: 13%;
        width: 650px;
    }
    
    #moon {
        position: absolute;
        right: -325px;
        top: 13%;
        width: 650px; 
    }
    
    #moon.in-view {
        animation: spin2 15s both linear infinite;
    }
    
}