/* This stylesheet is about formatting. Separate css files are used
 * for 'color skins'.


/***************** standard element overrides **********************************
 *
 * Root font size is not hardcoded but left to the browser / user. Font sizes
 * if specified are relative to root font size (unit 'rem') which is hopefully
 * equal for all font families including monospace. */

html{
font-family: sans-serif;
font-size: 1.1rem;
line-height: 1.5rem;
}

body{
margin-left: 5%;
margin-right: 5%;
margin-bottom: 10rem;
}

p, h1, h2, h3, h4, h5, h6{
font-weight: normal;
max-width: 40rem;
}

/* page heading */
h1{
font-size: 1.5rem;
margin-top: 5rem;
margin-bottom: 3rem;
}

/* section headings */
h2{
font-size: 1.5rem;
margin-top: 4rem;
margin-bottom: 3rem;
}

h3{
font-size: 1.2rem;
margin-top: 4rem;
margin-bottom: 1rem;
}

a{
padding: 0.2rem;
}

/* literal text blocks, notably code */
pre{
font-family: monospace;
font-size: 0.9rem;
white-space: pre;
overflow: auto;
padding: 1rem;
margin-top: 3rem;
margin-bottom: 3rem;
margin-left: -1rem;
max-width: 42rem;
}


/************** images ********************************************************/

/* simple case: img centered in its own block with much space around */
img.block{
display: block;
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 5rem;
margin-bottom: 5rem;
}

/* image container class for inlined [image + caption] */
div.iblock{
display: inline-block;
margin: 3rem 1rem 1rem 1rem;
font-size: 0.9rem;
line-height: 1.5rem;
}


/************** navigation menu ***********************************************/

/* Navigation menu implemented as drop-down list. There is only one menu button
per page, fixed at top right position. The menu list is displayed on hover or
click when using a mouse, on touch when using a touch screen, or on focus when
using tab key.

/* outer container holding menu button and drop-down list */
nav.menu{
display: block;
position: fixed;
top: 1rem;
right: 1rem;
line-height: 1.2rem;

}

/* button that makes the list visible */
nav.menu button{
font-size: 1rem;
padding: 1rem 0.5rem;
border: 1px solid;
cursor: pointer;
}

/* container for elements that form menu list; off-screen by default,
therefore invisible (but links within it are still focusable) */
nav.menu div{
display: block;
position: absolute;
right: 1000rem;
width: 12rem;
max-height: 80vh;
overflow: auto;
z-index: 1;
}

/* bring menu list on-screen when hovering over menu area */
nav.menu:hover div{
right: 0rem;
overflow: auto;
}

/* bring menu list on-screen when focus is within its area (not supported by
all browsers) */
nav.menu:focus-within div{
right: 0rem;
overflow: auto;
}

/* display menu list elements on a new line and fill the container width */
nav.menu a, nav.menu span{
display: block;
padding: 0.3rem 0.3rem;
border: 1px solid;
}