/*html, body {
	margin: 0px;
	padding: 0px;
}*/

main#landing-page {
   position: relative;
   width: 100vw;
   height: 100vh;
   background-color: #826000;
   overflow: hidden;
}

main#landing-page > div {
   position: absolute;
   width: 100vw;
   height: 100vh;
}

main#landing-page div {
   background-repeat: no-repeat;
   background-size: contain;
   transition:
      opacity 0.5s,
      background-image 0.5s; /*, filter 0.5s*/
}

main#landing-page div div {
   position: absolute;
}

/*main#landing-page div[data-distance] {
	transition: transform 0.1s;
}*/

/* ---------------------- */

main#landing-page div#sky {
   height: 78vh;
}

main#landing-page div#skybg-day,
main#landing-page div#skybg-night {
   top: 0;
   left: 0;
   height: 78vh;
   width: 120vw;
}
main#landing-page div#skybg-day {
   background-image: url('/static/landingPage/sky-day.svg');
   background-size: cover;
}
main#landing-page div#skybg-night {
   background-image: url('/static/landingPage/sky-night.svg');
   background-size: cover;
}

main#landing-page div#sun {
   top: 10vh;
   left: calc(35vw + 122px);
   height: 20vh;
   width: 20vh;
   background-image: url('/static/landingPage/sun.svg');
   filter: drop-shadow(0px 0px 15px #ffff00);
}

main#landing-page div#moon {
   top: -0.2vh;
   left: 35.2vw;
   height: 51vh;
   width: 51vh;
   background-image: url('/static/landingPage/moon.svg');
}

main#landing-page div#clouds {
   top: 8vh;
   left: 0vw;
   height: 18.13vw;
   width: 200vw;
   background-image: url('/static/landingPage/clouds.svg');
   background-repeat: repeat-x;
   animation: clouds 180s linear infinite;
}

main#landing-page div#stars {
   top: -25vh;
   left: -25vw;
   height: 120vh;
   width: 200vh;
   background-image: url('/static/landingPage/stars.svg');
   background-repeat: repeat;
}

/* ---------------------- */

main#landing-page div#far {
   top: 60vh;
   height: 40vh;
}

main#landing-page div#mountains {
   top: 0;
   left: -2vw;
   height: 18vw;
   width: 104vw;
   background-image: url('/static/landingPage/mountains.svg');
}

main#landing-page div#far-ground {
   top: 7vw;
   left: 0;
   height: 6vw;
   width: 106vw;
   background-image: url('/static/landingPage/far.svg');
}

main#landing-page div#far-bush {
   top: -5vw;
   left: -2vw;
   height: 21vw;
   width: 34vw;
   background-image: url('/static/landingPage/bush-2.svg');
}

/* ---------------------- */

main#landing-page div#obj {
   top: 60vh;
   height: 40vh;
}

main#landing-page div#tree {
   top: -24vw;
   right: -3vw;
}

main#landing-page div#tree::after {
   content: ' ';
   display: block;
   height: 30vw;
   width: 20vw;
   background-image: url('/static/landingPage/tree.svg');
   background-repeat: no-repeat;
   background-size: contain;
   animation: tree 7s linear infinite;
   transform-origin: bottom;
}

main#landing-page div#barn {
   top: -11vw;
   right: 3vw;
   height: 21vw;
   width: 42vw;
   background-image: url('/static/landingPage/barn.svg');
}

/* ---------------------- */

main#landing-page div#mid {
   top: 59vh;
   height: 40vh;
}

main#landing-page div#mid-ground {
   top: 16vh;
   left: -7vw;
   height: 49vh;
   width: 114vw;
   background-image: url('/static/landingPage/middle.svg');
}

main#landing-page div#coup {
   top: 7vh;
   left: 33vw;
   height: 12vw;
   width: 19vw;
   background-image: url('/static/landingPage/coup.png');
}

main#landing-page div#mid-bale {
   top: 12vh;
   left: 14vw;
   height: 7vw;
   width: 18vw;
   background-image: url('/static/landingPage/bale.svg');
}

