/* Build with love and Notepad++ for Otto Dempwolff */

/* BACKGROUND IMAGE */

html {
 background-image: url(Documents/Otto_Dempwolff_canoe_1920x1080_v2.jpg);
 background-attachment: fixed;
 background-size: cover;
}

/*
background-size =
(screen.height/screen.width)*imageWidth/imageHeight =
2.0*1920/1080 =
355%
*/
@media screen and (orientation: portrait) {
 html {
  background-position: 38% 0%;
  background-size: 355%;
 }
}

/*
background-size =
(screen.height/screen.width)*imageHeight/imageWidth =
2.0*1080/1920 =
113%
*/
@media screen and (orientation: landscape) {
 html {
  background-position: 38% 0%;
  background-size: 113%;
 }
}

/* BODY */

body {
 background-color: rgba(255, 242, 228, 0.75);
 box-shadow: 0px 0px 2px 1px Gray;
 margin: auto;
 max-width: 50rem;
 padding: 3rem;
 word-wrap: break-word;
}

/* body max-width=50rem=800px */
@media screen and (max-width: 800px) {
 body {
  padding: 1rem;
 }
}

/* STRUCTURE */

header, nav, article, figure, footer {
 display: block; /* To secure correct behavior in older browsers */
}

header {
 height: 4rem;
 background-image: url(Documents/Otto_Dempwolff_canoe_1920x1080_v2.jpg);
 background-size: cover;
 background-position: center top;
 border-radius: 4px 4px 0 0;
 box-shadow: 0px 0px 1px 1px Gray inset;
 font-variant: small-caps;
 padding: 0.5rem;
 text-align: center;
}

nav {
 background-color: rgba(255, 242, 228, 0.95);
 font-variant: small-caps;
 letter-spacing: 3px;
 margin-bottom: 2rem;
 padding: 0.5rem;
 position: -webkit-sticky; /* Safari */
 position: sticky;
 text-align: center;
 top: 0;
 word-spacing: 1rem;
}

article {
 height: auto;
}

footer {
 border-top: Solid 1px SandyBrown;
 height: 6rem;
 margin: 2rem 0 3rem 0;
 padding-top: 2rem;
 text-align: Center;
 z-index: 100;
}

/* FONTS */

body {
 font-family: Verdana, Arial, Sans-Serif;
 font-size: 1rem;
}

h1 {
 font-size: 1.6rem;
 font-weight: normal;
 margin: 2rem 0 2rem 0;
 text-align: center;
}

h2 {
 font-size: 1.2rem;
 font-weight: normal;
 margin: 0 0 1rem 0;
 padding: 0 0 0 2rem;
 text-indent: -2rem;
}

h3 {
 font-size: 1.0rem;
 font-weight: normal;
 margin: 0 0 1rem 0;
 padding: 0 0 0 2rem;
 text-indent: -2rem;
}

p {
 margin: 0 0 1rem 0;
}

pre {
white-space: pre-wrap;
}

.pml1 {
 margin-left: 1rem; /* p m l 1 = <p> margin left 1rem */
}

.pml2 {
 margin-left: 2rem;
}

.ulml1 {
 list-style-image: url(Documents/bullet.gif);
 margin-left: 1rem;  /* <ul> margin left 1rem */
}

.ulml2 {
 list-style-image: url(Documents/bullet.gif);
 margin-left: 1.3rem; 
}

hr {
 border: none;
 border-top: solid 1px SandyBrown;
 margin: 2rem;
}

/* LINKS */

header a {
 font-size: 3rem;
 letter-spacing: 0.5rem;
}

@media screen and (max-width: 50rem){
 header a {
  font-size: 6vw;
  letter-spacing: 1vw;
 }
}

a:link, a:visited {
 color: Maroon;
 text-decoration: none;
 transition: text-shadow 0.5s;
}

a:hover {
 color: FireBrick;
 text-shadow: 0px 0px 10px OrangeRed;
}

/* DETAILS, SUMMARY */

.details1 {
 font-size: 1rem;  /* font size for all childs */
 margin: 0 0 1rem 0;
 }

.details2 {
 margin: 0.5rem 0 0 1rem;
}

.diaryDescription {
 margin: 0.5rem 0 2rem 1rem;
}

.summary1 {
}

/* IMAGES "BOOKS" */

.OttoCV {
 width: 130px;
 height: auto;
 float: left;
 margin-right: 1rem;
 margin-bottom: 0rem;
 border-style: solid;
 border-width: 0px;
 border-right-width: 2px;
 border-bottom-width: 2px;
 border-color: #C0C0C0;
 border-radius: 0px;
 box-shadow: 3px 3px 9px #888888
 }

.books {
 width: 100px;
 height: auto;
 float: left;
 margin-right: 1rem;
 margin-bottom: 2rem;
 border-style: solid;
 border-width: 0px;
 border-right-width: 2px;
 border-bottom-width: 2px;
 border-color: #C0C0C0;
 border-radius: 0px;
 box-shadow: 3px 3px 9px #888888
 }

/* THUMBNAILS VIEWER */

figure {
 width: auto;
 height: 800px;
 margin: auto;
 text-align: center;
}

.thumb {
 width: auto;
 height: 65px;
 box-shadow: 0px 0px 10px 1px DimGray;
 border-radius: 3px;
 }

.normal {
 border: 1px solid Black;
 }

.selected {
 border: 1px solid SandyBrown;
 }
 
.preview {
 max-width: 100%;
 height: auto;
 box-shadow: 0px 0px 10px 1px DimGray;
 border: 1px solid SandyBrown;
 border-radius: 5px; 
 margin: 1rem 0 1rem 0;
 }