/* homepage styles

   developer:   rmiske
   requires:    /common/framework/css/framework.css
                /common/templates/www.wolframphysics.org/css/global.css
   ========================================================================== */


/* ==========================================================================
   SETUP
   ========================================================================== */
/*global.css overrides*/
#home .inner { max-width: 104rem; }


/*backgrounds*/
main {
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    /*z-index: 10;*/
}
main:before {
    background: linear-gradient(340deg, #021a51 25%, #8f00b9 100%); 
    content: '';
    height: 100%;
    mix-blend-mode: multiply;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}
main:after {
    background: transparent url('/img/home-background-lg.jpg') no-repeat scroll bottom center;
    background-size: cover; 
    content: '';
    height: 120%;
    left: -10%;
    position: fixed;
    top: 0%;
    width: 120%;
    z-index: 0;
}


/*decoration*/
.notched {
    -webkit-backdrop-filter: blur(0.25rem);
    backdrop-filter: blur(0.25rem);
    filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.5));
    position: relative;
    --notchSize: 0.75rem;
}
.notched:before {
    bottom: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 100% 0%, 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, 0% 100%, 0% 0%);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

.moon .chevron-after:after,
.oort .chevron-after:after { opacity: 0.7; }
.planet .chevron-after:after { opacity: 0.5; }



/* ==========================================================================
   MAIN GRID SETUP
   ========================================================================== */
.solarsystem {
    align-content: center;
    align-items: center;
    display: grid;
    grid-template-columns: 24rem auto;
    grid-template-rows: auto auto auto;
    grid-gap: 1rem;
    height: 100vh;
    justify-content: space-evenly;
    justify-items: center;
    padding: 0 3rem;
    position: relative;
    z-index: 10;
}

