* {
  max-width: 100%;
  overflow-x: hidden;
}

.mainImage {
  background-image: url('Assets/DirtEdge.png'); 
  height: 100vh; 
  align-items: center;
}

.btmImage {
  background-image: url('Assets/DirtEdge.png'); 
  height: 100vh; 
  align-items: center;
  transform: scaleY(-1);
}

.main {
  align-items: center;
}

.shadow {
  filter: drop-shadow(0 0 50px #333);
  text-shadow: 0 0 20px #333;
}

.shadow-light {
  filter: drop-shadow(0 0 50px rgba(51, 51, 51, 0.454));
  text-shadow: 0 0 20px rgba(51, 51, 51, 0.454);
}

.mainButton {
  font-size: 60px;
  cursor: pointer;
  transition-duration: 3s;
  animation: scrollPointer 2s infinite;
  -webkit-animation: scrollPointer 2s infinite;
}

.image-text-area {
  display: flex;
  justify-content: center;
}

.image-text-area h1 {
  align-self: center;
  font-size: 30px;
  font-weight: bold;
}

.image-text-area p {
  align-self: center;
  font-size: 20px;
  font-weight: bold;
  max-width: 600px;
}

.image-text-area span {
  align-self: center;
  max-width: 70vw;
  font-size: 20px;
  font-weight: bold;
  z-index: 10;
}

.big-text {
  text-align: center; 
  font-weight: bold;
  font-size: 60px;
  margin: 20px 20px 100px 20px;
}

.Green-Highlight {
  position: absolute;
  transform: translateY(-140px);
  right: 2vw;
  opacity: 30%;
  overflow: hidden;
}

.zUp {
  z-index: 10;
}

.dirt-border {
  width: 100vw;
  z-index: 2;
  position: relative;
}

.dirt-top {
  transform: translateY(40px);
}

.dirt-btm {
  transform: translateY(-40px);
}

.dot-nav {
  z-index: 3;
  position: relative;
  transform: translateY(-16vh);
}

.icons {
  display: flex;
  justify-content: space-around;
}

.icons-image {
  height: 250px;
  width: auto;
}

.icons-stroke {
  z-index: -1;
  position: absolute;
  height: 250px;
  width: auto;
  overflow: hidden;
  transform: translateX(-20px);
  max-width: 80vw;
}

.icons p {
  text-align: center;
  font-weight: bold;
}

.icons h1 {
  margin: 0;
  text-align: center;
  font-weight: bold;
}

.icons div {
  width: 25vw;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.btm-area {
  position: absolute;
  z-index: 2;
  transform: translateY(280px);
  text-align: center;
  width: 100%;
}

.btm-area-content {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  align-content: center;
}


/* Media Query */

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

  .image-text-area {
    flex-direction: column;
  }

  .reversed {
    flex-direction: column-reverse;
  }

  .icons {
    flex-direction: column;
  }

  .icons div {
    width: 70vw;
    display: flex;
    flex-direction: column;
    align-self: center;
    margin-bottom: 40px;
  }

  .icons-stroke {
    transform: translateX(-30px);
    justify-self: center;
    overflow: hidden;
  }

  .btm-area {
    transform: translateY(40vh);
  }

}

/* Pointer Button Animation */

@keyframes scrollPointer {
  0% {
    transform: translate(0, 0);
}
20% {
    transform: translate(0, -20px);
}
40% {
    transform: translate(0, 0);
}
}

@-webkit-keyframes scrollPointer {
  0% {
    -webkit-transform: translate(0, 0);
}
20% {
  -webkit-transform: translate(0, -20px);
}
40% {
  -webkit-transform: translate(0, 0);
}
}