/* from https://opensource.com/article/19/3/webfonts */

@font-face {
  font-family: "bodyfont";
  src: url("/fonts/ofl-sorts-mill-goudy.tt.ttf");
}

@font-face {
  font-family: "menufont";
  src: url("/fonts/ofl-sorts-mill-goudy.italic-tt.ttf");
}

@font-face {
  font-family: "initfont";
   /* src: url("/fonts/TypographerWoodcut01.ttf"); */
  /*src: url("/fonts/Uncialgotisch.ttf");*/
  src: url("/fonts/Uncialgotisch.ttf");
}

/* CSS variables */
/* based on https://thibaultmarin.github.io/blog/posts/2016-11-13-Personal_website_in_org.html */

:root {
    /* Body */
    /* ---- */
    --content-padding: 10px;
    --content-bg: #F1F1F1; /* Currently not used */
    --content-box-shadow: 0;
    --body-margin: 20px; /* not used for small screens */

    /* TOC Basic style */
    /* --toc-bg: #f1f1f1; */
    --toc-box-shadow: 3px 5px 0.5em #777777;
    --toc-border-radius: 0px;
    --toc-li-color: #408;
    --toc-hover-bg-color: #cbe;
    --toc-hover-color: #408;

    /* TOC Layout */
    --toc-nav-vspacing: 0px;
    --toc-base-padding: 5px;
    --toc-ul-padding-left: 0px;
    --toc-extra-padding-x: 4px;

    /* Font stuff */
    --font-body-family: bodyfont;
    --font-body-size: 14pt;
    --font-menu-family: menufont;
}

/** Responsive variables */

/* Control very wide columns */
@media {
    :root {
	--body-width: min(100%, 40em);
        --nav-height: 0px;
        --toc-base-font-size: 120%;
        --toc-ul-font-size: 90%;
        --toc-ul-2-font-size: 60%;
        --toc-ul-3-font-size: 40%;
    }
}

/* @media (min-width: 60em) {
    :root {
	--body-width: 100%;
        --nav-height: 0px;
        --toc-base-font-size: 120%;
        --toc-ul-font-size: 90%;
        --toc-ul-2-font-size: 60%;
        --toc-ul-3-font-size: 40%;
    }
} */

/* Small screens */
/*@media (max-width: 60em) {
    :root {
        --body-width: 100%;
        --nav-height: 0px;
        --toc-base-font-size: 120%;
        --toc-ul-font-size: 90%;
        --toc-ul-2-font-size: 60%;
	--toc-ul-3-font-size: 40%;
    }
} */

/* Body */
body {
    overflow-x: hidden;
    color: #000000;
    background-image: url(../pix/dog_background_wash.jpg);
    background-size: 100% auto;
    background-position: center top;
    background-repeat: repeat-y;
    background-attachment: fixed;
    font-family: var(--font-body-family);
    font-size: var(--font-body-size);
    line-height: 1.4;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 40em) {
    body {
	width: 48em;
	/* width: calc(48em - var(--body-margin)*2);*/
        /* margin-left:  var(--body-margin); */
        /* margin-right: var(--body-margin); */
    }
}

@media (max-width: 40em) {
    body {
	width: 96%;
        /* margin-left:  calc(var(--body-margin)/2); */
        /* margin-right: calc(var(--body-margin)/2); */
    }
}

/* Main content */
#content {
    /* background-color: var(--content-bg); */
    box-shadow: var(--content-box-shadow);
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}


/** Table of contents */

/* Basic styling (color, font, shadow) common to global and local TOC */
#table-of-contents {
    background-color: var(--toc-bg);
    box-shadow: var(--toc-box-shadow);
    border-bottom-right-radius: var(--toc-border-radius);
    border-top-right-radius: var(--toc-border-radius);
    font-family: var(--font-menu-family);
    font-size: var(--toc-base-font-size);
    font-weight: bold;
    /* width: calc(min((48em - var(--body-margin)*2),(var(--body-width)-var(--body-margin)))); */
    background-color: rgba(255,255,255,0.4);
    line-height: 1.0;
}

#table-of-contents ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* background-color: #333;*/
}

#table-of-contents li {
  float: left;
}

#table-of-contents li a {
  display: block;
  color: black;
  text-align: left;
  padding: 6px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
#table-of-contents li a:hover {
    background-color: #408;
    color: white ;
}

.boxright {
    float: right;
    clear: right;
    vertical-align: text-top;
    width: 40%;
    padding: 50px;
}

.floater_right {
    float: right;
    clear: right;
    vertical-align: text-top;
    margin: 0px 0px 0px 5px;
}

.floater_left {
    float: left;
    clear: left;
    vertical-align: text-top;
    margin: 0px 5px 0px 0px;
}

.dropcap {
    color      : #408;
    float      : left;
    font-family: initfont;
    font-size  : 5.42em;
    line-height: 0.5;
    margin     : 0.122em 0.094em 0 0;
}

.smalldropcap {
    color      : #408;
    float      : left;
    font-family: initfont;
    font-size  : 3.25em;
    line-height: 0.5;
    margin     : 0.175em 0.12em 0 0;
}

.tinydropcap {
    color      : #408;
    float      : left;
    font-family: initfont;
    font-size  : 1.5em;
    line-height: 0.5;
    margin     : 0.095em 0.1em 0 0;
}

img.full {
  width: 100%;
}

a:link{
    color: #008;
}
a:visited{
    color: #034;
}