.solarsystem a {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.7);
    transition: color 0.15s ease-in-out;
}
.solarsystem a:hover { color: #ffde7d; }



/* ==========================================================================
   LEFT
   ========================================================================== */
/*logo*/
.asteroid {
    align-self: start;
    grid-column: 1 / span 1;
    grid-row: 1 / span 1; 
    width: 100%;
}
.asteroid img { max-width: 100%; }


/*twitter*/
.oort {
    align-items: center;
    align-self: start;
    display: flex;
    flex-direction: row;
    font-size: 0.75rem;
    font-style: italic;
    grid-row: 2 / span 1;
    height: auto;
    justify-content: flex-start;
    margin: 0;
    padding: 1rem;
    width: 100%;
}
.oort:before { background: linear-gradient(340deg, rgba(16, 22, 117, 0.7) 25%, rgba(143, 0, 185, 0.32) 100%); }

.oort a { color: #c2a6e2; }
.oort a:hover span { color: #ffde7d; }

.oort .img {
    padding-left: 0.125rem;
    width: 1.5rem;
}
.oort .img img { height: auto; max-width: 100%; }
.oort .txt { padding-left: 0.65rem; }
.oort .txt span {
    color: #fff;
    display: block;
    font-size: 0.8125rem;
    font-style: normal;
    letter-spacing: 1px; 
    padding-bottom: 0.25rem; 
    text-transform: uppercase; 
}


/*livestreams*/
.moon {
    align-self: end;
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    grid-row: 3 / span 1;
    height: auto;
    min-height: 4rem;
    padding: 1rem 1rem 0.5rem;
    width: 100%;
}
.moon:before { background: linear-gradient(340deg, rgba(16, 22, 117, 0.7) 25%, rgba(143, 0, 185, 0.32) 100%); }

.moon a { display: block; }

.moon .txt { 
    color: #fff;
    padding: 0.25rem 0 0 0.65rem; 
    width: 100%;
}

.moon .stream-head { 
    font-size: 0.8125rem;
    letter-spacing: 1px; 
    padding-bottom: 0.875rem; 
    text-transform: uppercase; 
}
.moon .stream-head a { 
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.625rem;
    padding-top: 0.25rem
}
.moon .stream-head a:hover { color: #fff; }

.moon .streams { 
    border-top: 1px solid rgba(159, 205, 255, 0.2); 
    padding-top: 0.375rem;
}
.moon .stream { 
    color: #c2a6e2;
    display: block; 
    font-size: 0.75rem;
    font-style: italic;
    padding-bottom: 0.75rem;
}
.moon .stream .date { 
   color: #fff;
   font-size: 0.8475rem;
}

.moon .stream .title { display: block; padding-top: 0.125rem; }



/* ==========================================================================
   RIGHT
   ========================================================================== */
/*setup*/
.planet {
    grid-column: 2;
    grid-row: 1 / span 3;
    justify-self: end;
    max-width: 48rem;
    width: 100%;
}

.planet .darkmatter {
    display: grid;
    filter: drop-shadow(0rem 0.25rem 0.75rem rgba(0, 0, 0, 0.4));
    font-size: 1rem;
    grid-template-columns: repeat(8, 1fr);
    margin-bottom: 1rem;
    top: 0.375rem;
}

.continent { 
    align-items: center;
    display: flex;
    padding: 2.5rem 1rem; 
    position: relative; 
}

.continent .img { font-size: 0; }
.continent .txt { padding-left: 0.5rem; }

.continent a img { transition: filter 0.15s ease-in-out; }
.continent a:hover { text-shadow: 0 0 1rem rgba(255,255,255,0.3); }
.continent a:hover img { filter: brightness(1.25) saturate(125%); }


/*top*/
.sol .continent { padding: 2.5rem 1rem 0; }
.sol:before { background: linear-gradient(358deg, rgba(25, 23, 111, 0.6) 0%, rgba(137, 6, 255, 0.5) 100%); }
.sol #announce { grid-column: 1 / span 3; font-size: 1.125rem; }
.sol #update {
    font-style: italic;
    grid-column: 1 / span 3;
    grid-row: 2;
    padding: 0.25rem 1rem 2.25rem 3rem;
}
.sol #update a { color: #c2a6e2; }
.sol #update a:hover { color: #ffde7d; }
.sol #backstory { grid-column: 4 / span 3; }
.sol #explainer { grid-column: 7 / span 2; }


/*middle*/
.inner-planets:before { background: linear-gradient(358deg, rgba(46, 8, 112, 0.5) 0%, rgba(39, 36, 174, 0.4) 100%); }
.inner-planets #introduction { grid-column: 1 / span 3; }
.inner-planets #techdocs { grid-column: 4 / span 3; }
.inner-planets #tools { grid-column: 7 / span 2; }
.inner-planets #qa { grid-column: 1 / span 3; grid-row: 2; }
.inner-planets #registry { grid-column: 4 / span 3; grid-row: 2; }
.inner-planets #gallery { grid-column: 7 / span 2; grid-row: 2; }



/*bottom*/
.darkmatter.outer-planets { 
    font-size: 0.875rem; 
    margin-bottom: 0.375rem; 
}
.outer-planets:before { background: linear-gradient(358deg, rgba(46, 8, 112, 0.5) 0%, rgba(23, 39, 136, 0.7) 100%); }
.outer-planets .continent { padding: 1rem; }
.outer-planets #archives { grid-column: 1 / span 4; }
.outer-planets #livestreams { grid-column: 1 / span 4; grid-row: 2; }
.outer-planets #scrapbook { grid-column: 1 / span 4; grid-row: 3; }
.outer-planets #how-you-can-help { grid-column: 5 / span 4; }
.outer-planets #educollab { grid-column: 5 / span 4; grid-row: 2; }
.outer-planets #discuss { grid-column: 5 / span 4; grid-row: 3; }
.outer-planets #contact { grid-column: 1 / span 1; grid-row: 4; }
.outer-planets #book { 
    grid-column: 2 / span 4; 
    grid-row: 4; 
    font-style: italic; 
}
.outer-planets #book a { padding-left: 2rem; }
.outer-planets #islands { 
    display: initial; 
    grid-column: 6 / span 3; 
    grid-row: 4; 
}
#islands .mini-m { float: right; }
#islands .txt {
    font-size: 0.75rem;
    letter-spacing: 1px;
    position: relative;
    text-transform: uppercase; 
    top: 0.125rem;
}
#islands img { margin-left: 0.5rem; }


/*top borders*/
.inner-planets #registry, 
.inner-planets #gallery, 
.inner-planets #qa,
.outer-planets #contact,
.outer-planets #book,
.outer-planets #islands { 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
} 


/*left borders (better spacing)*/
.inner-planets #registry:before,
.outer-planets #educollab:before,
.outer-planets #discuss:before,
.outer-planets #how-you-can-help:before {
    background-color: rgba(255, 255, 255, 0.2);
    content: '';
    height: 100%;
    left: -0.5rem;
    position: absolute;
    top: 0;
    width: 1px;
}



/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */
@media all and (max-width: 1200px) {
    /*MAIN GRID SETUP*/
    .solarsystem {
        grid-template-columns: 20rem auto;
        grid-gap: 0 3rem;
    }
}


