:root{
    --lipics-black : rgb(16,16,16); /** Strictly speaking not an official part of the style. */
    --lipics-grey : rgb(79, 79, 84);
    --lipics-bullet-grey : rgb(153, 153, 156);
    --lipics-line-grey : rgb(130,128,132);
    --lipics-light-grey: rgb(217,217,219);
    --lipics-white : rgb(252,252,252); /** Well, my own addition. */    
    --lipics-yellow : rgb(252,199, 18);
    --lipics-link : rgba(255,255, 0, 0.3);
    --lipics-inline-link : rgb(76,76,196);
    --lipics-visited-inline-link : rgb(196,76,196);
}
::selection{
    background : var(--lipics-yellow);
}
@font-face {
    font-family: 'cmu-sans-serif';
    src: url('../fonts/cmu-sans-serif.ttf') format('truetype');
n}
@font-face {
    font-family: 'cmu-sans-serif-bold';
    src: url('../fonts/cmu-sans-serif-bold.ttf') format('truetype');
}
@font-face {
    font-family: 'cmu-sans-serif-italic';
    src: url('../fonts/cmu-sans-serif-italic.ttf') format('truetype');
}
@font-face {
    font-family: 'cmu-serif';
    src: url('../fonts/cmu-serif.ttf') format('truetype');
}
@font-face {
    font-family: 'cmu-serif-bold';
    src: url('../fonts/cmu-serif-bold.ttf') format('truetype');
}
@font-face {
    font-family: 'cmu-serif-italic';
    src: url('../fonts/cmu-serif-italic.ttf') format('truetype');
}
@font-face {
    font-family : 'cmu-typewriter';
    src : url('../fonts/cmu-typewriter.ttf') format('truetype');
}
@font-face {
    font-family : 'cmu-typewriter-bold';
    src : url('../fonts/cmu-typewriter-bold.ttf') format('truetype');
}

*{
    margin : 0px;
    padding : 0px;

    font-style : normal;
    font-weight : normal;
}

body{    
    background-color : var(--lipics-white);
    color : var(--lipics-black);

    &:after{
	position : fixed;
	right : 0px;
	bottom : 100px;
	padding-right : 48px;
	padding-top : 4px;
	padding-bottom : 4px;
	padding-left : 8px;

	content : "HERA";
	font-family : 'cmu-sans-serif-bold';
	font-size : 20px;
	color : var(--lipics-grey);
	background-color : var(--lipics-yellow);
	letter-spacing : 3px;
    }
}

header{
    position : absolute;
    top : 0px;
    height : 146px; 
    left : 200px; right : 0px;
    
    padding-top : 24px;
    padding-left : 24px;

    overflow : hidden;

    /** This is absolutely a stop-gap measure. */
    @media(width < 1030px){
	&::after{
	    display : none;
	}
    }
    /** I feel bad doing this. Sorry. */
    @media(width < 630px){
	.authors{
	    display : none !important;
	}
	a{
	    display : none;
	}
	address{
	    display : none;
	}
    }
    
    @media(width < 550px){
	left : 0px;
	max-width : 100% !important;

	padding-left : 0px;
	text-align : center;

	height : 70px;
	
	h1{
	    font-size : 20px !important;
	}
	h2{
	    font-size : 18px !important;
	}
	.authors{
	    display : none !important;
	}
	a{
	    display : none;
	}
	address{
	    display : none;
	}

	&:after{
	    display : none;
	}
    }

    &:after{
	position : absolute;
	width : 670px;
	height : 2px;

	margin-top : 24px;

	content : "";
	background-color : var(--lipics-line-grey);
    }
    
    h1{
	font-size : 32px;
	font-family : 'cmu-sans-serif-bold';
    }

    h2{
	font-size : 18px;
	font-family : 'cmu-sans-serif';
	margin-top : -12px;
    }
    .authors{
	margin-top : 8px;
	font-family : 'cmu-serif';
	font-size : 20px;
	display : inline;
    }
    address{
	margin-top : -4px;
	font-family : 'cmu-serif';
	font-style : normal;
    }
    .email-icon{
	position : absolute;
	display : inline;
	margin-left : 6px;
	margin-top : 6px;
    }
    .orcid-icon{
	position : absolute;
	display : inline;
	margin-left : 30px;
	margin-top : 6px;
    }    
    a#email-link:hover::before{ /** That's a lot of selectors! */
	position : absolute;
	content : "";
	background-color : var(--lipics-link);

	margin-top : 3px;
	margin-left : 3px;
	width : 23px;
	height : 23px;
    }
    a#orcid-link:hover::before{
	position : absolute;
	content : "";
	background-color : var(--lipics-link);

	margin-top : 3px;
	margin-left : 26px;
	width : 23px;
	height : 23px;
    }    
}


