@charset "UTF-8";

/* Can I admit that I've confused myself a bit regarding my CSS files?
    My theory was that I'd need one file for the main page and one for 
    all my other pages. I've worked on that assumption. But maybe I could
    have stuck everything in one stylesheet? I'm not even really sure
    if styles in here apply only to the main page, or if they apply
    to the sub-pages by virtue of them being loaded within the main
    page. */
/* Ok, I did some testing. Styles applied in this file DO NOT apply
    to subpages, it seems. So this may have been the best way
    to organize things. */
/* The only thing here that really calls for two files though,
    is that the main of my containing page works a little differently
    than the main of the other pages. Everything else I could have
    stuck in one stylesheet. And even that, I could have slapped an
    ID on my main page's main to style it separately. Still, I'll
    keep things like this for now. */    

/* I want the main of this page to cover the whole window, with no
    margin or padding, and be a column flexbox. At the top I'll stick my
    banner, and beneath it the iframe. */
main {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 0; 
}

/* Here's the div containing my banner. It's fixed, so it'll always
    be on top. It spans the width of the page and has a fixed height.
    I've changed scroll behaviour so that there's no manual scrolling. */
#visualNav {
    position: fixed;
    height: 160px;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: rgb(4, 4, 31);
}

/* Here's my iframe. It has a margin on top so that it's not covered
    by the banner. */
#pageBrowser {
    padding-top: 160px;
    height:100%;
    margin: 0;
    box-sizing: border-box;
}

/* This is a div to contain my animated sphere. It is fixed 
*/
#sphereContainer {
    position: fixed;
    width: 100vw;
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 1;
}

/* This is the sphere itself */
#animatedSphere 
{
    height: 166px;
    width: 125px;
    margin-right: 10px;
}

/* personally, I hate overscrolling */
html, main, body, iframe {
    overscroll-behavior-y: none;
}

/* This is a late addition: headers visible in the visualNav. This is the container for all those headers. It is as wide as the visualNAv image is. */
#masthead {
    display: flex;
    flex-direction: row;
    height: 160px;
    width: 21245px;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    background-color: transparent;
}

/* within the masthead are divs, one screen wide, containing two headers. */
#masthead div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
}

/* Each header in the divs gets a bit of typography. They display as inline blocks. */
 #masthead h1 {
    display: inline-block;
    width: 190px;
    color: rgba(250, 235, 215, 1);
    text-decoration: none;
    line-height: 0.8em;
    margin: 0;
    font-size: 1.5rem;
}

/* odd headers are padded on the left, even ones on the right */
#masthead h1:nth-child(odd) {
    padding-left: 1dvw;
}

#masthead h1:nth-child(even) {
    padding-right: 1dvw;
}

/* Here are some (somewhat hacky) media queries to make the whole thing more phone-friendly. */
@media screen and (orientation: landscape) and (max-height: 600px){
    #visualNav {
        height: 26dvh;
    }

    #masthead {
        height: 26dvh;
    }

    #animatedSphere {
        height: 26dvh;
        width: auto;
    }
    #pageBrowser {
        padding-top: 26dvh;
    }
}

@media screen and (max-width: 450px){
    #masthead h1 {
        font-size: 1.25rem;
        width: 165px;
    }
}

@media screen and (max-width: 300px){
    #masthead h1 {
        font-size: 1.2rem;
        width: 120px;
    }
}