/*
    main styles for ux lab website

    Fonts
    font-family: 'Open Sans', sans-serif;
    font-family: 'Lora', serif;

font-family: 'Manrope', sans-serif;

COLORS
#005130 - UM Green
#DB6517 - Darker UM Orange, for readability
*/

/* CSS reset --*/
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Manrope', sans-serif;
    font-size: 1.15rem;
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Manrope', sans-serif;
}

h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.6rem;
    font-weight: 400;
    color: #005130;
}

/* style the home page intro blurb */
section#intro1 h2,
section#research1 h2,
footer h2 {
    margin-bottom: 3rem;
}

/* style the home page projects */
div.excerpt h3 {
    font-size: 1.375rem;
    padding-bottom: 1.5rem;
}

a:link {
    color: #DB6517;
    text-decoration: none;
}

a:visited {
    color: rgb(255, 112, 16);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: rgb(255, 112, 16);
}

p {
    margin-bottom: 1.5rem;
}

ul {
    margin-bottom: 3rem;
    padding-left: 1rem;
}

ul li {
    list-style-type: square;
}


/* ------
LAYOUT
-------- */

header {
    width: 100%;
    height: 5%;
    display: grid;
    align-items: left;
    grid-template-columns: 320px 1fr;
    grid-gap: 60px;
    padding-top: 1rem;
    padding-bottom: 0.9rem;
    margin: auto;
    position: fixed;
    background-color: #fff;
    border-bottom: 1px solid #C3C3C3;
    z-index: 3;

}

header #logo {
    display: block;
    margin: auto;
    /* padding-left: 44px; */
}

/* ---------------
Style the main navigation
--------------- */

nav {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 10px;
    justify-items: left;
    align-items: center;
}

nav .nav-item {
    display: block;
    list-style-type: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

nav .nav-item a:link {
    color: #222;
    text-decoration: none;
}


nav .nav-item a:visited {
    color: #222;
    text-decoration: none;
}

nav .nav-item a:hover {
    color: rgb(255, 112, 16);
    text-decoration: none;
}

html.home nav .nav-item a[href="/index.html"],
html.team nav .nav-item a[href="team.html"],
html.uxlab nav .nav-item a[href="uxblab.html"],
html.publications nav .nav-item a[href="publications.html"],
html.teaching nav .nav-item a[href="teaching.html"],
html.news nav .nav-item .nav-item a[href="news.html"],
html.contact nav .nav-item a[href="contact.html"] {
    color: rgb(255, 112, 16);
}

/* ---------------
Global styles
--------------- */

main {
    width: 100%;
    margin: auto;
    padding-top: 5rem;
}

section,
section#intro1,
section#intro2,
section#research,
footer {
    width: 100%;
}

section#team article,
section#lab article,
section#research2 article,
section#pubs article,
section#teaching article,
section#news article,
section#contact article {
    width: 830px;
    margin: auto;
}

.intro {
    margin-bottom: 2rem;
}

section#team article .intro p,
section#lab article .intro p,
section#research2 article .intro p,
section#pubs article .intro p,
section#teaching article .intro p,
section#news article .intro p,
section#contact article .intro p {
    font-size: 1.375rem;
}

/* ---------------
Home page styles
--------------- */

article {
    width: 72%;
    margin: auto;
    display: grid;
    padding: 5rem 0;
}

section#intro1 article {
    padding-bottom: 0;
}

section#intro1 .intro {
    width: 50%;
    display: grid;
}

section#intro1 .intro picture.ux {
    position: absolute;
    top: 330px;
    right: 250px;
    z-index: 1;
}

section#intro2 {
    background-color: rgb(245, 245, 245);
}

section#intro2 article {
    padding-top: 12rem;
}

section#intro2 {
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
}

.introAbout {
    width: 85%;
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-gap: 40px;
    align-items: center;
    padding-bottom: 3rem 0;
}

.introAbout img {
    border: 20px solid #fff;
}

.introAbout .more {
    grid-column-start: 2;
}

/* section#research {
    background-image: url('/images/stripe.png');
} */

section#research1 .excerpt {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

section#research1 .excerpt>.more {
    padding-top: 2rem;
    grid-column: span 2;
}


section#research1 .c1,
section#research1 .c2 {
    width: 430px;
    border-left: 1px solid #979797;
    padding-left: 30px;
}



/* ---------------
Research page styles
--------------- */

.projects {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-gap: 3rem;
    width: 830px;
    margin: auto;
    padding: 3rem 0;
    border-bottom: 1px solid #e1e1e1;
}

.projects>img {
    justify-self: end;
}

.projects .sponsor {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    color: #727272;
}

/* ---------------
Team Section Styles
--------------- */

section#team .intro,
section#lab .intro {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    margin-bottom: 2rem;
}

section#team .intro picture,
section#lab .intro picture {
    padding-top: 2.5rem;
}

section#lab .intro picture {
    padding-bottom: 3.5rem;

}

section#team .intro figcaption {
    font-size: 0.75rem;
}

.profile {
    display: grid;
    grid-template-columns: 130px 1fr;
    margin-top: 3rem;
    grid-gap: 20px;
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 2rem;
}

/* ---------------
Teaching Section Styles
--------------- */

section#teaching .courses {
    margin-bottom: 2rem;
}

section#pubs ul {
    padding-left: 0;
}

section#pubs ul li {
    list-style-type: none;
    padding-bottom: 1.25rem;
    font-size: 1rem;
}

/* ---------------
Style the footer
--------------- */

footer {
    color: #e1e1e1;
    background-color: #282828;
    padding-top: 7rem;
    clip-path: polygon(0 0, 100% 30%, 100% 100%, 0% 100%);
}

footer article h2 {
    color: #e1e1e1;
    width: 65%;
}

footer article h2,
footer article h3,
footer article h4 {
    font-weight: 700;
}

footer article .contact-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2rem;
    margin-bottom: 3.5rem;
}

footer p.credit,
footer copyright.credit {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #979797;

}