/* VARIABLES & GLOBAL */
:root {
  /* variables */
  --color-bg: #001a00; /*dark green*/
  --color-navbg: #012400; /*slightly less dark green*/
  --color-navtab: #024800; /*dark mid green*/
  --color-border: #004F00; /*mid green*/
  --color-date: #e6f7ff; /*pale blue*/
  --color-actor: #ffffcc; /*light gold*/
  --color-place: darkkhaki;
  --color-link: #ffffcc; /*light gold*/
  --style-buttonbg: linear-gradient(to bottom, silver, dimgrey);
  --style-shadow: -4px 4px rgba(0,0,0,0.4);
  --corner-radius: 0.5rem;
  --height-topbar: 3rem;
  --width-navbar: 9rem;
  --height-footer: 2rem;
}

* {
  /* layout, size, and position */
  box-sizing: border-box;
}

body {
  /* layout, size, and position */
  min-width: 320px;
  margin: 0;

  /* fonts */
  font-family: serif;
  font-size: 100%;

  /* colors */
  background-color: var(--color-bg);
  color: white;
}



/* PAGE STRUCTURE */
/* default layout is for small screens & mobile,
 * with @media handling at the end of the file
 * for larger screens */

/* -- main & nav */
#wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#topbar {
  /* layout, size, and position */
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  height: var(--height-topbar);
  padding: 0.4rem 1rem 0.2rem 1rem;

  /* colors */
  background-color: var(--color-navbg);

  /* font and text */
  font-size: x-large;
  font-family: sans-serif;
  font-weight: bold;
  /* sensible choice with subtle drop-shadow:
  */
  color: white;
  text-shadow: var(--style-shadow);
  /* 3D glasses:
  color: rgba(0,255,190,1);
  text-shadow: -4px 4px rgba(255,0,0,0.4);
   */
}

#navbar {
  /* layout, size, and position */
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  background-color: var(--color-navbg);

  /* font and text */
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  font-size: small;
}

#navbar div {
  /* layout, size, and position */
  display: flex;
  justify-content: center;
  align-items: center;
  /*height: 1.5rem;*/
  width: 100%;
  padding: 0.125rem;

  /* color and style */
  background-color: var(--color-navtab);
  border: 1px solid var(--color-navbg);
  border-radius: 8px 8px 0 0;
  /*box-shadow: var(--style-shadow);*/
}

#navbar div.currentpage {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-bg);
}

#navbar a {
  text-decoration: none;
}

#main {
  /* layout, size, and position */
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  padding-bottom: 1rem;
  /*padding: 1rem 0.125rem;*/
  /*margin: 0 auto;*/
}

#footer {
  /* layout, size, and position */
  display: flex;
  justify-content: space-around;
  height: var(--height-footer);
  padding: 0.25rem;

  /* colors and styles */
  background-color: var(--color-navbg);
  /*border-top: 1px solid var(--color-border);*/

  /* font and text */
  text-align: center;
}

#footer div {
  display: flex;
  justify-content: center;
  align-items: center;
}

#footer .langchoice {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25em;
}


/* CONTENT */

/* -- for controlling line breaks */
span[class~="break"]{
  display: inline-block;
}

/* -- headers */
h1,
h2 {
  font-family: sans-serif;
  font-weight: bold;
}

h1 {
  font-size: x-large;
}

h2 {
  font-size: large;
}

/* -- text & text-like elements */
.emojiline,
.toptitle {
  font-size: x-large;
  text-align: center;
  /*margin: 32px auto;*/
}

.toptitle {
  padding-top: 0;
}

.notice {
  font-size: large;
  text-align: center;
  /*margin: 2rem auto;*/
}

.center {
  text-align: center;
}

article {
  text-align: left;
  /*width: 90%;*/
  /*max-width: 80rem;*/
  max-width: 50rem;
  min-width: 20rem;
  /*margin: 0 auto;*/
  padding: 1rem;
}

blockquote {
  font-style: italic;
  text-align: center;
}

legend {
  font-size: large;
  font-weight: bold;
  font-family: sans-serif;
  margin-left: -0.5rem;
}

label {
  display: block;
  margin: 0 auto 1rem auto;
}

a:link {
  color: var(--color-link);
}
a:visited {
  color: darkgray;
}
a:hover {
  color: white;
}
a:active {
  color: white;
}

/* -- lists */
.listing {
  width: min(100%, 100rem);
  margin: 0 auto;
  padding: 0 0.5rem;
}

.listing ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0.25rem 1rem -2rem;
  list-style-type: none;
}

.listing li {
  padding: 0.5rem ;
  background: var(--color-navbg);
  border-left: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: 8px;
}

