@import url('https://fonts.googleapis.com/css?family=Bree+Serif&display=swap');

/*
Fjalla One url('https://fonts.googleapis.com/css?family=Fjalla+One&display=swap');
Bree Serif url('https://fonts.googleapis.com/css?family=Bree+Serif&display=swap')
Poppins @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
Passion One @import url('https://fonts.googleapis.com/css?family=Passion+One&display=swap');
Playball url('https://fonts.googleapis.com/css?family=Passion+One|Playball&display=swap');
Baloo url('https://fonts.googleapis.com/css?family=Baloo&display=swap');

Libre Baskerville url('https://fonts.googleapis.com/css?family=Libre+Baskerville|Stoke&display=swap');
Rasa url('https://fonts.googleapis.com/css?family=Rasa&display=swap');
Merriweather url('https://fonts.googleapis.com/css?family=Merriweather&display=swap')
PT Serif url('https://fonts.googleapis.com/css?family=PT+Serif&display=swap')
Domine url('https://fonts.googleapis.com/css?family=Domine|PT+Serif&display=swap');
Kaushan Script url('https://fonts.googleapis.com/css?family=Domine|Kaushan+Script|PT+Serif&display=swap')
Tangerine url('https://fonts.googleapis.com/css?family=Kaushan+Script|Tangerine&display=swap');
Vidaloka url('https://fonts.googleapis.com/css?family=Kaushan+Script|Tangerine&display=swap');
Berkshire Swash url('https://fonts.googleapis.com/css?family=Berkshire+Swash|Vidaloka&display=swap');
Trocchi url('https://fonts.googleapis.com/css?family=Berkshire+Swash|Trocchi|Vidaloka&display=swap');
Stoke url('https://fonts.googleapis.com/css?family=Stoke&display=swap');
*/

/*
Fjalla One -- bit tall?
Baloo -- bit comical, bold
Poppins - clean, clinical
Rosa - ok
*/

body {
  margin:      0px;
  padding:     0px;
  font-family: 'Bree Serif', georgia, verdana, helvetica, sans-serif, arial;
  font-size:   100%;
  color:       #000;/*#003366;*/
  background-color: #333;
  background: url('bg1d.jpg') 0% 0% fixed no-repeat;
  background-size: cover;
}
body.no-scroll {  /* enable this class when a lightbox modal is active */
  overflow: hidden;  /* stops body from scrolling */
}

header {
  margin:     40px auto;
  text-align: center;
  color:      #FFF;
  font-size:  200%;
}
header > h4 {
  margin-top: 10px;
}
header > h4.blur-in > * {    /* blur-in effect */
  opacity: 0;
  animation: animateBlurIn 4s forwards;
}
@keyframes animateBlurIn {
  from {
    opacity: 1;
    text-shadow: 0 0 1em rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0);
  }
  to {
    opacity: 1;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    color: rgba(255, 255, 255, 1);
  }
}
h2.blur-in {
  opacity: 0;
  animation: animateBlurIn 1s forwards;
}
h2.hide-me {
  visibility: hidden;
}

header:nth-child(2) {
  width: 50%;
  min-width: 400px;
  font-size: 150%;
}

header:nth-of-type(3) {     /* temporary: for "coming soon" message only */
  width: 50%;
  font-size: 200%;
  color: #FFFFE0;
  text-shadow: 0 0 5px #FFF;
  letter-spacing: 2rem;
}

div {
  box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.33),
              inset 3px 3px 6px rgba(0, 0, 0, 0.33);
  border-bottom-right-radius: 40px;
}

div.imagePanel {
  width: 800px;
  margin: 40px auto;
  border: 8px solid black;
  padding: 0px;
}

div.contentPanel {
  background-color: rgba(190, 190, 190, 0.25);
  background-image: url('green_tiles_bg_1.png');
  background-repeat: no-repeat;
  background-position: right top;
  /*background-attachment: fixed;*/
  padding:    2px 16px;
  margin:     40px auto;
  color: #FFFFFF;
  font-size: 110%;
  text-shadow: 0 0 4px #333;
  border: 8px solid black;
  width: 50%; /*768px;*/
  min-width: 400px;
  counter-reset: ending-counter;
  /*border: 4px solid #CC9933;*/
  /*border-radius: 8px;*/
  /*box-shadow: 0 0 4px 2px #FFFFCC;*/
}

div.contentPanel > section {
  display: inline-block;
  overflow: hidden;
}
div.contentPanel > section > h2 {
  margin-left: -100%;
  opacity: 0;
  transition-property: margin-left, opacity;
  transition-duration: 250ms;
  transition-timing-function: ease-in;
}
div.contentPanel > section > h2.slide-in {
  margin-left: 0%;
  opacity: 1;
}
div.contentPanel > section + p, div.contentPanel > p:nth-of-type(1) {
  margin-top: 0;
}

