/* DarkSlateGrey
blanchedalmond seashell
Orangered snow
chocolate D2691E
matt-gren 108E1E

new scheme for logo colors
gold - ffd700, closest websafe ffcc00
strong cyan - 00d8d8
strong magenta - d800d8

*/

@font-face {
  font-family: 'GreatVibes';
  src: url('/fonts/GreatVibes-Wmr4.ttf') format('truetype'),
       url('/fonts/GreatVibes-A7yL.otf') format('truetype');
}

:root {

  --color-black: #000000;
  --color-dark: #121212;
  --color-matt: #212121;
  --color-shade: grey;
  --color-light: #f8f6f0; /* lightgrey pearl f8f6f0 */ /* d0d0d0 */
  --color-white: #ffffff;

  /* old - delete? */
  --bg-section-theme: #212121;
  --bg-section-copyright: #212121;
  --color-theme: #aaaaaa;

  --bg-body: #121212;
  /* top level */
  --bg-sign: #212121;
  --color-sign: grey;
  --bg-success: green;

  --bg-header: #121212;
  --color-header: grey;
  --bg-main-dark: #212121;
  --color-main-dark: lightgrey;
  --bg-main: #d0d0d0;
  --color-main: black;
  --bg-footer: #212121;
  --color-footer: lightgrey;

  /* panel */
  --bg-tile-dark: #212121;
  --panel-dark-border: #515151;
  --bg-panel: #dfdfdf;
  --color-panel: black;
  --panel-border: #a0a0a0;
  --panel-border-hover: #dfdfdf;
  /* action-panel-border-hover */
  /* dddddd-cccccc-cccccc-bbbbbb */
  /* d0d0d0-dbdbdb-c0c0c0-b0b0b0 */

  /* form colors */
  --form-field-sign: #cccccc;
  --form-field-sign-focus: #eeeeee;
  --form-field: #dfdfdf;
  --form-field-border: #a0a0a0; /* same as panel border */
  --form-field-focus: #eeeeee;
  --form-text: #000000;

  /* text color */
  --color-link-hover: Grey;
  --color-button: green;

  /* font */
  --font-fam: 'SF Pro', 'Roboto-light', sans-serif ;
  --font-size-primary: 18pt;
  --font-size-secondary: 16pt;
  --font-size-tertiary: 14pt;
  --font-size-mini: 12pt;
  --font-size-micro: 10pt;
}


/* ######## BODY ######### */
body {
	background-color: var(--bg-body);
  margin: 0px; padding: 0px; border: 0px;
  font-family: var(--font-fam);
}

/* top level parts of body */
header, main, footer { /* container for top nav, search, user */
  margin: 0px; padding: 0px; border: 0px;
}
/* for header, main, footer text */
.black { background-color: var(--color-black); color: var(--color-light); }
.dark { background-color: var(--color-dark); color: var(--color-light); }
.matt { background-color: var(--color-matt); color: var(--color-light); }
.shade { background-color: var(--color-shade); color: var(--color-white); }
.light { background-color: var(--color-light); color: var(--color-black); }
.white { background-color: var(--color-white); color: var(--color-dark); }

section, article {
  margin: 0px; padding: 0px; border: 0px;
  display:flex;
  justify-content: center;
  text-align:center;
}
.narrow { padding: 30px 50px; } /* article narrow */
.padxy { padding: 30px 20px; } /* square pads */
.padx { padding: 0px 30px; } /* horizontal pads */
.pady { padding: 30px 0px; } /* vertical pads */

.tile_holder { padding: 25px; } /* delete? */
.article_list, .article_scroll { /* delete? */
  margin: 10px auto;
  padding: 25px;
  border: 0px;
  display:flex;
  justify-content:flex-start; /* start for left aligned panels */
}

a:link, a:visited, a:active { text-decoration: none; }
a:hover { text-decoration: none; }
.tablet { color: var(--color-section); }
.tablet:link, .tablet:visited, .tablet:active { color: var(--color-section); text-decoration: none;}
.tablet:hover { color: var(--color-section); text-decoration: none; }
.glyphicon { padding: auto 20px; width: 30px; height: 30px; }

.img_wide { width: 100%; height: auto; } /* side to side */
.img_tile {  width: 90%; border-radius: 25px;} /* curved edge */
.img_circle { width: 75%; float:inherit; border-radius: 50%; } /* big circle */
.img_list { width: 65%; border-radius: 25px; } /* smaller tile */
.img_faded {opacity: .3;}