/* -- form elements */
select,
textarea,
input,
button,
form {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

form {
  margin: 0 2%;
}

fieldset {
  max-width: 22rem;
  margin: 4rem auto 2rem auto;;
  border: 1px dashed var(--color-border);
  padding: 1rem 1rem;
}

input {
  display: block;
  width: 95%;
}

input[type="text"],input[type="email"] {
  /*background-color: #a0a0a0;*/
  border: none;
  margin: 0.25rem auto 0.5rem auto;
}

button.big {
  display: block;
  width: auto;
  padding: 0 1em;
  min-width: 100px;
  height: 1.5rem;
  border: none;
  border-radius: 1000px;
  margin: 1.5rem auto 0.5rem auto;
  font-weight: bold;
  background: var(--style-buttonbg);;
}

button.small {
}

/* --dividers */
.divider {
  height: 1px;
  background-color: white;
  width: 10rem;
  margin: 2rem auto;
}


/* OBJECT MARKERS */
/* -- persons & orgs */
.person, 
.org,
.date,
.place {
  font-weight: bold;
  font-size: normal;
  color: black;
  white-space: nowrap;
  padding: 0 0.4em 0 0.2em;
  border-radius: 5px;
}

.person, 
.org {
  background-color: var(--color-actor);
}

.person::before {
  font-weight: bold;
  /*content: "[JAN]";*/
  content: "👤 ";
  font-size: x-small;
  vertical-align: middle;
  /*
  content: url(../images/jan-24px.png);
  height: 0.7rem;
  width: 0.7rem;
  position: relative;
  bottom: -0.4rem;
  */
}

.org::before {
  font-weight: bold;
  /*content: "[KLP]";*/
  content: "👥 ";
  font-size: x-small;
  vertical-align: middle;
  /*
  content: url(../images/kulupu-32px.png);
  height: 1rem;
  width: 1rem;
  position: relative;
  bottom: -0.6rem;
  */
}

/* -- dates */
.date {
  background-color: var(--color-date);
}

.date::before {
  font-weight: bold;
  /*content: "[JAN]";*/
  content: "🕒 ";
  font-size: x-small;
  vertical-align: middle;
}

/* -- locations */
.place {
  background-color: var(--color-place);
}

.place::before {
  font-weight: bold;
  /*content: "[JAN]";*/
  content: "🌍 ";
  font-size: x-small;
  vertical-align: middle;
}



/* MEDIA QUERIES */

/*  /* for tablets or landscape phones */
/*  @media (min-width: 640px) {
/*    #wrapper {
/*      display: grid;
/*      grid-template-columns: var(--width-navbar) 1fr;
/*      grid-template-rows: min-content
/*                          auto
/*                          min-content;
/*      grid-template-areas:
/*        "topbar   topbar"
/*        "navbar   main"
/*        "footer   footer";
/*    }
/*    
/*    #topbar {
/*      grid-area: topbar;
/*    }
/*  
/*    #navbar {
/*      grid-area: navbar;
/*      display: flex;
/*      flex-direction: column;
/*      justify-content: flex-start;
/*      align-items: flex-end;
/*    }
/*  
/*    #navbar div {
/*      justify-content: right;
/*      /*to make the tabs all the same width:*/
/*      /* width: 75%; */
/*      /*to make the tabs fit the text width:*/
/*      width: unset;
/*      padding: 0.25rem 0.25rem 0.25rem 1rem;
/*      border-radius: 8px 0 0 8px;
/*      font-size: large;
/*    }
/*  
/*    #navbar div.currentpage {
/*      border-bottom: 1px solid var(--color-border);
/*      border-right: 1px solid var(--color-bg);
/*    }
/*  
/*    article {
/*      padding: 1rem;
/*    }
/*  
/*    #main {
/*      grid-area: main;
/*    }
/*  
/*    #footer {
/*      grid-area: footer;
/*      justify-content: flex-start;
/*      gap: 1rem;
/*      padding-left: 1rem;
/*    }
/*  }



/* for laptop screens or anything wider than a tablet */
/*@media (min-width: 900px) {
/*}


/* for very large screens */
/* (desktop resolutions > 1920px wide) */
/*@media (min-width: 2000px) { */
/*@media (min-width: 125rem) */

/*  @media (min-width: 125rem) {
/*    #main {
/*      display: block;
/*      columns: 2;
/*    }
/*  
/*    article {
/*      max-width: 80rem;
/*      margin-left: 4rem;
/*      margin-right: 4rem;
/*    }
/*  
/*    .listing ul {
/*      padding-left: 6rem;
/*      padding-right: 4rem;
/*    }
/*  }


/* for print */
@media print {
  body {
    font-size: 11pt;
  }
}

/* DEBUG: Find horizontal scrollbars!
* {
  outline: 1px solid red;
}
*/