body {
  background-color: #111;
  color: #f0e7df;
  /*font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;*/
  font-family: 'Arimo', sans-serif;
  font-size: 14px;
  overflow-x: hidden;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px grey;
          box-shadow: inset 0 0 5px grey;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

@font-face {
  font-family: Cinzel;
  src: url(../resources/Cinzel-Regular.otf);
}

@font-face {
  font-family: Cinzel;
  src: url(../resources/Cinzel-Bold.otf);
  font-weight: bold;
}

a {
  color: white;
  text-decoration: none;
}

nav {
  position: -webkit-sticky;
  position: sticky;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  top: 0%;
  left: 0px;
  width: 100%;
  height: auto;
  background-color: #bbbbbb;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  z-index: 10;
  font-size: 14px;
}

nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: auto;
}

nav li {
  display: inline-block;
}

nav p {
  margin: auto;
  display: inline-block;
  font-family: Cinzel, serif;
}

nav .navitem {
  color: black;
  width: auto;
  padding: 5px 5px;
  margin: 5px 5px;
  -webkit-transition: height 1s;
  transition: height 1s;
  border: solid 1px black;
}

nav .navitem:hover a {
  color: white;
  display: inline-block;
}

nav .navitem a {
  color: black;
}

nav .mainlist {
  width: 100%;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #333;
  padding: 10px 0px;
  margin: 10px auto;
}

nav .secondarylist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin: auto;
  background-color: #333;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media only screen and (max-width: 1000px) {
  nav {
    font-size: 10px;
  }
}

.text-description {
  padding: 25px 0px;
}

p {
  margin: 5px 0px;
}

span {
  font-style: italic;
}

h1 {
  font-size: 4rem;
  font-family: Cinzel;
}

h2 {
  font-size: 3rem;
  font-family: Cinzel;
}

h3 {
  background-color: #eeeeee;
  font-family: Cinzel;
  display: block;
  padding: 10px;
  margin: auto;
  bottom: 5px;
  position: relative;
  color: black;
  font-weight: bold;
  font-size: 1.8rem;
  border-bottom: 2px solid black;
  border-radius: 10px;
}

@media only screen and (max-width: 650px) {
  h3 {
    font-size: 1rem;
  }
}

h4 {
  font-size: 1.4rem;
  font-family: Cinzel;
  font-weight: bold;
  margin-bottom: 15px;
}

strong {
  font-family: Cinzel;
  font-weight: 700;
  color: #ffc75e;
}

em {
  font-weight: 700;
}

.parallaxdiv {
  border: 20px solid #222222;
  position: relative;
  display: block;
  width: 600px;
  height: 300px;
  background-color: #222222;
  margin: 15px auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}

.parallaxdiv .parallax-item {
  position: absolute;
  display: inline-block;
  width: 720px;
  height: 350px;
  min-height: 150px;
  background-size: contain;
  background-repeat: no-repeat;
}

.parallaxdiv #parallax-layer1 {
  background-image: url("../resources/images/parallax example/parallax1.png");
  z-index: 10;
}

.parallaxdiv #parallax-layer2 {
  background-image: url("../resources/images/parallax example/parallax2.png");
  z-index: 9;
}

.parallaxdiv #parallax-layer3 {
  background-image: url("../resources/images/parallax example/parallax3-player.png");
  z-index: 8;
}

.parallaxdiv #parallax-layer4 {
  background-image: url("../resources/images/parallax example/parallax4.png");
  z-index: 7;
}

.parallaxdiv #parallax-layer5 {
  background-image: url("../resources/images/parallax example/parallax5-ground.png");
  z-index: 6;
}

.parallaxdiv #parallax-layer6 {
  background-image: url("../resources/images/parallax example/parallax6.png");
  z-index: 5;
}

.parallaxdiv #parallax-layer7 {
  background-image: url("../resources/images/parallax example/parallax7.png");
  z-index: 4;
}

.parallaxdiv #parallax-layer8 {
  background-image: url("../resources/images/parallax example/parallax8.png");
  z-index: 3;
}