main#landing-page div#mid-bush {
   top: 12vh;
   right: -2vw;
   height: 7vw;
   width: 18vw;
   background-image: url('/static/landingPage/bush-1.svg');
}

/* ---------------------- */

main#landing-page div#chicken-1 {
   top: 0;
   left: 11vw;
   height: 8vw;
   width: 8vw;
   background-image: url('/static/landingPage/chikn-1-body.svg');
}
main#landing-page div#chicken-1::after {
   content: '';
   display: block;
   position: absolute;
   height: 55%;
   width: 55%;
   right: -24%;
   top: -21%;
   background-repeat: no-repeat;
   background-size: contain;
   background-image: url('/static/landingPage/chikn-1-head.svg');
   transform-origin: bottom left;
   animation: chikn-1-head 15s linear infinite;
}
@keyframes chikn-1-head {
   0% {
      transform: rotate(0deg);
   }
   10% {
      transform: rotate(12deg);
   }
   30% {
      transform: rotate(12deg);
   }
   40% {
      transform: rotate(16deg);
   }
   41% {
      transform: rotate(24deg);
   }
   42% {
      transform: rotate(16deg);
   }
   44% {
      transform: rotate(24deg);
   }
   46% {
      transform: rotate(16deg);
   }
   60% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(0deg);
   }
}

main#landing-page div#chicken-2 {
   top: 12vh;
   right: 24vw;
   height: 7vw;
   width: 7vw;
   background-image: url('/static/landingPage/chikn-2-body.svg');
}
main#landing-page div#chicken-2::after {
   content: '';
   display: block;
   position: absolute;
   height: 50%;
   width: 48%;
   top: -20%;
   left: -2%;
   background-repeat: no-repeat;
   background-size: contain;
   background-image: url('/static/landingPage/chikn-2-head.svg');
   transform-origin: bottom left;
   animation: chikn-2-head 10s linear infinite;
}
@keyframes chikn-2-head {
   0% {
      transform: rotate(0deg);
   }
   10% {
      transform: rotate(6deg);
   }
   30% {
      transform: rotate(6deg);
   }
   36% {
      transform: rotate(8deg);
   }
   40% {
      transform: rotate(12deg);
   }
   44% {
      transform: rotate(8deg);
   }
   48% {
      transform: rotate(12deg);
   }
   50% {
      transform: rotate(8deg);
   }
   51% {
      transform: scaleX(-1) translate(-90%, -10%) rotate(8deg);
   }
   79% {
      transform: scaleX(-1) translate(-90%, -10%) rotate(4deg);
   }
   80% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(0deg);
   }
}

