/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

@font-face {
  font-display: swap;
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/rubik-v26-latin-regular.woff"),
      url("fonts/rubik-v26-latin-regular.woff2");
}

@font-face {
  font-display: swap;
  font-family: "Rubik";
  font-style: italic;
  font-weight: 400;
  src: url("fonts/rubik-v26-latin-italic.woff"),
      url("fonts/rubik-v26-latin-italic.woff2");
}

@font-face {
  font-display: swap;
  font-family: "Rubik";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/rubik-v26-latin-700.woff"),
      url("fonts/rubik-v26-latin-700.woff2");
}

@font-face {
  font-display: swap;
  font-family: "Rubik";
  font-style: italic;
  font-weight: 700;
  src: url("fonts/rubik-v26-latin-700italic.woff"),
      url("fonts/rubik-v26-latin-700italic.woff2");
}

@font-face {
  font-display: swap;
  font-family: "Medieval Sharp";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/medievalsharp-v24-latin-regular.woff"),
      url("fonts/medievalsharp-v24-latin-regular.woff2");
}

body, html {
  height: 100%;
  margin: 0;
  font-family: "Rubik", sans-serif;
  font-size: 20px;
  line-height: 1.5;
  color: #777;
  scroll-behavior: smooth;
}

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bgimg-1 {
  background-image: url("images/wedding2.jpg");
  min-height: 100%;
}

.bgimg-2 {
  background-image: url("images/house.jpg");
  min-height: 100%;
}

.bgimg-3 {
  background-image: url("images/pig-house.jpg");
  min-height: 100%;
}

.bgimg-4 {
  background-image: url("images/castle.jpg");
  min-height: 100%;
}

.bgimg-5 {
  background-image: url("images/frog-castle.jpg");
  min-height: 100%;

}

.bgimg-6 {
  background-image: url("images/hood-house.jpg");
  min-height: 100%;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.chapter {
  background-color: #111;
  color: #fff;
  padding: 10px;
  font-size: 48px;
  letter-spacing: 10px;
  font-family: "Medieval Sharp", serif;
}

.chapter-text {
  color:#FCCA8E;
  background-color:#000000;
  padding: 1rem 50rem 1rem .5rem;
  text-align: justify;
}

.begin {
  font-size: 2rem;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #ddd;
}

.bgimg-piggles {
  background-image: url("images/piggles.jpg");
  background-size: cover;
  height: 100%;
}

.piggles {
  background-color: #FCF7E1;
  color: #745949;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.bgimg-frog-prince {
  background-image: url("images/frog-prince.jpg");
  min-height: 100%;
  background-size: cover;
}

.frog-prince {
  background-color: #2F2B05;
  color: #C7E2C9;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.bgimg-piper1 {
  background-image: url("images/pied-piper1.jpg");
  background-size: cover;
  min-height: 100%;
}

.piper {
  background-color: #071526;
  color: #f2d1c9;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.bgimg-red-hood {
  background-image: url("images/red-hood.jpg");
  background-size: cover;
  min-height: 100%;
}

.red-hood {
  background-color: #FDC1BD;
  color: #A61103;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover {
  color: #F2C288;
  background-color: #0D0C26;
  text-decoration: underline;
}

footer {
  border-top: double;
  border-color: #2e29a6;
  margin: 0 auto;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 75% 1fr;
  grid-template-rows: 1fr 70% 1fr;
}

footer div {
  grid-column: 2/3;
  grid-row: 2/3;
}



/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6 {
    background-attachment: scroll;
  }
}