main{
    counter-reset : section-counter;
    
    position : absolute;
    top : 136px;
    left : 200px; right : 0px;
    height : auto;
    padding-left : 24px;
    padding-right : 48px;
    padding-bottom : 136px;

    max-width : 660px;

    @media(width < 1030px){
	&::before{
	    display : none;
	}
    }

    @media(width < 630px){
	padding-right : 16px;
    }
    
    @media(width < 550px){	
	left : 0px;
	top : 160px;

	&::before{
	    display : none;
	}
    }
    
    /* background-color : rgba(255,128,128,0.5); */

    &:before{
	content : "Content";
	font-family : 'cmu-sans-serif-bold';
	margin-left : 24px;
	font-size : 20px;

	background-color : var(--lipics-white);
	padding-left : 8px;
	padding-right : 8px;
    }
    .picture-of-me{
	float : left;
	margin-top : 32px;
	margin-left : 8px;
	margin-right : 8px;
	border : 1px solid var(--lipics-line-grey);
	border-radius : 8px;
	#mugshot{
	    border-radius : 8px;	    
	}
	dt{
	    font-family : 'cmu-sans-serif';
	    color : var(--lipics-grey);	    
	    font-size : 14px;
	    text-align : center;
	}
    }
    a{
	color : var(--lipics-inline-link);
	&:hover{
	    background-color : var(--lipics-link);
	    padding-left : 4px; margin-left : -4px;
	    padding-right : 4px; margin-right : -4px;
	    padding-top : 2px; margin-top : -2px;
	    padding-bottom : 2px; margin-bottom : -2px;
	}
	&:visited{
	    color : var(--lipics-visited-inline-link);
	}
    }
    
    h1{
	font-family : 'cmu-sans-serif-bold';
	font-size : 20px;
	padding-left : 42px;

	margin-top: 16px;
	margin-bottom : 12px;

	counter-reset : subsection-counter;

	&:before{	    
	    position : absolute;
	    margin-left : -42px;
	    margin-top : -3px;
	    padding-top : 2px;
	    
	    content : counter(section-counter);
	    counter-increment : section-counter;
	    
	    width : 28px;
	    height : 26px;
	    background-color : var(--lipics-yellow);

	    text-align : center;
	    font-family : 'cmu-sans-serif-bold';	    
	}
    }
    h2{
	font-family : 'cmu-sans-serif-bold';
	font-size : 18px;

	margin-top : 8px;
	margin-bottom : 6px;

	counter-reset : subsubsection-counter;

	&::before{
	    content : counter(section-counter)"."counter(subsection-counter);
	    margin-right : 12px;
	    counter-increment : subsection-counter;	    
	}
    }
    h3{
	font-family : 'cmu-sans-serif-bold';
	font-size : 18px;

	margin-top : 8px;
	margin-bottom : 6px;

	&::before{
	    content : counter(section-counter)"."counter(subsection-counter)"."counter(subsubsection-counter);
	    margin-right : 12px;
	    counter-increment : subsubsection-counter;
	}
    }
    p{
	font-size : 16px;
	font-family : 'cmu-serif';
    }
    ul{
	list-style : none;
	font-size : 16px;
	font-family : 'cmu-serif';
	li{
	    margin-left : 32px;

	    &::before{
		display : block;
		position : absolute;
		margin-top : 8px;
		margin-left : -26px;
    
		content : "";
		width : 12px;
		height : 6px;
		background-color : var(--lipics-bullet-grey);
	    }	    
	}
    }
    em{
	font-family : 'cmu-serif-italic';
	font-style : normal;
    }
    strong{
	font-family : 'cmu-serif-bold';
	font-weight : normal;
    }
    .katex{
	font-size : 16px;
    }
    .publication-list{
	width : 100%;
	margin-top : 20px;

	.publication{
	    width : 100%;
	    margin-top : 20px;

	    hgroup{
		display : table-column;
		width : 80%;
		float : left;
	    }
	    h1{
		padding-left : 0px;
		margin-top : 0px;
		&::before{
		    display : none;
		}
		font-family : 'cmu-serif-bold';
		.title-link{
		    color : var(--lipics-black); text-decoration-thickness : 2px;
		text-decoration-color : var(--lipics-yellow);
		}
	    }
	    h2{
		padding-left : 0px;
		margin-top : -12px;
		line-height : 18px;
		&::before{
		    display : none;
		}
		font-family : 'cmu-serif';
		color : var(--lipics-grey);
	    }
	    .data{
		display : table-column;
		width : 20%;
		float : right;
		position : relative;
		top : 0px;
	    }
	    .top-bit{
		display : table;
		width : 100%;
		height : auto;
	    }
	    time{

	    }
	    p{

	    }
	}
    }    
    article{
	width : 100%;
	margin-top: 10px;
	
	overflow : hidden;
	hgroup{	    
	    width : 100%;
	    margin-bottom : -6px;
	}
	h1{
	    margin-top : 0px;
	    margin-bottom : -6px;
	    padding-left : 0px;
	    &::before{
		display : none;
	    }
	    a.title-link{
		color : var(--lipics-black);
		font-family : 'cmu-serif-bold';
		text-decoration-thickness : 2px;
		text-decoration-color : var(--lipics-yellow);
	    }	    
	}
	h2{
	    display : inline;
	    padding-left : 16px;
	    line-height : 2px;
	    &::before{
		display : none;
	    }
	    a.title-link{
		text-decoration : none;
		color : var(--lipics-grey);
		font-family : 'cmu-serif';
	    }	    
	}
	time{
	    display : inline;
	    float : right;
	    font-size : 14px;
	    color : var(--lipics-grey);
	}
	p{	    
	    width : 100%;
	    text-indent : 0px;
	    overflow : hidden;
	    white-space : nowrap;
	    text-overflow : ellipsis;
	}
    }
}

