/*contents:
  navigation arrows: line 40
  background map: line 119
  keyframes animation: line 149
  specifications for pages 2-47: line 213
  @media only screen: line 401*/


html {
  font-size: 1rem;
  font-family: 'EB Garamond', serif;
}

body {
  color:#fefefe;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  color: #000;
  font-size: 2rem;
  padding: 11.5%;
  text-align: left;
}

h1-1 {
  animation: flash;
  animation-duration: 1s;
  font-family: 'Tangerine', cursive;
  font-size: 2.5rem;
}

p {
  color: #bcd1ba;
  font-family: 'Tangerine', cursive;
  font-size: 8rem;
  position: fixed;
  left: 2%;
  bottom: -18%;
}


/*__________________navigation arrows__________________*/

.vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.triangle3 {
  animation-name: top;
  animation-duration: .6s;
  border-bottom: 50px solid #d1d1d1;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  position: fixed;
  left: 47.7%;
  top: 5%;
}

.triangle3:hover {
  animation-name: bottom;
  animation-duration: .6s;
}

.triangle4 {
  animation-name: bottom;
  animation-duration: .6s;
  border-top: 50px solid #d1d1d1;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  position: fixed;
  left: 47.7%;
  bottom: 5%;
}

.triangle4:hover {
  animation-name: top;
  animation-duration: .6s;
}

.horizontal {
  display: flex;
  justify-content: center;
}

.triangle1 {
  animation-name: left;
  animation-duration: .6s;
  border-top: 40px solid transparent;
  border-right: 50px solid #d1d1d1;
  border-bottom: 40px solid transparent;
  margin-left: 30px;
  position: fixed;
  left: 1%;
  top: 45%;
}

.triangle1:hover {
  animation-name: right;
  animation-duration: .6s;
}

.triangle2 {
  animation-name: right;
  animation-duration: .6s;
  border-top: 40px solid transparent;
  border-left: 50px solid #d1d1d1;
  border-bottom: 40px solid transparent;
  margin-right: 30px;
  position: fixed;
  right: 1%;
  top: 45%;
}

.triangle2:hover {
  animation-name: left;
  animation-duration: .6s;
}

/*___________________background map___________________*/

.map {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 10px;
  position: fixed;
  z-index: -1;
}

.square {
  background: #ecf4eb;
  width: 12vw;
  height: 15.6vh;
}

.homepage {
  background: #fff;
  width: 12vw;
  height: 15.6vh;
}

.youarehere {
  background: #CBDBC9;
  width: 12vw;
  height: 15.6vh;
}


/*__________________keyframes animation__________________*/

@keyframes left {
  0% {
    transform: translate(0px, 0px);
    animation-timing-function:ease-out;
   }
  50% {
    transform: translate(-18px, 0px);
    animation-timing-function:ease-out;
   }
  100% {
    transform: translate(0px, 0px);
    animation-timing-function:ease-out;
   }
}

@keyframes right {
  0% {
    transform: translate(0px, 0px);
    animation-timing-function:ease-out;
   }
  50% {
    transform: translate(18px, 0px);
    animation-timing-function:ease-out;
   }
  100% {
    transform: translate(0px, 0px);
    animation-timing-function:ease-out;
   }
}

@keyframes top {
  0% {
    transform: translate(0px, 0px);
    animation-timing-function:ease-out;
   }
  50% {
    transform: translate(0px, -18px);
    animation-timing-function:ease-out;
   }
  100% {
    transform: translate(0px, 0px);
    animation-timing-function:ease-out;
   }
}

@keyframes bottom {
  0% {
    transform: translate(0px, 0px);
    animation-timing-function:ease-out;
   }
  50% {
    transform: translate(0px, 18px);
    animation-timing-function:ease-out;
   }
  100% {
    transform: translate(0px, 0px);
    animation-timing-function:ease-out;
   }
}


/*_________specifications for pages 2 through 47_________*/

h1.page2 {
  padding: 15.5%;
}

h1.page3 {
  padding: 18%;
}

h1.page4 {
  padding: 15%;
}

h1.page5 {
  padding: 16%;
}

h1.page6 {
  padding: 13%;
}

h1.page7 {
  padding: 20%;
}

h1.page8 {
  padding: 15%;
}

h1.page9 {
  padding: 18%;
}