/*
div#aboutMe {
  position: relative;
}
div#aboutMe::before {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('me-bg-1.jpg');
  background-repeat: no-repeat;
  background-position: right top;
  content: "";
  z-index: -1;

}
*/
#why {
  margin: 0;
  padding-left: inherit;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed li::before {
  content: '- ';
  position: absolute;
  margin-left: -1em;
}
ul.dashed li {
  margin-top: 0.5em;
}

nav h1 {
  text-transform: uppercase;
  text-align:     center;
  letter-spacing: 0.5em;
  text-shadow:    0px 0px 10px #333333;
}

div.contentPanel:nth-of-type(1) h4 {
  text-align: center;
  /*text-shadow: 0px 0px 2px #FFF;*/
  letter-spacing: 0.2em;
}

.ending-trigger {
    cursor: pointer;
    color: #bed555;
    padding-left: 3em;
    position: relative;
}
.ending-trigger::before {
  counter-increment: ending-counter;
  content: counter(ending-counter);
  position: absolute;
  left: 0.5em;
  top: -0.2em;
  background: rgba(102, 102, 102, 0);
  color: #bed555;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #bed555;
}
.ending {
    display: none;
    /*height:  0;*/
    /*overflow: hidden;*/
    /*transition: height 350ms ease-in-out;*/
    padding: 0 3em;
}
.ending.is-visible {
    display: block;
    /*height: auto;*/
}

/* see https://snook.ca/archives/html_and_css/simplest-css-slideshow */
div.slideshow {
    position: relative;
    height: 576px;
}
div.slideshow img {
    position: absolute;
    opacity: 0;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 20s;
}
div.slideshow img:nth-child(1) { animation-delay: 10s; }
div.slideshow img:nth-child(2) { animation-delay: 0s; }
@keyframes fade {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    50%  { opacity: 1; }
    60%  { opacity: 0; }
    100% { opacity: 0; }
}

aside {
  float: right;
  margin: 0 0 8px 12px;
}
aside > img {
  border: 2px solid #fff;
  cursor: pointer;
}
aside > img:hover {
  box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.5);
}
aside > img:nth-of-type(1n+2) {
  margin-top: 10px;
}

.modal {
  position: absolute;
  width: 800px;
  height: 576px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.8);
  opacity: 0;
  z-index: -1;
}
.modal.text {
  /*background-image: url(my-story-slideshow/3.jpg);*/
  background-repeat: no-repeat;
  /*background-position: center;*/
  background-size: cover;
  width: 75%;
  height: 75%;
  overflow-y: hidden;
}
.modal.text > section {
  background-color: rgba(51, 51, 51, 1);
  color: #fff;
  padding: 1em;
  padding-bottom: 2em;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  transition: background-color 18s linear;
}
.modal.text > section.fade-bg {
  background-color: rgba(51, 51, 51, 0.8);
}
.is-open {
  position: fixed;
  opacity: 1;
  z-index: 10;
  border: 4px solid white;
}

/* Customize contentPanel widths per viewport width. Don't bother supporting
 * widths below 400px. Even the original Samsung Galaxy S from 2010 had a
 * horizontal resolution of 480px.
 * See https://deviceatlas.com/blog/most-used-smartphone-screen-resolutions
 * TODO: perhaps these units should be in em?
 */
 
/* all viewports less than 800px need half size image modals */
@media screen and (max-width: 799px) {
  .modal, .modal > img {
    width: 400px;
    height: 288px;
  }
}

/* viewports below 600px need a smaller title graphic and narrow content
 * panels too
 */
@media screen and (max-width: 599px) {
  header > img {
    transform: scale(0.75);
  }
  div.contentPanel {
    /*background-color: red;*/
    box-sizing: border-box;
    width: 400px;
  }
  .modal.text {
    width: 400px;
  }
}
@media screen and (min-width: 600px) and (max-width: 799px) {
  div.contentPanel {
    /*background-color: orange;*/
    width: 75%;
  }
}
@media screen and (min-width: 800px) and (max-width: 1023px) {
  div.contentPanel {
    /*background-color: yellow;*/
    width: 75%;
  }
}
@media screen and (min-width: 1024px) {
  div.contentPanel {
    /*background-color: pink;*/
    width: 60%;
    max-width: 1024px;
  }
  .modal.text {
    width: 60%;
    max-width: 1024px;
  }
}
    
a         { color: #bed555; /*#336699;*/ }
a:visited { color: #bed555; }
a:hover   { color: #bed555; }