/* styles for medium screens (900px)
   ========================================================================== */
@media all and (max-width: 900px) {
    /*rebiggen*/
    html { font-size: 15px !important; }

    /*MAIN GRID SETUP*/
    .solarsystem {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-gap: 1.5rem 1.5rem;
        height: auto;
        padding: 2rem 3rem;
    }

    /*LEFT/logo*/ 
    .asteroid {
        grid-column: 1 / span 2;
        justify-self: start;
        min-width: 14rem;
        max-width: 20rem;
        width: 30vw;
    }

    /*LEFT/twitter*/ 
    .oort {
        grid-column: 1 / span 4;
        grid-row: 3 / span 1; 
    }

    /*LEFT/livestreams*/ 
    .moon {
        grid-column: 3 / span 2;
        grid-row: 1 / span 1;
        margin-bottom: auto; 
        margin-top: 0;
    }
    .moon .streams { 
        grid-gap: 0.5rem;
        grid-template-columns: 1fr;
    }

    /*RIGHT/setup*/
    .planet {
        grid-column: 1 / span 4;
        grid-row: 2;
        max-width: 100%; 
    }

    /*RIGHT/bottom*/
    .outer-planets #book { grid-column: 1 / span 8 }
    .outer-planets #book a { padding-left: 0; }
    .outer-planets #contact { grid-column: 1 / span 4; grid-row: 5; }
    .outer-planets #islands { grid-column: 5 / span 4; grid-row: 5; }
}

/* Contact icon alignment */
#contact > a:nth-child(1) > span.img > img { margin-top: -0.3rem;}

/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
    /*rebiggen*/
    html { font-size: 16px !important; }

    /*SETUP/backgrounds*/
    main:after { background: transparent url('/img/home-background-lg.jpg') no-repeat scroll bottom center; }

    /*MAIN GRID SETUP*/
    .solarsystem {
        grid-gap: 1.5rem;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        margin: 0 auto;
        padding: 2rem 0;
        width: 90%;
    }

    /*LEFT/logo*/ 
    .asteroid {
        grid-column: 1 / span 1;
        min-width: 14rem;
        width: 50vw;
    }

    /*LEFT/twitter*/ 
    .oort {
        grid-column: 1;
        grid-row: 3; 
    } 

    /*LEFT/livestreams*/
    .moon {
        grid-column: 1;
        grid-row: 4;
        margin-top: 0;
        max-width: 100%;
    }

    /*RIGHT/setup*/
    .planet {
        grid-column: 1;
        grid-row: 2;
    }
    .planet .darkmatter { grid-template-columns: repeat(2, 1fr); }
    .continent, .sol .continent { 
        grid-column: 1 / span 2 !important;
        padding: 1rem; 
    }

    /*RIGHT/top*/
    .sol #announce { padding-bottom: 0; }
    .sol #update { grid-row: 2; padding: 0.25rem 1rem 0.25rem 3rem; }
    .sol #backstory { grid-row: 3; }
    .sol #explainer { grid-row: 4; }

    /*RIGHT/middle*/
    .inner-planets #techdocs { grid-row: 2; }
    .inner-planets #tools { grid-row: 3; }
    .inner-planets #registry { grid-row: 5; }
    .inner-planets #gallery { grid-row: 6; }
    .inner-planets #qa { grid-row: 4; }

    /*RIGHT/bottom*/
    .outer-planets #livestreams { grid-row: 2; }
    .outer-planets #scrapbook { grid-row: 3; }
    .outer-planets #how-you-can-help { grid-row: 4; }
    .outer-planets #educollab { grid-row: 5; }
    .outer-planets #discuss { grid-row: 6; }
    .outer-planets #book { grid-row: 7; }
    .outer-planets #contact { grid-column: 1 / span 1 !important; grid-row: 8; }
    .outer-planets #islands { grid-column: 2 / span 1 !important; grid-row: 8; }

    /*RIGHT/top borders*/
    .inner-planets #gallery { border-top: none; }
    .outer-planets #how-you-can-help { border-top: 1px solid rgba(255, 255, 255, 0.2); } 

    /*RIGHT/left borders (better spacing)*/
    .inner-planets #registry:before, 
    .outer-planets #how-you-can-help:before, 
    .outer-planets #educollab:before, 
    .outer-planets #discuss:before { display: none; }
}


/* styles for minimum supported screen width (320px)
   ========================================================================== */
@media all and (max-width: 320px) {
    /*LEFTlogo*/ 
    .asteroid { width: 80%; }
}


/* printer styles
   ========================================================================== */
@media print {}