#title {
  position: relative;
  width: 70%;
  height: auto;
  min-height: 400px;
  margin: 100px auto 50px;
  margin-top: 50px;
  background-image: url("../resources/images/forest2.png");
  background-size: cover;
  background-position: center;
  padding: 10px;
  color: white;
  font-weight: 700;
  font-variant: small-caps;
}

#title h1 {
  font-size: 5rem;
  letter-spacing: 0.1rem;
  position: absolute;
  bottom: 25px;
  left: 45px;
  text-shadow: 5px 5px 3px black;
}

.char-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.char-text {
  display: inline-block;
  width: 35%;
  padding: 0px 30px;
}

.char-img {
  display: inline-block;
  width: auto;
  max-height: 600px;
  padding-bottom: 20px;
}

#story {
  width: 70%;
  margin: auto;
}

#gameplay {
  width: 70%;
  margin: 50px auto;
}

#otherarttitle {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  margin: auto;
  width: 70%;
}

#otherartlist {
  padding: 0px 20px;
}

#otherartlist ul {
  list-style: disc;
}

#otherartlist ul li {
  padding: 10px 20px;
}

#sound-refs {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  margin: 50px auto;
  width: 70%;
}

#sound-refs .text-description ul {
  list-style-type: disc;
}

#sound-refs .text-description ul li {
  padding: 5px 0px;
}

.textimagebox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  width: 90%;
  min-height: 200px;
  max-width: 2500px;
  background-color: #222222;
  margin: 15px auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.textimagebox-text {
  display: block;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 45%;
  min-height: 100px;
  height: auto;
  margin: 10px;
  margin: 30px;
  padding-right: 0px;
}

.textimagebox-image {
  display: block;
  -webkit-box-flex: 3;
      -ms-flex-positive: 3;
          flex-grow: 3;
  width: 45%;
  min-height: 250px;
  height: auto;
  margin: 10px 20px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#img-insideoutside {
  background-image: url("../resources/images/tower-out.png");
}

#img-insideoutside:hover {
  background-image: url("../resources/images/tower-in.png");
}

#img-grid {
  background-image: url("../resources/images/grid layout example.png");
}

#img-walljumping {
  background-image: url("../resources/images/walljump1.png");
}

#img-walljumping:hover {
  background-image: url("../resources/images/walljump2.png");
}

#img-lantern {
  background-image: url("../resources/images/lantern1.png");
}

#img-lantern:hover {
  background-image: url("../resources/images/lantern2.png");
}

#img-rebuild1 {
  background-image: url("../resources/images/rebuild1.png");
}

#img-rebuild2 {
  background-image: url("../resources/images/rebuild2.png");
}

#img-rebuild3 {
  background-image: url("../resources/images/rebuild3.png");
}

#img-rebuild4 {
  background-image: url("../resources/images/rebuild4.png");
}

.locationContainer {
  position: relative;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
  min-height: 500px;
  margin: 0px;
  padding: 0px;
}

.locationDescription {
  display: inline-block;
  position: absolute;
  bottom: 10%;
  left: 7%;
  width: 30%;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  color: black;
  padding: 20px;
  margin: 0px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.locationDescription:hover {
  opacity: 0;
}

.locationDescription span {
  font-style: italic;
  color: #57361b;
}

/* individual elements -------------------------------------- */
#gianttree {
  width: 100%;
  /*background-color: steelblue;*/
  background-color: pink;
  background-image: url("../resources/images/giant tree/giant tree3.png");
}

