/* Styles for web engine page.

   developer:   rmiske
   requires:    /common/framework/css/framework.en.css
   ========================================================================== */

/* ==========================================================================
   setup the environment
   ========================================================================== */
:root {
    --wrapper-h-pad: 3.125rem;
}
#_footer {
    filter: invert(1) brightness(1.1) hue-rotate(180deg);
    background: #dedede;
    border-top-color: #afafaf;
}
#chat-widget-container { display: none !important; }


/*structure*/
.page-width {
    margin: 0 auto;
    max-width: calc(1132px + (2 * var(--wrapper-h-pad)));
    padding: 2.125rem var(--wrapper-h-pad);
    width: 100%;
}
.gridular {
    display: grid;
    grid-gap: 1.875rem;
}


/*content*/
body {
    background: #121416 url('/research/img/background.jpg') top center no-repeat;
    background-size: cover;
}
main {
    color: #fff;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

main h2 {
    border-top: 1px solid #555;
    font-size: 2.25rem;
    padding-bottom: 2.5rem;
    padding-top: 4.25rem;
    text-align: center;
}
main h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

main img {
    height: auto;
    max-width: 100%;
}

main ul {  }
main ul li {
    padding: 0 0 0.75rem 0.75rem;
    position: relative;
}
main ul li:before {
    color: #a997fd;
    content: '\25AA';
    margin-left: -0.75rem;
    position: absolute;
}
main ul li.no-bullet:before {
    display: none;
}


/*altered text*/
#hero h2,
#institute h2,
#outreach h2{
    border: none;
}


/*links*/
main a {
    color: #95d9fd;
}
main a:hover {
    color: #ffc854;
}
main a.button {
    border-radius: 0.25rem; 
    display: inline-block;
    color: #fff;
    font-weight: 400;
    padding: 0.75rem 1rem;
}



/* ==========================================================================
   sections
   ========================================================================== */
/*hero*/
#hero {
    padding-top: 3rem;
}
#hero h1 {
    font-size: 3.75rem;
    text-align: center;
}
#hero h2 {
    color: #6bcbfd;
    font-size: 1.75rem;
    font-style: italic;
    padding-top: 0.5rem;
}
#hero p {
    color: #ccc;
    font-family: 'Noto Serif', serif;
    font-size: 1.5rem;
    line-height: 1.625;
    padding-bottom: 1.25rem; 
    padding-top: 2rem;
}
#hero p + a {
    font-size: 1.125rem;
}
#hero img {
    opacity: 0.85;
}


/*projects*/
#projects .gridular {
    grid-template-columns: 1fr 1fr 1fr;
}
#projects .gridular a {
    background: #30415650;
    border: 1px solid #272b2f; 
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
}
#projects .gridular a:hover {
    background: #212b36 !important;
    border-color: #2d353d !important; 
}
#projects .gridular a h3 {
    color: #95d9fd;
    padding-top: 0.5rem;
}
#projects .gridular a p {
    color: #ccc;
    padding-top: 0.625rem;
}
#projects .gridular a:last-child {
    background: #40305650;
    grid-column-end: span 3;
    align-items: center;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: auto auto;
    text-align: left;
}
#projects .gridular a:last-child h3 {
    color: #a08cff;
    padding-top: 0;
}
#projects .gridular a:last-child img {
    justify-self: end;
}
#projects .gridular + p {
    color: #ccc;
    font-size: 1.5rem;
    line-height: 1.5;
    padding-top: 4rem;
}



/*accomplishments*/
#accomplishments ul {
    background: #30415650;
    border: 1px solid #262c35;
    border-radius: 0.5rem;
    column-count: 3;
    column-gap: 3rem;
    padding: 1.5rem 1.5rem 0.5rem
}
#accomplishments li {
    color: #ccc;
    break-inside: avoid;
}
#accomplishments a { color: #ccc; }
#accomplishments a:hover { color: #ffc854; }

#accomplishments p {
    color: #ccc;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.5;
    padding-top: 2rem;
    text-align: center;
}


/*educational programs*/
#educational .gridular {
    grid-template-columns: 1fr 1fr;
    margin-top: 1.875rem
}
#educational .gridular a {
    background: #30564b50;
    border: 1px solid #272e31; 
    border-radius: 0.5rem;
    padding: 1.5rem;
}
#educational .gridular a:hover {
    background: #213237;
    border-color: #2e3a3e; 
}
#educational .gridular a h3 {
    color: #a2f0ec;
}
#educational .gridular a p {
    color: #ccc;
    line-height: 1.5;
    padding-top: 0.25rem;
}


/*wolfram institute*/
#institute {
    background: #250d42 url('/research/img/institute--background.jpg') no-repeat;
    background-size: 1500px; 
    border: 1px solid #383547;
    border-radius: 0.5rem;
    margin-top: 2.125rem;
}
#institute h2 {
    padding-top: 1rem;
}
#institute h2 + p {
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.5;
}
#institute .gridular {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 2.5rem;
}
#institute .gridular a { color: #fff; }
#institute .gridular a:hover h3 { color: #ffc854; }
#institute .gridular h3 {
    padding-bottom: 0.375rem;
    padding-top: 0.75rem;
}


/*outreach and done with*/
#outreach a,
#done-with a {
    align-items: center;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 60px 1fr;
}
#outreach h3,
#done-with h3 {
    color: #fff;
}
#outreach a:hover h3,
#done-with a:hover h3 { color: #ffc854; }

#outreach .gridular {
    grid-template-columns: 1fr 1fr 1fr;
}
#outreach hr {
    background: #242135;
    border: 0;
    height: 1px;
    grid-column-end: span 3;
}

#done-with {
    background: url('/research/img/research--background.png') bottom repeat-x;
    padding-bottom: 17rem;
}
#done-with .gridular {
    grid-template-columns: 1fr 1fr 1fr 1fr;
        margin: 0 auto;
}




/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 900px) {
    /*setup*/
    :root {
        --wrapper-h-pad: 2rem;
    }

    #institute {
        background: none; 
        border: none;
    }
    #institute > div {
        background: #250d42 url('/research/img/institute--background.png') no-repeat;
        background-size: 1500px; 
        border: 1px solid #383547;
        border-radius: 0.5rem;
        padding: 1.5rem;
    }
    #institute .gridular {
        grid-template-columns: 1fr 1fr;
    }

    #done-with .gridular {
        grid-template-columns: 1fr 1fr;
    }
    
}


@media (max-width: 600px) {
    /*setup*/
    :root {
        --wrapper-h-pad: 1.5rem;
    }

    #projects .gridular,
    #educational .gridular,
    #institute .gridular {
        grid-template-columns: 1fr;
    }
    #projects .gridular a:last-child {
        grid-column-end: span 1;
    }

    #projects .gridular a {
        align-items: center;
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: 50px auto;
        text-align: left;
    }
    #projects .gridular a h3 {
        padding-top: 0;
    }


    #accomplishments ul {
        column-count: 1;
    }


    #institute .gridular a img {
        height: auto;
        width: 100%;
    }


    #outreach .gridular{
        grid-template-columns: 1fr 1fr;
    }
    #outreach h2 {
        padding-top: 1.5rem;
    }
    #outreach hr {
        grid-column-end: span 2;
    }


    #done-with .gridular {
        margin: 0;
    }
}