/*
 **************************
 * Piero Mella's Web Page *
 **************************
 *
 * style.css --- Common stylesheet to all the website files.
 *
 * Author: Lorenzo Mella <lorenzo.mella@hotmail.it>
 * Copyright: Lorenzo Mella 2023-2024
 *
 */


/*
 * Styling
 */

* {
    box-sizing: border-box;
    font-family: Lato;
    padding: 0 0;
    margin: 0 0;
}

/*
 * The body is a big flexbox to keep the footer at the bottom. This means that
 * every page must wrap all contents *other than header and footer* inside a big
 * element with `flex: 1'. This way, if the page is too small, the footer will
 * nonetheless stick to the bottom.
 */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


/* Common Header */

header {
    padding: 12px 16px;
    color: #fff;
    background-image: linear-gradient(to top, rgb(177, 48, 77, 0.75), rgb(0, 0, 0, 0)),
		      url(img/piero-mella-prolusione-small.jpg);
    background-size: cover;
    /* position: sticky; */
    top: 0;
    width: 100%;
}

.university-logo {
    height: 64px;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg)
	    brightness(1000%) contrast(1000%);
}

.full-name-and-title {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    align-content: space-around;
    align-items: center;
    grid-template-rows: 1fr 1fr;
    gap: 52px;
    /* grid-template-columns: 1fr 2fr; */
    margin-bottom: 20px;
}

.full-name {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -1px;
}