main#landing-page div#chicken-3 {
   top: 9vh;
   left: 5vw;
   height: 5vw;
   width: 5vw;
   background-image: url('/static/landingPage/chikn-3-body.svg');
   animation: chikn-3 120s ease-in-out infinite;
}
main#landing-page div#chicken-3::after {
   content: '';
   display: block;
   position: absolute;
   height: 40%;
   width: 40%;
   top: 28%;
   right: -7%;
   background-repeat: no-repeat;
   background-size: contain;
   background-image: url('/static/landingPage/chikn-3-head.svg');
   transform-origin: top left;
   animation: chikn-3-head 9s linear infinite;
}
@keyframes chikn-3-head {
   0% {
      transform: rotate(-4deg);
   }
   10% {
      transform: rotate(6deg);
   }
   50% {
      transform: rotate(6deg);
   }
   60% {
      transform: rotate(8deg);
   }
   62% {
      transform: rotate(14deg);
   }
   64% {
      transform: rotate(8deg);
   }
   68% {
      transform: rotate(14deg);
   }
   70% {
      transform: rotate(8deg);
   }
   80% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(-4deg);
   }
}
@keyframes chikn-3 {
   0% {
      transform: translate(0vw, 0) scaleX(1);
   }

   3% {
      transform: translate(1vw, 0) scaleX(1);
   }
   4% {
      transform: translate(1vw, 0) scaleX(1);
   }

   5% {
      transform: translate(2vw, 0) scaleX(1);
   }
   6% {
      transform: translate(2vw, 0) scaleX(1);
   }

   9% {
      transform: translate(3vw, 0) scaleX(1);
   }
   10% {
      transform: translate(3vw, 0) scaleX(1);
   }

   12% {
      transform: translate(4vw, 0) scaleX(1);
   }
   13% {
      transform: translate(4vw, 0) scaleX(1);
   }

   16% {
      transform: translate(5vw, 0) scaleX(1);
   }
   17% {
      transform: translate(5vw, 0) scaleX(1);
   }

   20% {
      transform: translate(6vw, 0) scaleX(1);
   }
   21% {
      transform: translate(6vw, 0) scaleX(1);
   }

   23% {
      transform: translate(7vw, 0) scaleX(1);
   }
   24% {
      transform: translate(7vw, 0) scaleX(1);
   }

   27% {
      transform: translate(8vw, 0) scaleX(1);
   }
   28% {
      transform: translate(8vw, 0) scaleX(1);
   }

   30% {
      transform: translate(9vw, 0) scaleX(1);
   }
   31% {
      transform: translate(9vw, 0) scaleX(1);
   }

   33% {
      transform: translate(10vw, 0) scaleX(1);
   }
   34% {
      transform: translate(10vw, 0) scaleX(1);
   }

   36% {
      transform: translate(11vw, 0) scaleX(1);
   }
   37% {
      transform: translate(11vw, 0) scaleX(1);
   }

   39% {
      transform: translate(12vw, 0) scaleX(1);
   }
   40% {
      transform: translate(12vw, 0) scaleX(1);
   }

   43% {
      transform: translate(13vw, 0) scaleX(1);
   }
   44% {
      transform: translate(13vw, 0) scaleX(1);
   }

   46% {
      transform: translate(14vw, 0) scaleX(1);
   }
   47% {
      transform: translate(14vw, 0) scaleX(1);
   }

   49.9% {
      transform: translate(15vw, 0) scaleX(1);
   }
   50% {
      transform: translate(15vw, 0) scaleX(-1);
   }

   53% {
      transform: translate(14vw, 0) scaleX(-1);
   }
   54% {
      transform: translate(14vw, 0) scaleX(-1);
   }

   56% {
      transform: translate(13vw, 0) scaleX(-1);
   }
   57% {
      transform: translate(13vw, 0) scaleX(-1);
   }

   60% {
      transform: translate(12vw, 0) scaleX(-1);
   }
   61% {
      transform: translate(12vw, 0) scaleX(-1);
   }

   63% {
      transform: translate(11vw, 0) scaleX(-1);
   }
   64% {
      transform: translate(11vw, 0) scaleX(-1);
   }

   66% {
      transform: translate(10vw, 0) scaleX(-1);
   }
   67% {
      transform: translate(10vw, 0) scaleX(-1);
   }

   69% {
      transform: translate(9vw, 0) scaleX(-1);
   }
   70% {
      transform: translate(9vw, 0) scaleX(-1);
   }

   72% {
      transform: translate(8vw, 0) scaleX(-1);
   }
   73% {
      transform: translate(8vw, 0) scaleX(-1);
   }

   76% {
      transform: translate(7vw, 0) scaleX(-1);
   }
   77% {
      transform: translate(7vw, 0) scaleX(-1);
   }

   79% {
      transform: translate(6vw, 0) scaleX(-1);
   }
   80% {
      transform: translate(6vw, 0) scaleX(-1);
   }

   83% {
      transform: translate(5vw, 0) scaleX(-1);
   }
   84% {
      transform: translate(5vw, 0) scaleX(-1);
   }

   87% {
      transform: translate(4vw, 0) scaleX(-1);
   }
   88% {
      transform: translate(4vw, 0) scaleX(-1);
   }

   90% {
      transform: translate(3vw, 0) scaleX(-1);
   }
   91% {
      transform: translate(3vw, 0) scaleX(-1);
   }

   94% {
      transform: translate(2vw, 0) scaleX(-1);
   }
   95% {
      transform: translate(2vw, 0) scaleX(-1);
   }

   96% {
      transform: translate(1vw, 0) scaleX(-1);
   }
   97% {
      transform: translate(1vw, 0) scaleX(-1);
   }

   99.9% {
      transform: translate(0vw, 0) scaleX(-1);
   }
   100% {
      transform: translate(0vw, 0) scaleX(1);
   }
}