aside{
    /** Total width of the aside is 200px (ideally). */
    /* background-color : rgba(128,255,128,0.5);     */
    position : fixed;
    left : 0px;
    top : 0px;
    width : 188px;
    bottom : 0px;
    padding-left : 24px;
    padding-top : 48px;
    @media(width < 550px){
	position : absolute;
	top : 100px;
	bottom : auto;
	padding-top : 0px;
	padding-left : 0px;

	left : 0px;
	width : 100%;
	right : 0px;

	text-align : center;
	h1{
	    font-size : 18px !important;
	}
	nav a{
	    display : inline !important;
	    padding-left : 0px !important;
	    margin-right : 0px !important;

	    font-size : 16px !important;

	    color : var(--lipics-inline-link) !important;
	    text-decoration : underline !important;
	    text-decoration-thickness : 1pt !important;
	    
	    &:before{
		display : none !important;
	    }
	}
	.superfluous{
	    display : none !important;
	}
    }

    h1{
	font-family : 'cmu-sans-serif-bold';
	font-size : 24px;
    }
    nav a{
	display : block;
	width : auto;

	padding-left : 30px;
	padding-bottom : 4px;
	margin-right : 48px;
	
	font-family : 'cmu-serif';
	text-decoration : none;
	
	font-size : 18px;
	color : var(--lipics-black);

	&::before{
	    display : block;
	    position : absolute;
	    margin-top : 10px;
	    margin-left : -26px;
    
	    content : "";
	    width : 12px;
	    height : 6px;
	    background-color : var(--lipics-bullet-grey);
	}
	
	&:hover{
	    background-color : var(--lipics-link);
	}
    }
}

footer{
    /* background-color : rgba(255,255,128,0.5); */
    position : fixed;
    bottom : 0px;
    height : 80px; width : 100%;
    font-size : 14px;
    font-family : 'cmu-serif';
    background-color : var(--lipics-white);

    @media(width < 550px){
	p{
	    overflow : hidden;
	    white-space : nowrap;
	}
    }
    
    &:before{
	content : "";
	position : absolute;
	left : 12px;
	margin-top : 0px;
	width : 200px;
	height : 2px;
	background-color : var(--lipics-line-grey);
    }

    #footer-top{
	position : absolute;
	display : block;

	left : 132px;
	bottom : 46px;
    }
    #footer-mid{
	position : absolute;
	display : block;

	left : 132px;
	bottom : 29px;
    }
    #footer-bot{
	position : absolute;
	display : block;

	left : 132px;
	bottom : 14px;
    }
    a{
	position : absolute;
	top : 0px;
	left : 0px;
	background-color : var(--lipics-black);

    }
    a:hover:before{
	position : absolute;
	content : "";
	background-color : var(--lipics-link);

	margin-top : -12px;
	margin-left : -12px;
	width : 128px;
	height : 70px;
    }

}

h1 .katex .base {
    display : inline;
    font-size : 20px;
}

.inline-code{
    font-family : "cmu-typewriter";
}