/***********************************************************
* General items
***********************************************************/
:root
{
   --link-color: #1E5AB4;
   --project-background-color: #FBE29D;
   --project-page-color: white;
   
   --project-accent-color: #568F56; /*#4D804D;*/
   --project-font-color: #FAEBAA;
   --project-hover-color: #FAD264;
   
   --project-header-bg-image: linear-gradient(to bottom, #FAD777, #FDF1CE);
   
   --large-screen-size: 100rem;
}

html
{
   font-size: 10px; /* Root em */
}

body
{
   font-family: "Work Sans", sans-serif;
   font-size: 1.6rem;
   line-height: 1.5;
   background-color: var(--project-background-color);
   margin: 0;
}

h1, h2, h3, h4
{
   font-weight: bold;
   margin-top: 2rem;
   margin-bottom: 1rem;
}

h1
{
   font-size: 2.2rem;
}

h2
{
   font-size: 2.0rem;
}

h3
{
   font-size: 1.8rem;
}

h4, p
{
   font-size: 1.6rem;
}

li, input, textarea
{
   background: inherit;
}
   
h3::before
{ 
   display: block; 
   content: " "; 
   visibility: hidden; 
   pointer-events: none;

   height: 5rem; 
   margin-top: -5rem; 
}

/***********************************************************
* Link
***********************************************************/
a:link,
a:visited
{
   color: var(--link-color);
   outline: none;
   text-decoration: none;
}

a:active,
a:hover
{
   outline: none;
   text-decoration: underline;
}

.plain-link
{
   text-decoration: none;
}

/***********************************************************
* Navigation for large screen
***********************************************************/
nav.horizontal
{
   color: var(--project-font-color);
   background: var(--project-accent-color);
   display: flex;
   position: fixed;
   top: 0;
   width: inherit;
   padding: 0 1rem;
   z-index: 1100; /* Always on top */
}

nav.horizontal ul
{
   color: inherit;
   background-image: inherit;
	list-style-type: none;
	display: flex;
	position: relative;
   padding: 0;
   margin: 0;
}

nav.horizontal li
{
   white-space: nowrap;
   text-align: left;
	float: left;
   padding: 1rem 2rem;
}

nav.horizontal a:link,
nav.horizontal a:visited
{
   color: var(--project-font-color);
}

nav.horizontal li.active,
nav.horizontal a:active,
nav.horizontal a:hover
{
   color: var(--project-hover-color);
	text-decoration: none;
}

nav.horizontal ul ul
{
	display: none; /* Hide when not needed */
	position: absolute;
   top: 100%;
   padding: 0;
}

nav.horizontal ul li:hover > ul
{
   display: block; /* Display on hover */
}

nav.horizontal ul ul li
{
   float: none;
   position: relative;
}

/***********************************************************
* Navigation for small screen
***********************************************************/
nav.limited
{
   color: var(--project-font-color);
   background: var(--project-accent-color);
   font-size: 1.84rem;
   display: flex;
   position: fixed;
   top: 0;
   width: 100%;
   padding: 0;
   z-index: 1100; /* Always on top */
}

nav.limited ul
{
   color: inherit;
   background-color: inherit;
	list-style-type: none;
	display: flex;
	position: relative;
   padding: 0;
   margin: 0;
}

nav.limited li
{
   white-space: nowrap;
   text-align: left;
   padding: 0.4rem 1.4rem 0rem 1.4rem;
}

nav.limited a
{
   color: inherit;
   display: block;
}

nav.limited li.active,
nav.limited a:active,
nav.limited a:hover
{
   color: var(--project-hover-color);
	text-decoration: none;
}

nav.limited ul ul
{
	display: none; /* Hide when not needed */
	position: absolute;
   top: 100%;
   left: 0;
   padding: 0 0 1rem 0;
}

nav.limited ul li:hover > ul
{
   display: block; /* Display on hover */
   border: 2px solid var(--project-font-color);
}

nav.limited ul ul li
{
   float: none;
   position: relative;
}

.hamburger
{
  width: 2.4rem;
  height: 0.3rem;
  background-color: var(--project-font-color);
  margin: 0.5rem 0;
}

/***********************************************************
* Blocks within navigation bar
***********************************************************/
.menu-items-block
{
   margin-right: auto; /* Within [display: flex] this behaves in a specific way */
}

.button-block
{
   margin-left: auto; /* Within [display: flex] this behaves in a specific way */
   margin-top: auto;
   margin-bottom: auto;
}

.button-block button
{
   background-color: inherit;
   border: none;
   padding: .4rem 0;
   margin-right: 1rem;
}

/***********************************************************
* Bootstrap adjustments
***********************************************************/
.container
{
   background-color: var(--project-page-color);
   width: 100%;
   max-width: var(--large-screen-size);
   padding: 0;
}

/****************************************************************************************
* Header
****************************************************************************************/
.large-screen
{
   width: var(--large-screen-size);
}

.large-screen,
.small-screen
{
   background-image: var(--project-header-bg-image);
}

.large-screen-header h1,
.small-screen-header h1
{
   color: var(--project-accent-color);
   font-family: "Architects Daughter";
   text-align: center;
}

.large-screen-header h1
{
   font-size: 3.0rem;
   line-height: 1.5;
   padding: 4rem 0rem 2rem 0rem;
}

.small-screen-header h1
{
   font-size: 2.4rem;
   line-height: 1.3;
}

/***********************************************************
* Images
***********************************************************/
img
{
   max-width: 100%;
}

img.header
{
   margin: 0 10rem 0 10rem;
}

img.thumb
{
   height: 20rem;
   margin: 1rem;
}

img.simple
{
   margin-bottom: 3rem;
}

/***********************************************************
* Table
***********************************************************/
table
{
   empty-cells: show;
   margin-top: 1rem;
   margin-bottom: 1rem;
}

td
{
   vertical-align: top;
   padding-right: 2rem;
}

/***********************************************************
* Selector
***********************************************************/
.selector
{
   margin: 2rem 0;
}

.selector td
{
   font-weight: bold;
   font-family: "DejaVu Sans Mono";
   font-size: 1.6rem;
   color: var(--project-hover-color);
   background: var(--project-accent-color);

   border: 4px solid var(--project-page-color);
   padding: 0.1rem 0.8rem;
}

.selector td:hover
{
   color: var(--project-accent-color);
   background: var(--project-hover-color);
   
}

.selector a
{
   color: inherit;
   background-color: inherit;
}

.selector a:link,
.selector a:visited
{
   text-decoration: none;
}

/***********************************************************
* Slide show
***********************************************************/
img.slideshow
{
   width: 60rem;
   margin-top: 2rem;
   margin-bottom: 2rem;
}

.slideshow-header
{
   font-weight: bold;
   font-size: 2.0rem;
   margin-top: 1.6rem;
   margin-bottom: 0.8rem;
}

.slideshow-buttons ul
{
   list-style-type: none;
   padding: 0;
}

.slideshow-buttons li
{
   font-weight: bold;
   text-align: center;
   display: inline;
   margin-right: 0.1rem;
}

.slideshow-buttons a
{
   outline: none;
   padding: 0.4rem 0.6rem;
   border-radius: 0.4rem;
   border: 1px solid orange;
}

.slideshow-buttons a:link,
.slideshow-buttons a:visited
{
   color: var(--project-accent-color);
   background: var(--project-background-color);
   text-decoration: none;
}

.slideshow-buttons a:hover,
.slideshow-buttons a:active
{
   color: var(--project-hover-color);
   background: var(--project-accent-color);
}

/***********************************************************
* Detail page
***********************************************************/
.extra-space
{
   margin-top: 2rem;
}

img.thumb-detail
{
   width: 40rem;
   margin-right: 5rem;
   margin-bottom: 1rem;
}

td.description
{
   font-weight: bold;
   padding-right: 2.0em;
}

.back-arrow
{
   display: block;
   outline: none;
   margin: 2rem 5rem 2rem 0;
}

/***********************************************************
* Fauna
***********************************************************/
.fauna
{
   font-style: italic;
}

.fauna img
{
  max-width: 30rem;
  max-height: 22rem;
}

.col-md-4,
.col-sm-6
{
   margin-top: 2rem;
}

/***********************************************************
* Fonts
***********************************************************/
@font-face
{
  font-family: "Work Sans";
  
  src: url("Fonts/WorkSans-VariableFont_wght.ttf") format("truetype"),
       url("Fonts/WorkSans-Italic-VariableFont_wght.ttf") format("truetype");

  font-family: "DejaVu Sans Mono";
  
  src: url("Fonts/DejaVuSansMono.ttf") format("truetype");
  
  font-family: "Architects Daughter";
  
  src: url("Fonts/ArchitectsDaughter-Regular.ttf") format("truetype");
}

/***********************************************************
* Media
***********************************************************/
@media screen and (max-width: 499.99px)
{
   .small-screen-header h1
   {
      padding: 3rem 0rem 1rem 0rem;
   }

   td.description
   {
      white-space: auto;
   }

   .short-list
   {
      display: block;
   }

   .medium-list,
   .long-list
   {
      display: none;
   }

   .large-screen
   {
      display: none;
   }

   .small-screen
   {
      display: block;
   }

   .content-block
   {
      width: 100%;
      min-height: 70rem;
      padding: 0rem 2rem;
   }

   img.thumb-sm
   {
      max-height: 5rem;
   }

   .col-md-5
   {
      max-width: 92%;
   }
}

@media screen and (min-width: 500px) and (max-width: 999.99px)
{
   .small-screen-header h1
   {
      padding: 4rem 0rem 2rem 0rem;
   }

   .short-list,
   .long-list
   {
      display: none;
   }

   .medium-list
   {
      display: block;
   }

   .large-screen
   {
      display: none;
   }

   .small-screen
   {
      display: block;
   }
   
   .content-block
   {
      width: 100%;
      min-height: 70rem;
      padding: 0rem 2rem;
   }

   img.thumb-sm
   {
      max-height: 6rem;
   }
}

@media screen and (min-width: 1000px)
{
   td.description
   {
      white-space: nowrap;
   }

   .short-list,
   .medium-list
   {
      display: none;
   }

   .long-list
   {
      display: block;
   }
   
   .large-screen
   {
      display: block;
   }

   .small-screen
   {
      display: none;
   }
   
   .content-block
   {
      width: 100%;
      min-height: 80rem;
      padding: 0rem 2rem 2rem 2rem;
   }

   img.thumb-sm
   {
      max-height: 8rem;
   }
}