#walltemple {
  /*background-color: #3d2d25;*/
  background-image: -webkit-gradient(linear, left bottom, left top, from(#1c100d), to(#804016));
  background-image: linear-gradient(to top, #1c100d, #804016);
  background-image: url("../resources/images/wall temple/wall temple drawing4b.png");
}

#colossus {
  /*background-color: #3e3f73;*/
  background-image: -webkit-gradient(linear, left bottom, left top, from(#3e3f73), to(#7765a8));
  background-image: linear-gradient(to top, #3e3f73, #7765a8);
  background-image: url("../resources/images/colossus/colossus2.png");
}

#observatory {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#121010), color-stop(52%, #4b311c), color-stop(90%, #cd8328), to(#ffda62));
  background-image: linear-gradient(0deg, #121010 0%, #4b311c 52%, #cd8328 90%, #ffda62 100%);
  background-image: url("../resources/images/observatory/observatory.png");
}

#floating-island {
  background-image: url("../resources/images/floating island/floating island2.png");
}

#personatemple {
  /*background-color: #325670;*/
  background-image: -webkit-gradient(linear, left bottom, left top, from(#1e4f73), to(#58a39d));
  background-image: linear-gradient(to top, #1e4f73, #58a39d);
  background-image: url("../resources/images/persona temple/Persona Temple2.png");
}

#swordsman {
  /*background-color: #45541d;*/
  background-image: -webkit-gradient(linear, left bottom, left top, from(#4f5c2d), to(#becf53));
  background-image: linear-gradient(to top, #4f5c2d, #becf53);
  background-image: url("../resources/images/swordsman/swordsman1.png");
}

#watertemple {
  /*background-color: #325670;*/
  background-image: -webkit-gradient(linear, left bottom, left top, from(#1e4f73), to(#58a39d));
  background-image: linear-gradient(to top, #1e4f73, #58a39d);
  background-image: url("../resources/images/water temple/water temple b.png");
}

#spacetower {
  /*background-color: #2a4673;*/
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(16%, #14306e), color-stop(76%, #368ad7), to(#fff3cc));
  background-image: linear-gradient(0deg, #14306e 16%, #368ad7 76%, #fff3cc 100%);
  background-image: url("../resources/images/space tower/space-tower-1.png");
}

.containerPadding {
  display: block;
  position: relative;
  width: 100%;
  height: 100px;
}

#padgianttree1 {
  background: -webkit-gradient(linear, left bottom, left top, from(#9a8fd0), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(0deg, #9a8fd0 0%, rgba(34, 34, 34, 0) 100%);
}

#padgianttree2 {
  display: inline-block;
  background: -webkit-gradient(linear, left top, left bottom, from(#b43e56), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(180deg, #b43e56 0%, rgba(34, 34, 34, 0) 100%);
}

#padwalltemple1 {
  background: -webkit-gradient(linear, left bottom, left top, from(#110a05), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(0deg, #110a05 0%, rgba(34, 34, 34, 0) 100%);
}

#padwalltemple2 {
  display: inline-block;
  background: -webkit-gradient(linear, left top, left bottom, from(#110a05), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(180deg, #110a05 0%, rgba(34, 34, 34, 0) 100%);
}

#padcolossus1 {
  background: -webkit-gradient(linear, left bottom, left top, from(#809cc7), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(0deg, #809cc7 0%, rgba(34, 34, 34, 0) 100%);
}

#padcolossus2 {
  display: inline-block;
  background: -webkit-gradient(linear, left top, left bottom, from(#755c91), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(180deg, #755c91 0%, rgba(34, 34, 34, 0) 100%);
}

#padpersona1 {
  background: -webkit-gradient(linear, left bottom, left top, from(#d2dee4), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(0deg, #d2dee4 0%, rgba(34, 34, 34, 0) 100%);
}

#padpersona2 {
  display: inline-block;
  background: -webkit-gradient(linear, left top, left bottom, from(#366e40), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(180deg, #366e40 0%, rgba(34, 34, 34, 0) 100%);
}

#padswordsman1 {
  background: -webkit-gradient(linear, left bottom, left top, from(#3f7757), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(0deg, #3f7757 0%, rgba(34, 34, 34, 0) 100%);
}

#padswordsman2 {
  display: inline-block;
  background: -webkit-gradient(linear, left top, left bottom, from(#5e5044), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(180deg, #5e5044 0%, rgba(34, 34, 34, 0) 100%);
}

#padwatertemple1 {
  background: -webkit-gradient(linear, left bottom, left top, from(#7ad7df), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(0deg, #7ad7df 0%, rgba(34, 34, 34, 0) 100%);
}

#padwatertemple2 {
  display: inline-block;
  background: -webkit-gradient(linear, left top, left bottom, from(#639870), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(180deg, #639870 0%, rgba(34, 34, 34, 0) 100%);
}

#padobservatory1 {
  background: -webkit-gradient(linear, left bottom, left top, from(#bd8837), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(0deg, #bd8837 0%, rgba(34, 34, 34, 0) 100%);
}

#padobservatory2 {
  display: inline-block;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffc644), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(180deg, #ffc644 0%, rgba(34, 34, 34, 0) 100%);
}

#padfloatingisland1 {
  background: -webkit-gradient(linear, left bottom, left top, from(#a82780), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(0deg, #a82780 0%, rgba(34, 34, 34, 0) 100%);
}

#padfloatingisland2 {
  display: inline-block;
  background: -webkit-gradient(linear, left top, left bottom, from(#ec682a), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(180deg, #ec682a 0%, rgba(34, 34, 34, 0) 100%);
}

#padspacetower1 {
  background: -webkit-gradient(linear, left bottom, left top, from(#0a0c29), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(0deg, #0a0c29 0%, rgba(34, 34, 34, 0) 100%);
}

#padspacetower2 {
  display: inline-block;
  background: -webkit-gradient(linear, left top, left bottom, from(#141f5d), to(rgba(34, 34, 34, 0)));
  background: linear-gradient(180deg, #141f5d 0%, rgba(34, 34, 34, 0) 100%);
}

.location {
  width: 100%;
  height: auto;
  max-width: 2120px;
  margin: auto;
  padding-bottom: 1px;
}

.location .locationGallery {
  width: 90%;
  /*max-height: 200px;*/
  position: relative;
  top: -100px;
  margin: 20px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(255, 255, 255, 0.4);
  /*border: 5px solid #cfa227;*/
  border-radius: 35px;
  padding: 20px 40px;
}

.location .locationGallery .galleryItem {
  display: inline-block;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row;
          flex-flow: row;
  width: auto;
  -ms-flex-preferred-size: 10%;
      flex-basis: 10%;
  margin: 10px;
  border-radius: 10px;
  -webkit-transition: -webkit-transform .4s;
  transition: -webkit-transform .4s;
  transition: transform .4s;
  transition: transform .4s, -webkit-transform .4s;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.galleryItem:hover {
  -webkit-transform: scale(3);
          transform: scale(3);
  -webkit-transition: -webkit-transform .4s;
  transition: -webkit-transform .4s;
  transition: transform .4s;
  transition: transform .4s, -webkit-transform .4s;
}

.location .locationGallery img {
  display: block;
  margin: auto;
  height: 100%;
  max-height: 200px;
  width: auto;
  border: 1px black solid;
  border-radius: 10px;
}

.btnToggle {
  position: absolute;
  top: 25px;
  right: 1.5%;
  padding: 12px;
  text-transform: uppercase;
  background-color: #666666;
  color: #eeeeee;
  border: none;
}

.btnToggle:hover {
  background-color: #333333;
}

.btnToggle:active {
  background-color: #222222;
}

#otherartGallery {
  top: 0px;
}

.music-item {
  position: relative;
  display: inline-block;
  margin: 10px;
  width: 40%;
  min-width: 400px;
  -ms-flex-line-pack: center;
      align-content: center;
  padding: 10px;
}

.music-item p {
  margin: auto;
  display: block;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.music-item .colorcircle {
  position: absolute;
  right: 0px;
  top: 10px;
  display: inline-block;
  height: 50px;
  width: 100px;
  border-radius: 20px;
}

footer {
  display: block;
  margin-top: 100px;
  padding: 30px;
  background-color: #222222;
  text-align: center;
}

@media only screen and (max-width: 1000px) {
  .mainlist li {
    font-size: 1rem;
  }
  .secondarylist li {
    font-size: 1rem;
  }
  .locationContainer {
    min-height: 500px;
  }
  .music-item .colorcircle {
    right: -25px;
  }
}

@media only screen and (min-width: 1001px) and (max-width: 1500px) {
  .locationContainer {
    min-height: 750px;
  }
}

@media only screen and (min-width: 1501px) {
  .locationContainer {
    min-height: 950px;
  }
  .music-item .colorcircle {
    right: 50px;
  }
}
/*# sourceMappingURL=style.css.map */