@font-face
{
	font-family: Lato;
	font-style: normal;
	font-weight: normal;
	src: url(../fonts/Lato.woff);
}

@font-face
{
	font-family: Maths;
	font-style: italic;
	font-weight: normal;
	src: url(../fonts/cmunti.otf);
}

@font-face
{
	font-family: Maths;
	font-style: normal;
	font-weight: normal;
	src: url(../fonts/cmunui.otf);
}

@font-face
{
	font-family: latin-modern-maths;
	font-style: normal;
	font-weight: normal;
	src: url(../fonts/latinmodern-math.otf);
}

:root {
	--mw-site: min(800px, 100vw);
	--f-body-text: Lato; /*or Lato 17px?*/
	--f-size-body-text: 17px;

	--white-0: #f7f7f7;
	--white-1: #fafafa;
	--white-2: #fdfdfd;
	--black: #141414;
	--color-dim: #6b6b6b;
}

.mw-site {
	max-width: var(--mw-site);
}

.c-dim {
	color: var(--color-dim);
}


body {
	min-height: 100vh;
	font-family: var(--f-body-text);
	font-size: var(--f-size-body-text);
	font-weight: 450;
	line-height: 1.4rem;
}

h1, h2, h3, h4 {
    font-family: Lato;
}

#page {
    flex: 1;
}

a {
    text-decoration: none;
}

/*-------------------------------------------------
	Banner
--------------------------------------------------*/

#banner-center {
    width: 100%;
    max-width: var(--mw-site);
    margin: auto;
    padding-top: 30px;
}

#logo img {
    padding-top: 1rem;
    max-width: 170px;
    display:inline-block;
}

#banner-quote {
    font-size: 12pt;
}

/*-------------------------------------------------
	Menu
--------------------------------------------------*/

#menu {
    display: flex;
    gap: 0px;
    align-items: flex-end;
    width: 100%;
    max-width: var(--mw-site);
    margin: auto;
	border-bottom: 2px solid #707070;
	font-family: Lato;
}

#menu a {
	transition-property: margin-top, padding-left, padding-right, font;
	-ms-transition-property: margin-top, padding-left, padding-right, font;
	-moz-transition-property: margin-top, padding-left, padding-right, font;
	-webkit-transition-property: margin-top, padding-left, padding-right, font;
	-o-transition-property: margin-top, padding-left, padding-right, font;

	transition-duration: 0.5s;
	-ms-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;

    display: inline-block;

    margin-top: 0.5rem;

    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;

	background-color: #505050;
	font-size: 18px;
    font-weight : bold;
	text-decoration: none;
	color: #FFFFFF;
}

body#home #menu a.home,
body#blog #menu a.blog,
body#gallery #menu a.gallery,
body#about #menu a.about {
    padding-top: 0.8rem;
    padding-bottom: 1rem;

    margin-top: 0rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 24px;

	background-color: #707070;
	color: #FFFFFF;
}

body#home #menu a.home:hover,
body#blog #menu a.blog:hover,
body#gallery #menu a.gallery:hover,
body#about #menu a.about:hover {
	background-color: #707070;
	color: #FFFFFF;
}


#menu a:hover
{
    margin-top: 0rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 24px;

	color: #000000;
	background-color: #C0C0C0;
}


/*-------------------------------------------------
	Contents
--------------------------------------------------*/

#contents {
    width: 100%;
    max-width: var(--mw-site);
    margin: auto;
    padding-top: 20px;
    padding-bottom: 60px;
    text-align: left;
}

a {
	font-weight: bold;
	text-decoration: none;
	color: #6895e3;
}

a:hover {
    font-weight : bold;
    color: #3465bb;
}

a img
{
	border: none;
}

img
{
	max-width: 100%;
	-ms-interpolation-mode: bicubic;
}

#post img {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#post h2,
#post h3 {
    padding-top: 1.5rem;
}

#post h4 {
    padding-top: 1rem;
}

figure
{
    padding-top: 1em;
    padding-bottom: 1em;
    text-align: center;
}

figure img
{
    padding-top: 0;
    padding-bottom: 0;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

figcaption
{
    padding-top: 0.5em;
    text-align: center;
    font-size: 16px;
}

@media (hover: none) and (pointer: coarse)
{
	/* Make the links more easily clickable on touch devices */
	div.contents * a
	{
		padding-top: 10px;
		padding-bottom: 10px;
		margin-top: 4px;
		margin-bottom: 4px;
		display:inline-block;
	}
}

video {
    padding-top: 1rem;
    padding-bottom: 1rem;
	max-width:100%;
}

/*-------------------------------------------------
	Code
--------------------------------------------------*/

pre
{
	background-color: #f8f8f8;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
    padding: 20px;
	overflow: auto;
}

code
{
	font-family:Courier;
	font-size:12pt;
}

pre code
{
    font-size: 12pt;
}
/*-------------------------------------------------
	Previews
--------------------------------------------------*/

.preview-container {
    gap: 0.5rem
}

.post-preview {
    background-color: var(--white-1);
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
	text-align: left;
}

a.post-preview {
	color: #000000;
	font-weight: normal;
}

a.post-preview:hover {
    background-color: var(--white-2);
}

/*-------------------------------------------------
	Home
--------------------------------------------------*/
#home a.post-preview {
    flex: 1;
}

#home #presentation img {
    float: left;
    padding-top:1.5rem;
    margin-right: 2rem;
    margin-bottom: 0.5rem;
}

#home ul {
    overflow: hidden;
}

/*-------------------------------------------------
	Blog
--------------------------------------------------*/

#blog .post-preview .thumbnail {
    width: 200px;
}

#blog .post-preview img {
    max-width: 200px;
}

#blog a.post-preview {
}

/*-------------------------------------------------
	Gallery
--------------------------------------------------*/
#gallery .post-preview {
    padding: 2rem;
    width: calc(var(--mw-site) / 2 - 0.5rem);
}

#gallery .post-preview .thumbnail {
    width: 100%;
    aspect-ratio: 1;
}

#gallery .post-preview img {
    max-width: 100%;
}

#gallery .post-preview .summary {
    min-height: 2lh;
}

/*-------------------------------------------------
	About
--------------------------------------------------*/

#about img {
    float: left;
    margin-right: 2rem;
    margin-bottom: 0.5rem;
}

#about ul {
    overflow: hidden;
}

/*-------------------------------------------------
	Bibliography
--------------------------------------------------*/

.bibliography
{
	text-align: left;
}

.bibliography-entry
{
    padding-bottom: 0.5em;
}

/*-------------------------------------------------
	Footnotes
--------------------------------------------------*/

.footnotes
{
    border-top: solid 1px black;
    padding-top: 1em;
    font-size: 12pt;
}

/*-------------------------------------------------
	Footer
--------------------------------------------------*/
footer {
    width: 100%;
    max-width: var(--mw-site);
    margin: auto;
    height: 100px;
}