.academic-title {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.academic-affiliation {
    font-size: 16px;
    /* font-weight: bold; */
    letter-spacing: 0.75px;
}

.academic-department {
    margin-bottom: 10px;
}

/* Navigation */

.header-navs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.button:link,
.button:visited {
    padding: 6px 16px;
    color: white;
    font-weight: bold;
    letter-spacing: 0.75px;
    text-decoration: solid;
    text-transform: uppercase;
    background-color: #B1304D;
}

.button:hover,
.button:active {
    background-color: #C15062;
    /* text-decoration: underline; */
}


.button-emphasis:link,
.button-emphasis:visited {
    margin-left: 8px;
    padding: 8px 20px;
    color: white;
    background-color: #1F5F9C;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-decoration: solid;
    text-transform: uppercase;
    border-radius: 16px;
}

.button-emphasis:hover,
.button-emphasis:active {
    background-color: #2472B6;
}


/* Home */

.home-main-contents {
    flex: 1;
    width: 60%;
    margin: 56px auto;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 128px;
}


.home-portrait {
    width: 70%;
}


/* Curriculum Vitae */

.curriculum-main-contents {
    width: 60%;
    margin: 56px auto;
    flex: 1;
}

.curriculum-language-choice li {
    font-size: 18px;
    margin-bottom: 10px;
}


/* Publications */

.publications-main-content {
    width: 60%;
    color: #444444;
    margin: 0 auto;
    margin-top: 72px;
}

.publications-broad-category {
    margin: 36px 0;
}

.publications-broad-category h2 {
    margin-bottom: 32px;
}

.publications-years {
    display: grid;
    grid-template-columns: 1fr 5fr;
}

.publications-years h3 {
    padding: 10px 0;
}

.publications-items-by-year {
    padding: 10px 0;
}

.publications-items-by-year p {
    padding: 16px 5px;
}

.publications-items-by-year p:first-of-type {
    padding: 0 5px;
}

/* Footer */

.footer-container {
    color: #fff;
    background-color: #1F5F9C;
    padding: 52px 0;
}

.footer-container footer {
    width: 80%;
    color: #fff;
    margin: 0 auto;
}


/* Opening Lecture */

.opening-lecture-main-content {
    /* overflow: scroll; */
    width: 45%;
    margin: 0 auto;
    /* How does the border work?? */
    line-height: 32px;
}

.opening-lecture-title {
    font-family: Lato;
    font-size: 40px;
    text-align: center;
    /* text-transform: uppercase; */
    color: #B1304D;
    margin: 32px 0;

}

.opening-lecture-subtitle {
    font-family: Lato;
    font-size: 20px;
    text-align: center;
    /* text-transform: uppercase; */
    color: #B1304D;
    margin: 16px 0;
    margin-bottom: 56px;
}

.opening-lecture-author {
    font-family: Lato;
    text-align: center;
    font-size: 20px;
    color: #B1304D;
    margin: 16px 0;
    margin-bottom: 56px;
}

.opening-lecture-address {
    font-style: italic;
}


.opening-lecture-main-content h2, h3 {
    font-family: Lato;
    font-weight: 700;
    text-align: center;
    /* text-transform: uppercase; */
    color: #B1304D;
    margin: 16px 0;
    margin-bottom: 56px;
}

.table-of-contents-link:link,
.table-of-contents-link:visited {
    font-family: Arvo;
    color: #242124;
    margin: 16px 0;
    text-decoration: none;
}

.table-of-contents-link:hover,
.table-of-contents-link:active {
    font-family: Arvo;
    color: #242124;
    margin: 16px 0;
    font-style: oblique;
}

.opening-lecture-main-content p,
.opening-lecture-main-content ol li,
.opening-lecture-main-content ul li {
    font-family: Arvo;
    color: #242124;
    margin: 16px 0;
}

.opening-lecture-main-content ol li,
.opening-lecture-main-content ul li {
    margin-left: 32px;
    /* padding-left: 16px; */
}

.opening-lecture-ol-lower {
    list-style-type: lower-latin;
}

.numbered-formula {
    display: flex;
    flex-direction: row;
    align-content: center;
}

.opening-lecture-diagram {
    text-align: center;
    margin: 32px auto;
}

.opening-lecture-diagram img {
    width: 50%;
    max-width: 70%;
}

.note-link:link,
.note-link:visited {
    color: #B1304D;
    font-variant-position: super;
    font-weight: bold;
}

.note-link:hover,
.note-link:active {
    color: #B1304D;
    font-variant-position: super;
    font-weight: bold;
}

.note-back-link:link,
.note-back-link:visited {
    color: #B1304D;
    font-weight: bold;
    text-decoration: none;
}

.note-back-link:hover,
.note-back-link:active {
    color: #B1304D;
    font-weight: bold;
    text-decoration: none;
}

.index-button:link,
.index-button:visited {
    color: black;
    text-decoration: none;
}

.index-button:hover,
.index-button:active {
    color: black;
    text-decoration: none;
}

.index-button-icon {
    height: 32px;
}

/* TODO
 * Style links, spacing, icons, lists, emphasis and citations.
 * Make formulas and graphs.
*/


/* Gallery */

.gallery-main-content {
    width: 800px;
    margin: 48px auto;
    color: #444444;
}

.gallery-main-content h1 {
    margin: 64px 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* grid-template-rows: 250px 100px; */
    gap: 48px;

    /* Aligning tracks inside the container */
    justify-content: space-between;
    align-content: center;

    /* Aligning items inside cells */
    align-items: center;
}

.gallery-grid img {
    width: 250px;
    box-shadow: 10px 10px 10px 1px #bbbbbb;
}


/* Teaching */


.teaching-main-contents {
    align-content: center;
    flex: 1;
}
.teaching-main-contents h3 {
    font-family: Lato;
    text-align: center;
    font-size: 24px;
    color: #242124;
}

/* Books */

.books-main-contents {
    width: 40%;
    margin: 64px auto;
    display: flex;
    flex-direction: column;
    gap: 64px;
    /* overflow: scroll; */
    color: #444444;
}

.books-title-and-intro {
    height: 200px;
    display: flex;
    flex-direction: column;
    align-content: space-around;
    gap: 64px;
}

.book-card {
    display: flex;
    flex-direction: row;
    gap: 128px;
}

.book-image {
    width: 256px;
    box-shadow: 10px 10px 10px 1px #bbbbbb;
}

.book-author {
}

.book-title {
}

.book-subtitle {
    color: #444444;
    text-align: left;
}

.book-publisher {
    color: #444444;
    text-align: left;
    font-size: 18px;
}

.book-description {
}

.book-preface-link {
    color: #444444;
}

.book-card-separator {
    height: 4px;
    width: 50%;
    margin: 24px auto;
    background-color: #084E91;
    border-radius: 4px;
}