body {
    height:100%;
    padding:5%;
    overflow-x:hidden;
    overflow-y:scroll;
    background: black;
    background-size:cover;
    color: white;
    font-family: monospace;
    min-height: 15000px; 
}

#cta{
    margin-top:50px;
    border-radius: 5%;
    background: #fe7535bb;
    padding:2px;
    animation: cta 1500ms infinite;
}

/* pulsing 'scroll to begin' call to action */
@keyframes cta{
    0%{
        box-shadow: 0 0 0 0 #fd8c3cbb;
    }
    100%{
        box-shadow: 0 0 0 17px #fbb32f01;
    }
}


.bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;   
    height: 100vh;    
    object-fit: cover; 
    z-index: -2;
    background-size: cover;
    background-repeat: repeat;
}

#sun{
    position: fixed;
    top: -25%;
    margin-left: -400px;
    width: 650px; 
    z-index: -1; /* positioned behind other elements*/
    transform-origin: center center;
    transition: transform 0.2s ease-out;
}

#spaceship{
    margin:1.5%;
    font-size:44px;
    position:fixed;
    top:0;
    left:0;
    z-index: 1000;
}

.planet {
    position: fixed;
    top:10%;
    display:none;
    flex-direction: row;
    align-items: flex-start;
    min-height: 100vh;
}

#imgs{
    flex-shrink: 0; 
}


.planet-content {
    display: flex;
    flex-direction: column; 
    margin:10px;
}

#start{
    justify-items: center;
}

.page-title{
    font-size: 3rem;
}

.intro{
    width: 70%;
    height:fit-content;
}

h1{
    font-size: 2rem;
}

.planet-facts{
    padding:2%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    width: 60%;
    height:fit-content;
}


.planet-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}


.content-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}


.flourish-embed {
    display:flex;
    position:relative;
    flex: 1;
    aspect-ratio: 16 / 9;
    max-width: 500px;
    margin:20px;
    width:50%;
    border-radius: 10px;
    transition: opacity 0.4s ease;
}

.chart-container {
    width: 100%;
    overflow: hidden;
}
  
.chart-container .flourish-embed {
    display:flex;
    width: 90%;
}

.flourish-embed.show {
    opacity: 1;
}


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

    #sun {
        width: 675px; /* ensures sun is still slightly in view at max scroll */
    }

    .img{
        max-width: 80%; 
    }

    #start{
        justify-items: center;
    }

    .planet {
        height: 100vh;
        overflow-y: scroll;
        flex-direction: column; /* vertical stacking on smaller screens */
        align-items: center;
    }
    
    .planet-content {
        width: 100%; 
        height:100%;
    }
    
    .planet-facts {
        width: 90%;
        margin-bottom: 150px; /* allow facts to be fully scrollable and visible on mobile  */
    }

    #venus-facts, #jupiter-facts, #neptune-facts{
        margin-bottom: 0;
    }

    .content-container {
        flex-direction: column;
    }

    #mercury-title, #venus-title, #earth-title, #mars-title, #jupiter-title, #saturn-title, #uranus-title, #neptune-title{
        text-align:center;
    }

    .page-title{
        text-align:center;
    }

    #venus-chart-btn, #jupiter-chart-btn, #neptune-chart-btn{
        display:none;
    }

    .chart-container{
        margin-bottom:100px; /* so references box doesnt cover part of chart */
    }

}