/* ---------------------- */

main#landing-page div#near {
   bottom: -11vh;
   height: 30vh;
}
main#landing-page div#near-ground {
   left: -2vw;
   height: 30vh;
   width: 114vw;
   background-image: url('/static/landingPage/near.svg');
}
main#landing-page div#near-bale {
   top: -1vh;
   right: 29vw;
   height: 15vw;
   width: 30vw;
   background-image: url('/static/landingPage/bale.svg');
}
main#landing-page div#grass {
   top: -1.5vh;
   left: 30vw;
   height: 7vw;
   width: 3.5vw;
   background-image: url('/static/landingPage/grass.svg');
   animation: grass 5.5s linear infinite;
   transform-origin: 60% 90%;
}

/* ---------------------- */

main#landing-page div#wallet-connector::before {
   content: '';
   display: block;
   position: fixed;
   left: 0;
   top: 0;
   height: 252px;
   width: 412px;
   border-radius: 10px;
   backdrop-filter: blur(5px);
}

main#landing-page div#wallet-connector {
   position: fixed;
   left: 50vw;
   top: 30vh;
   height: 260px;
   width: 420px;
   padding: 40px 20px 20px 20px;
   border-radius: 10px;
   border: 4px solid #ffffff60;
   text-align: center;
   background-color: #ffffff70;
   transform: translateX(-50%);
}
body.dark-mode main#landing-page div#wallet-connector {
   border: 4px solid #9ac8e580;
}

main#landing-page div#wallet-connector button.MuiButtonBase-root {
   margin-top: 20px;
   padding: 12px 20px;
   font-size: 14pt;
   text-transform: none;
   color: #ffffff;
   background-color: #8c61ff;
   border-radius: 20px;
}
main#landing-page div#wallet-connector button.MuiButtonBase-root:hover {
   background-color: #7353ca;
}

main#landing-page span.darkligtmodetracker-containor {
   position: fixed;
   display: inline-block;
   top: 10px;
   right: 10px;
}

main#landing-page span.darkligtmodetracker-containor button.MuiButtonBase-root {
   height: 56px;
   width: 56px;
   border-radius: 28px;
   background-color: rgba(255, 255, 255, 0.4);
}

/* ---------------------- */

body.dark-mode main#landing-page {
   background-color: #002382;
}

main#landing-page div#skybg-night,
main#landing-page div#moon,
main#landing-page div#stars,
body.dark-mode main#landing-page div#sun {
   opacity: 0;
}

body.dark-mode main#landing-page div#skybg-night,
body.dark-mode main#landing-page div#moon,
body.dark-mode main#landing-page div#stars {
   opacity: 1;
}

body.dark-mode main#landing-page div#barn {
   background-image: url('/static/landingPage/barn-night.svg');
}
body.dark-mode main#landing-page div#coup {
   background-image: url('/static/landingPage/coup-night.png');
}
body.dark-mode main#landing-page div#near-bale {
   background-image: url('/static/landingPage/bale-night.svg');
}
body.dark-mode main#landing-page div#mid-bale {
   background-image: url('/static/landingPage/bale-night.svg');
}

body.dark-mode main#landing-page div#clouds {
   filter: contrast(0.8) brightness(0.7) saturate(4) hue-rotate(24deg);
   opacity: 0.9;
}
body.dark-mode main#landing-page div#tree::after {
   filter: saturate(9) brightness(0.1) hue-rotate(120deg);
}
body.dark-mode main#landing-page div#mountains {
   filter: hue-rotate(73deg) brightness(0.55) contrast(2.5);
}
body.dark-mode main#landing-page div#far-ground,
body.dark-mode main#landing-page div#mid-ground {
   filter: hue-rotate(163deg) brightness(0.5) contrast(3);
}
body.dark-mode main#landing-page div#far-bush,
body.dark-mode main#landing-page div#mid-bush {
   filter: hue-rotate(156deg) saturate(2) brightness(0.2);
}
body.dark-mode main#landing-page div#chicken-2,
body.dark-mode main#landing-page div#chicken-3 {
   filter: hue-rotate(188deg) brightness(0.1);
}
body.dark-mode main#landing-page div#near-ground {
   filter: hue-rotate(173deg) brightness(0.3);
}
body.dark-mode main#landing-page div#grass,
body.dark-mode main#landing-page div#chicken-1 {
   filter: hue-rotate(173deg) brightness(0.2);
}