h1.page10 {
  padding: 16%;
}

h1.page11 {
  padding: 17%;
}

h1.page12 {
  padding: 19%;
}

h1.page13 {
  padding: 14%;
}

h1.page14 {
  padding: 14%;
}

h1.page15 {
  padding: 19%;
}

h1.page16 {
  padding: 14.5%;
}

h1.page17 {
  padding: 13%;
}

h1.page18 {
  padding: 15.5%;
}

h1.page19 {
  padding: 17%;
}

h1.page20 {
  padding: 15%;
}

h1.page21 {
  padding: 15%;
}

h1.page22 {
  padding: 16%;
}

h1.page23 {
  padding: 14%;
}

h1.page24 {
  padding: 17%;
}

h1.page25 {
  padding: 15%;
}

h1.page26 {
  padding: 14%;
}

h1.page27 {
  padding: 13%;
}

h1.page28 {
  padding: 14%;
}

h1.page29 {
  padding: 14%;
}

h1.page30 {
  padding: 15.75%;
}

h1.page31 {
  padding: 15%;
}

h1.page32 {
  padding: 11%;
}

h1.page33 {
  padding: 20.5%;
}

h1.page34 {
  padding: 13%;
}

h1.page35 {
  padding: 13%;
}

h1.page36 {
  animation: flash;
  animation-duration: 1s;
  font-family: 'Tangerine', cursive;
  font-size: 3.5rem;
  line-height: 5.5rem;
  padding: 17%;
}

h1.page37 {
  padding: 16.5%;
}

h1.page38 {
  padding: 15.5%;
}

h1.page39 {
  padding: 18.75%;
}

h1.page40 {
  padding: 10%;
}

h1.page41 {
  padding: 17%;
}

h1.page42 {
  padding: 13%;
}

h1.page43 {
  padding: 11.5%;
}

h1.page44 {
  padding: 18%;
}

h1.page45 {
  padding: 15.5%;
}

h1.page46 {
  padding: 15.5%;
}

h1.fin {
  padding: 12.5%;
}


/*__________________@media only screen__________________*/

@media only screen and (max-width: 400px) {

main {
  display: flex;
}

h1 {
  font-size: 1.5rem;
  margin-top: 16%;
  margin-left: -50%;
  margin-right: 5%;
  padding: 10%;
}

h1-1 {
  font-size: 2rem;
}

p {
  font-size: 5rem;
  align-self: flex-start;
  justify-content: center;
  position: static;
  margin: 0%;
  margin-left: 45%;
}

h1.page2, h1.page3, h1.page4, h1.page5, h1.page6, h1.page7, 
h1.page8, h1.page9, h1.page10, h1.page11, h1.page12, h1.page13, 
h1.page14, h1.page15, h1.page16, h1.page17, h1.page18, h1.page19, 
h1.page20, h1.page21, h1.page22, h1.page23, h1.page23, h1.page24, 
h1.page25, h1.page26, h1.page27, h1.page28, h1.page29, h1.page30, 
h1.page31, h1.page32, h1.page33, h1.page34, h1.page35, h1.page36, 
h1.page37, h1.page38, h1.page39, h1.page40, h1.page41, h1.page42, 
h1.page43, h1.page44, h1.page45, h1.page46, h1.fin {
  padding: 10%;
}

h1.page36 {
  font-size: 3rem;
  line-height: 4rem;
  text-align: center;
}

.vertical {
  display: flex;
  flex-direction: column;
  align-content: space-around;
  margin-left: 40%;
  margin-right: 40%;
  margin-top: -37%;
}

.triangle3 {
  animation: none;
  border-bottom: 50px solid #d1d1d1;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  position: static;
  margin-bottom: 140%;
}

.triangle4 {
  animation: none;
  border-top: 50px solid #d1d1d1;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  position: static;
  margin-bottom: 40%;
}

.horizontal {
  display: flex;
  justify-content: space-around;
  margin-top: 10%;
}

.triangle1 {
  animation: none;
  border-top: 40px solid transparent;
  border-right: 50px solid #d1d1d1;
  border-bottom: 40px solid transparent;
  position: static;
}

.triangle2 {
  animation: none;
  border-top: 40px solid transparent;
  border-left: 50px solid #d1d1d1;
  border-bottom: 40px solid transparent;
  position: static;
}


}