/* carousel formatting */
.indicator-box {
  background-color: #121212;
  border-radius: 25px;
  padding: 0px 10px;
}
.carousel-indicators button {
    height: 5px !important;
    width: 5px !important;
    margin: 0 3px !important;
    border-radius: 50%;
    background-color: #ffffff !important;
}


hr {
  padding: 2px auto;
}
/* text styles */
h1 { padding: 50px 50px 0px 50px; font-family: var(--font-fam); font-size: 40pt; font-weight:900; text-transform: uppercase;}
h2 { padding: 20px 20px 0px 20px; font-family: var(--font-fam); font-size: 30pt; font-weight: 600; }
h3 { padding: 10px 10px 0px 10px; font-family: var(--font-fam); font-size: 25pt; font-weight: 300; }
h4 { padding: 10px 10px 0px 10px; font-family: var(--font-fam); font-size: 20pt; font-weight: 200; }

.theme { /* for poem in theme section */
  margin: 10px auto;
  display:flex;
  justify-content: center;
  text-align: center;
  font-family: 'GreatVibes';
  font-size: var(--font-size-h3);
  font-weight: 100;
}
.regular {
  margin: 10px auto;
  display:flex;
  justify-content: center;
  text-align: center;
  font-family: var(--font-fam);
  font-size: var(--font-size-primary);
  font-weight: 400;
}
.secondary {
  margin: 5px auto;
  display:flex;
  justify-content: center;
  text-align: center;
  font-family: var(--font-fam);
  font-size: var(--font-size-secondary);
  font-weight: 400;
}
.prompt {
  margin: 5px auto;
  display:flex;
  justify-content: center;
  text-align: center;
  font-family: var(--font-fam);
  font-size: var(--font-size-tertiary);
  font-weight: 400;
}
.header {
  margin: 5px auto;
  display:flex;
  justify-content: center;
  text-align: center;
  font-family: var(--font-fam);
  font-size: var(--font-size-secondary);
  font-weight: 500;
}
.link {
  margin: 5px auto;
  display:flex;
  justify-content: center;
  text-align: center;
  font-family: var(--font-fam);
  font-size: var(--font-size-tertiary);
  font-weight: 300;
}
.mini {
  display:flex;
  justify-content: center;
  font-family: var(--font-fam);
  font-size: var(--font-size-mini);
  font-weight: 200;
}
.micro {
  display:flex;
  justify-content: center;
  font-family: var(--font-fam);
  font-size: var(--font-size-micro);
  font-weight: 100;
}


/* navigation styles */
nav, .navbar {
	background-color: var(--bg-header);
  text-align: left;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  align-content: center;
}
.navbar-logo {
  padding: 0px 25px 0px 5px;
}
.public-nav {
	position: relative;
  text-align: center;
}
.nav-item, .nav-link {
	padding: 5px 25px 5px 5px;
	text-decoration: none;
  font-size:var(--font-size-mini);
}
.nav-link:hover {
	color: var(--color-link-hover);
}
.nav-link:hover {
	color: var(--color-link-hover);
}
.navbar-collapse.in {
    display: block !important;
}

/* *************************** */
/* panel - edge to edge on phone (portrait), with corners
   tile - with bg and border, rounded corners - img and text inside
   thumb - no bg and border, img with rounded corners with text below
   icon - no bg, no border, img rounded corner
*/

/* with bg, icon, text */
/*
.tile {
  background-color: var(--bg-panel);
  margin: 10px;
  padding: 5px;
  display:block;
  justify-content:center;
  text-align:center;
  border: 2px solid var(--panel-border);
  border-radius: 25px;
  color: var(--color-section);
}
.tile-img {
  margin: 10px auto;
  width: 75%;
}
.tile:hover {
  color: var(--color-section);
}
*/

.thumb { /* small no background - onboarding list */
  margin: 10px;
  padding: 5px;
  display:block;
  justify-content:center;
  text-align:center;
  border: 0px;
  color: var(--color-section);
}
.thumb-img {
  margin: 10px auto;
  width: 80%;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  text-align:center;
}
.thumb:hover {
  color: var(--color-section);
}