/* ---------------------- */

@keyframes clouds {
   from {
      left: 0vw;
   }
   to {
      left: -99.7vw;
   }
}

@keyframes tree {
   0% {
      transform: skewX(-4deg);
   }
   65% {
      transform: skewX(5deg);
   }
   100% {
      transform: skewX(-3.8deg);
   }
}

@keyframes grass {
   0% {
      transform: skewX(0deg);
   }
   25% {
      transform: skewX(3deg) scaleX(1.1);
   }
   75% {
      transform: skewX(-3deg) scaleX(0.9);
   }
   100% {
      transform: skewX(0deg);
   }
}

/* ---------------------- */

@media (min-aspect-ratio: 2) {
   main#landing-page div#skybg-day,
   main#landing-page div#skybg-night {
      height: 88vh;
      width: 130vw;
   }
   main#landing-page div#mid-ground {
      width: 120vw;
   }
   main#landing-page div#far-ground {
      width: 115vw;
   }
   main#landing-page div#mountains {
      width: 115vw;
   }
}

@media (max-aspect-ratio: 1.633) {
   main#landing-page div#mountains {
      width: 110vw;
   }
   main#landing-page div#far-ground {
      width: 111vw;
   }
   main#landing-page div#mid {
      top: 60vh;
   }
   main#landing-page div#mid-ground {
      top: 10vh;
      left: -35vw;
      height: 60vh;
      width: 182vw;
   }
   main#landing-page div#near {
      bottom: -15vh;
   }
}

@media (max-aspect-ratio: 1.04) {
   main#landing-page div#obj,
   main#landing-page div#far {
      top: 73vh;
   }
   main#landing-page div#far-ground {
      width: 115vw;
   }
   main#landing-page div#mid {
      top: 73vh;
   }
   main#landing-page div#mid-ground {
      top: 4vh;
   }
   main#landing-page div#near {
      bottom: -15vh;
   }
}

@media (max-aspect-ratio: 0.764) {
   main#landing-page div#sun {
      top: 3.5vh;
      left: 40vw;
      height: 20vw;
      width: 20vw;
   }
   main#landing-page div#moon {
      left: 35.2vw;
      height: 51vw;
      width: 51vw;
   }
   main#landing-page div#mid-ground {
      top: 3vh;
      width: 300vw;
      left: -75vw;
   }
   main#landing-page div#near {
      bottom: -23vh;
   }
   main#landing-page div#wallet-connector {
      padding: 24px 8px 8px 8px;
      height: 200px;
      width: 330px;
   }
   main#landing-page div#wallet-connector::before {
      height: 192px;
      width: 322px;
   }
   main#landing-page div#wallet-connector img {
      height: 75px !important;
      width: 217px !important;
   }
   main#landing-page div#wallet-connector button.MuiButtonBase-root {
      margin-top: 18px;
      padding: 8px 16px;
      font-size: 12pt;
      border-radius: 16px;
   }
}

@media only screen and (max-width: 420px) {
   main#landing-page div#mountains {
      left: 0vw;
      width: 110vw;
   }
   main#landing-page div#far-ground {
      width: 110vw;
   }
   main#landing-page div#mid {
      top: 61vh;
   }
   main#landing-page div#mid-ground {
      top: 4vh;
   }
   main#landing-page div#near {
      bottom: -13vh;
   }
}

@media only screen and (max-width: 415px) {
   main#landing-page div#far,
   main#landing-page div#obj {
      top: 74vh;
   }
   main#landing-page div#mid {
      top: 73vh;
   }
   main#landing-page div#mid-ground {
      top: 4vh;
   }
   main#landing-page div#near {
      bottom: -23vh;
   }
}