@font-face {
  font-family: 'forestry';
  src: url('fonts/Forestry.ttf');
}

@font-face {
  font-family: 'highsummit';
  src: url('/fonts/HighSummit.ttf');
}

@font-face {
  font-family: 'jeff';
  src: url('/fonts/QEJeffDungan.ttf');
}

@font-face {
  font-family: 'witchwood';
  src: url('/fonts/Witchwoode-Regular.ttf');
}

@font-face {
  font-family: 'aston';
  src: url('/fonts/AstonScript.ttf');
}

@font-face {
  font-family: 'chandia';
  src: url('/fonts/Chandia.otf');
}

@font-face {
  font-family: 'andelion';
  src: url('/fonts/Andelion Script.otf');
}

@font-face {
  font-family: 'dave';
  src: url('/fonts/QEDaveMergens.ttf');
}

    :root {
/* CSS HEX */
--carbon-black: #19191Aff;
--dark-khaki: #3E3A28ff;
--soft-linen: #ECEDE6ff;
--evergreen: #1B3528ff;
--deep-walnut: #463721ff;
--medium-evergreen: #6c7d74;
--light-evergreen: #a3aea9;

}
body {
  background-image: url(images/backgroundalt.jpg);
background-color: #19191Aff;
  background-size: cover;
}

h1 {
    font-family: 'forestry';
    color: var(--title-color);
    font-size: var(--title-font-size);
    text-align: center;
    letter-spacing: 7px;
  }

h2 {
  position: relative;
  font-family:'witchwood';
  font-size:1em;
  line-height:35px;
  font-weight:normal;
  letter-spacing:0.2em;
  text-align:center; 
  color:#3E3A28ff;

            }

h3 {
    
  font-family:'Jeff';
  font-size:1em;
  line-height:2.2em;
  font-weight:normal;
  letter-spacing:0.2em;
  text-align:center; 
  color:#1B3528ff;
    background-color: 
}


.box {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: 600px;
  margin: 50px auto;
  font-family: 'dave', cursive;
    color: #463721ff;
  font-size: 20px;
  border: 0px solid #fff;
  border-radius: 10px;
  box-shadow: 0 0 7px rgba(0,0,0,0.5);
  line-height: 1.5rem;
  padding: 1rem 1.5rem 1.5rem 2.2rem;
  background-color: rgba(236, 237, 230,0.9)
    
}


.box2 {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: 500px;
  margin: 50px auto;
  font-family: 'highsummit', cursive;
  font-size: 20px;
  border: 0px solid #fff;
  border-radius: 10px;
  box-shadow: 0 0 7px rgba(0,0,0,0.5);
  line-height: 1.5rem;
  padding: 1rem 1.5rem 1.5rem 2.2rem;
  background-color: rgba(236, 237, 230,0.9)
    
}

.stats {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: 90%;
  margin: 0px auto 19px auto ;
  font-family: 'jeff', cursive;
  font-size: 20px;
  border: 0px solid #fff;
  border-radius: 10px;
  box-shadow: 0 0 7px rgba(0,0,0,0.5);
  line-height: 1.5rem;
  padding: 1rem;
  background-color: #edebe6;
    
}

.day5a{
 position: relative;
  z-index: 0;
  margin: 50px auto;
  
  font-family:'jeff';
  font-size: 30px;
  color: antiquewhite;
  line-height: 1.5rem;
  padding: 1.8rem 1rem 1rem 3.8rem;
    letter-spacing: 1px;}