.tile_0 { /* DARK bg top radius image tile - list of world */
  margin: 25px;
  border: 0px;
  border-radius: 25px;
  display:block;
  justify-content:center;
  text-align:center;
  padding-bottom: 10px;
  color: var(--color-section);
}
.tile_0:hover {
  color: var(--color-section);
}
.tile_0-img {
  width: 100%;
  border-radius: 25px;
}

.tile_1 { /* DARK bg, icon, text - habitat */
  margin: 20px 15px;
  background-color: var(--bg-tile-dark);
  border: 0px;
  border-radius: 25px;
  display:block;
  justify-content:center;
  text-align:center;
  padding: 10px;
  color: var(--color-section);
}
.tile_1-img {
  margin: 20px auto;
  width: 60%;
}
.tile_1:hover {
  color: var(--color-section);
}


.panel1 { /* with bg, icon, text */
  background-color: var(--bg-panel);
  margin: 20px;
  border: 0px;
  border-radius: 25px;
  display:block;
  justify-content:center;
  text-align:center;
  padding: 10px;
  border: 2px solid var(--panel-border);
  color: var(--color-section);
}
.panel1-img {
  margin: 20px auto;
  width: 60%;
}
.panel1:hover {
  color: var(--color-section);
}

.panel2-img {
  margin: 20px auto;
  width: 95%;
}


/* aside */
.panelside { /* no bg, icon, text */
  /* background-color: var(--bg-panel); */
  margin: 20px 5px;
  border: 0px;
  border-radius: 10px;
  display:block;
  justify-content:flex-start;
  text-align:left;
  padding: 10px;
  color: var(--color-section);
}
.blockline {
  padding: 5px 10px;
}
.blocklink {
  font-size: var(--font-size-mini);
  color: var(--color-main);
  text-transform: capitalize;
}
.blocklink:hover {
  color: var(--color-main);
}


/* blogs */
.panel_block { /* with bg, icon, text */
  background-color: var(--bg-panel);
  margin: 20px 5px;
  border: 0px;
  border-radius: 10px;
  display:block;
  justify-content:flex-start;
  text-align:left;
  padding: 10px;
  border: 2px solid var(--panel-border);
  color: var(--color-section);
}
.panel_block-img {
  margin: 20px auto;
  width: 60%;
}
.panel_block:hover {
  color: var(--color-section);
}


.listline {
  padding: 5px 10px;
}
.listlink {
  font-size: var(--font-size-mini);
  color: var(--color-main);
  text-transform: capitalize;
}
.listlink:hover {
  color: var(--color-main);
  font-weight: bold;
}
.actionlink {
  padding: 5px 10px;
}


.panel3 { /* small no background - onboarding list */
  margin: 10px auto;
  padding: 5px;
  display:block;
  justify-content:center;
  text-align:center;
  border: 2px solid var(--bg-panel);
  border-radius: 5px;
  color: var(--color-section);
}
.panel3:hover {
  border: var(--panel-border-hover);
  color: var(--color-section);
}
.panel3-img {
  margin: 15px auto;
  width: 75%;
  display: flex;
  justify-content: center;
  text-align:center;
}



/* footerlink styles */
.footer-sign {
    padding: 5px;
    text-decoration: none;
    color: var(--color-footer);
    font-size: var(--font-size-tertiary);
}
.footer-sign:hover {
  text-decoration: none;
  color: var(--color-link-hover);
}

/* about footer */
.footer-row {
  padding: 20px;
}

.footer-column {
  margin: 25px 5px;
  display: flex;
  justify-content:center;
}
.footer-head {
  display: block;
  justify-content:flex-start;
  text-decoration: none;
  color: var(--color-footer);
  font-size: var(--font-size-tertiary);
  font-weight: 400;
  padding: 10px 0px;
}
.footer-link {
  display: block;
  justify-content: flex-start;
  text-decoration: none;
  color: var(--color-footer);
  font-size: var(--font-size-mini);
  font-weight: 100;
}
.footer-head:hover, .footer-head:visited, .footer-link:hover, .footer-link:visited {
  color: var(--color-footer);
}

.footer-flag {
  border: 1px solid grey;
  border-radius: 5px;
  width: 40px;
  height: 25px;
  margin: 30px 5px;
}

.social-logo { /* social media icons in footer */
  width: 35px;
  height: 35px;
  margin: 5px;
}
.footer-logo { /* logo in footer */
  width: 30px;
  height: 30px;
}

.copyright {
  padding: 5px 10px 20px 10px;
  color: var(--color-footer);
}