body {
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu', sans-serif;
  overflow-x: hidden;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/*CSS3 Animations*/
@keyframes slow-zoom {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(3);
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes pulsate {
  0% {
    transform: scale(0.9, 0.9);
  }

  50% {
    transform: scale(1.1, 1.1);
  }

  100% {
    transform: scale(0.9, 0.9);
  }
}

@-webkit-keyframes horizontal-move-down {
  0% {
    transform: translateY(-8px);
  }

  50% {
    transform: translateY(0px);
  }

  100% {
    transform: rotate(-45deg);
  }
}

@keyframes horizontal-move-down {
  0% {
    transform: translateY(-8px);
  }

  50% {
    transform: translateY(0px);
  }

  100% {
    transform: rotate(-45deg);
  }
}

@-webkit-keyframes horizontal-move-up {
  0% {
    transform: translateY(8px);
  }

  50% {
    transform: translateY(0px);
  }

  100% {
    transform: rotate(45deg);
  }
}

@keyframes horizontal-move-up {
  0% {
    transform: translateY(8px);
  }

  50% {
    transform: translateY(0px);
  }

  100% {
    transform: rotate(45deg);
  }
}

@keyframes menu-box-rotation-clockwise {
  0% {
    transform: rotate(45deg) translateZ(0);
  }

  100% {
    transform: rotate(135deg) translateZ(0);
  }
}

@keyframes menu-box-rotation-counter {
  0% {
    transform: rotate(-45deg) translateZ(0);
  }

  100% {
    transform: rotate(-135deg) translateZ(0);
  }
}

@keyframes planet-rotation {
  0% {
    transform: rotate(0deg) translateZ(0);
  }

  100% {
    transform: rotate(-360deg) translateZ(0);
  }
}

.hide-body-overflow {
  overflow: hidden;
}

.my-name-section {
  background-color: #000;
  background-image: url('images/DarkForest.jpg');
}

.large-block-section {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-img {
  width: 100%;
  height: 100%;
  position: absolute;
}

.shape-container {
  position: relative;
  width: 550px;
  z-index: 10;
}

.shape-title {
  color: #fff;
  font-size: 60px;
  position: absolute;
  font-family: 'Shadows Into Light', cursive;
  font-weight: 400;
  padding-top: 20px;
  z-index: -1;
}

.shape {
  width: 140px;
  height: 130px;
  border: 2px solid #2ecc71;
  border-radius: 100%;
  margin-left: 189px;
  z-index: 12;
  overflow: hidden;
}

.shape-pulsate {
  animation: pulsate 3500ms ease-in-out;
  animation-iteration-count: infinite;
}

.static-gif {
  display: none;
  margin-left: -56px;
  margin-top: -11px;
}

.shape:hover {
  background-color: #fff;
  cursor: pointer;
}

.shape:hover .static-gif {
  display: block;
}

.shape.eye-peek .static-gif {
  display: block;
}

.forestZoom {
  animation: slow-zoom 20s ease-out 1 forwards;
}

.forestFade {
  animation: fade-out 5s ease-out 1 forwards;
}

.static-gif.static-gif-clicked {
  display: block;
}

.main-page-content {
  display: none;
}

.alternate-diminsion-section {
  background-color: #2c1b3d;
}

.diminsion-title {
  color: #fff;
  font-size: 50px;
  text-transform: uppercase;
  font-weight: bold;
}

.diminsion-title span {
  display: block;
  text-align: center;
}

.diminsion-title span:first-child {
  margin-bottom: 12px;
}

.box-outline {
  border: 1px solid #2ecc71;
  /*transform: rotate(45deg) translateZ(0);*/
  width: 400px;
  height: 400px;
  position: absolute;
  opacity: 0.5;
  -webkit-animation: menu-box-rotation-clockwise 1200ms forwards;
  animation: menu-box-rotation-clockwise 1200ms forwards;
}

.box-outline-shadow {
  border: 4px solid #2ecc71;
  width: 400px;
  height: 400px;
  position: absolute;
  background-color: #2c1b3d;
  -webkit-animation: menu-box-rotation-counter 1200ms forwards;
  animation: menu-box-rotation-counter 1200ms forwards;
}

.current-section {
  border-left: 4px solid #2ecc71;
}

.star-canvas {
  position: absolute;
  width: 1500px;
  height: 100vh;
}

/*May need to remove*/

#viewport .smoke {
  position: absolute;
  width: 250px;
  height: 250px;
  background: url('images/smoke-texture.png') no-repeat;
  /*bottom: 150px;*/
  margin-left: 0;
}