.page {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: 600px;
  margin: 50px auto;
  
  font-family:'dave';
  font-size: 20px;
  color: #3E3A28ff;
  border: 0px solid #fff;
  border-radius: 10px;
  box-shadow: 0 0 7px rgba(0,0,0,0.5);
  /* Background lines */
  background-image: linear-gradient(#f5f5f0 1.4rem, #ccc 1.6rem);
  background-size: 100% 1.5rem;
  
  line-height: 1.5rem;
  padding: 1.8rem 1rem 1rem 3.8rem;
    letter-spacing: 1px;
    
}

.pagealt {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: 600px;
  margin: 50px auto;
  
  font-family: 'jeff', cursive;
  font-size: 20px;
  
  border: 0px solid #fff;
  border-radius: 10px;
  box-shadow: 0 0 7px rgba(0,0,0,0.5);
  /* Background lines */
  background-image: linear-gradient(#f5f5f0 1.4rem, #ccc 1.6rem);
  background-size: 100% 1.5rem;
  
  line-height: 1.5rem;
  padding: 1.8rem 1rem 1rem 3.8rem;
    letter-spacing: 1px;
    
}

.marge {
  position: absolute;
  border-left: 1px solid #d88;
  height: 100%;
  left: 3.3rem;
  top: 0;
}

.titre {
  color: #3E3A28ff;
  font-family: 'forestry';
  display: block;
  padding-bottom: 1.5rem;
  font-size: 1.3em;
  position: relative;
  letter-spacing:0.2em;
}

.page p {
  margin: 0;
  text-indent: 1rem;
  padding-bottom: 1.2rem;
}

a {
   color: #1B3528ff;
    text-decoration: underline;
    letter-spacing: 2px;
}

a:hover {
  color: #6c7d74;
}

#exlibris {
    background-image: url("images/twigframe.png");
    width: 100%;
    height: 500px;
    padding: 50px 20px 10px;
    background-repeat: no-repeat;
  background-position: center;
    background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
   }

#exlibristext {
    padding: 50px;
    
   }

#divider {
    height: 3.5em;
    max-width: 100%;
    margin: auto;
    background-image: url("images/twig.png");
    background-repeat: no-repeat;
  background-position: center;
    background-size: contain;
      opacity: 0.5;
   }

/*map*/

:root {
    --width: 500px;
}

.main-container {
    display: flex;
    min-width: calc(var(--width) + 50px);
    min-height: 100vh;
    justify-content: center;
    align-items: center;
}

.folded-img {
    width: var(--width);
    aspect-ratio: 0.75;
    display: flex;
    cursor: pointer;
}

.folded-img span {
    width: 20%;
    height: 100%;
    background-image: url('images/may2020_f03_hiking.jpg');
    background-size: cover;
    transition: 0.5s ease-in-out;
    box-shadow: inset 20px 0 50px rgba(0, 0, 0, .5);
    background-position: calc(var(--i)*-50px);
}

.folded-img span:nth-child(odd) {
    transform: skewY(12deg);
}

.folded-img span:nth-child(even) {
    transform: skewY(-12deg);
}

.folded-img:hover span {
    transform: none;
    box-shadow: none;
}

/*img 2 */
.folded-img2 {
    width: var(--width);
    aspect-ratio: 0.75;
    display: flex;
    cursor: pointer;
}

.folded-img2 span {
    width: 20%;
    height: 100%;
    background-image: url('images/may2020_f07_hiking.jpg');
    background-size: cover;
    transition: 0.5s ease-in-out;
    box-shadow: inset 20px 0 50px rgba(0, 0, 0, .5);
    background-position: calc(var(--i)*-50px);
}

.folded-img2 span:nth-child(odd) {
    transform: skewY(12deg);
}

.folded-img2 span:nth-child(even) {
    transform: skewY(-12deg);
}

.folded-img2:hover span {
    transform: none;
    box-shadow: none;
}
/*img 3 */
.folded-img3 {
    width: var(--width);
    aspect-ratio: 1;
    display: flex;
    cursor: pointer;
}

.folded-img3 span {
    width: 20%;
    height: 100%;
    background-image: url('images/cabin.png');
    background-size: cover;
    transition: 0.5s ease-in-out;
    box-shadow: inset 20px 0 50px rgba(0, 0, 0, .5);
    background-position: calc(var(--i)*-50px);
}

.folded-img3 span:nth-child(odd) {
    transform: skewY(12deg);
}

.folded-img3 span:nth-child(even) {
    transform: skewY(-12deg);
}

.folded-img3:hover span {
    transform: none;
    box-shadow: none;
}

/*skew effect*/
.skew {
  transform: skew(20deg, 4deg);
    padding: 10px;
}

@media screen and (max-width: 600px) {
    
    h2 {
  position: relative;
  font-family:'witchwood';
  font-size:1em;
  line-height:35px;
  font-weight:normal;
  letter-spacing:0.2em;
  text-align:center;

            }

.box {
  width: 80%;
    
}

.pagealt {
  width: 90%;

    
}
.page {
  width: 90%;

    
}
#exlibristext {
        background-color: #f5f5f0;
    padding: 10px;
    border-color: goldenrod;
  border-style: solid;
    border-width: 1px;
    }
    .main-container {
    display: none;
    }


}