@font-face {
  font-family: CustomFont;
  src: url('Greconian.ttf');
}

@font-face {
  font-family: Roboto;
  src: url('Roboto.ttf');
}

html {

  overflow-x: hidden;

  box-sizing: border-box;
  height: 100%;
  background-color: rgb(222, 233, 230);
  /* RGB */
  
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  height: 100%;

  overflow-x: hidden;
 
  background-color: rgb(222, 233, 230);
  /* background-color: rgb(207, 97, 57); */

}



.layer0,
.layer1,
.layer2,
.layer3,
.layer4 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  

  transform: scale(1);
  /* Initial zoom of 3x */
  transform-origin: top center;
  /* Center the zoom effect at the top */
  transition: all 1s ease-out;
  /* background-color: orange */
}



.layer3 {
  height: calc(100vw * (3037 / 4500));
  background-image: url('./images/small_layer10.png');
  z-index: 16;
  overflow-y:visible;

  background-position: top center;
 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;

}



.layer4 {

  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: auto;

  transform-origin: top center;
  /* Center the zoom effect at the top */
 
  z-index: 6;
}





.wobble-effect {
  animation: wobble 0.5s ease-in-out infinite;
}

@keyframes wobble {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(2deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-2deg);
  }

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


.mofo1,
.mofo2,
.mofo3,
.mofo4,
.mofo5,
.mofo6,
.mofo7,
.mofo8,
.mofo9,
.mofo10,
.mofo11,
.mofo12,
.mofo13,
.mofo14 {
  position: absolute;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
 
}

.mofo1 {
  height: 20%;
  width: 20%;
  z-index: 100;
  left: 40%;
  top: calc(0.30 * 100vw * (3037 / 4500) *2);
}

.mofo2 {
  height: 20%;
  width: 20%;
  z-index: 100;
  left: 10%;
  top: calc(0.25 * 100vw * (3037 / 4500) *2);
}

.mofo3 {
  height: 20%;
  width: 20%;
  z-index: 100;
  left: 25%;
  top: calc(0.40 * 100vw * (3037 / 4500) *2);
}

/* .mofo4 {
  height: 20%;
  width: 20%;
  z-index: 100;
  left: -5%;
  top: calc(0.23 * 100vw * (3037 / 4500) *2);
}

.mofo5 {
  height: 20%;
  width: 20%;
  z-index: 100;
  left: -5%;
  top: calc(0.23 * 100vw * (3037 / 4500) *2);
} */

.mofo6 {
  height: 20%;
  width: 20%;
  z-index: 100;
  left: 80%;
  top: calc(0.23 * 100vw * (3037 / 4500) *2);
  
}

.mofo7 {
  height: 20%;
  width: 20%;
  z-index: 100;
  left: 70%;
  top: calc(0.32 * 100vw * (3037 / 4500) *2);
}

.mofo8 {
  height: 20%;
  width: 20%;
  z-index: 100;
  left: 77%;
  top: calc(0.38 * 100vw * (3037 / 4500) *2);
}
/* 
.mofo9 {
  height: 20%;
  width: 20%;
  z-index: 100;
  left: 78%;
  top: calc(0.23 * 100vw * (3037 / 4500) *2);
}

.mofo10 {
  height: 20%;
  width: 20%;
  z-index: 100;
  left: 80%;
  top: calc(40% * 100vw * (3037 / 4500) / 100%);
} */

.mofo11 {
  height: 20%;
  width: 20%;
  z-index: 100;
  left: 10%;
  top: calc(0.70 * 100vw * (3037 / 4500) *2);
}

.mofo12 {
  height: 20%;
  width: 20%;
  z-index: 100;
  left: 5%;
  top: calc(0.95 * 100vw * (3037 / 4500) *2);
}

.mofo13 {
  height: 20%;
  width: 20%;
  z-index: 100;
  left: 65%;
  top: calc(0.60 * 100vw * (3037 / 4500) *2);
}

.mofo14 {
  height: 20%;
  width: 20%;
  z-index: 100;
  left: 70%;
  top: calc(0.95 * 100vw * (3037 / 4500) *2);
}




.logo {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center horizontally */
  text-align: center; /* Ensure text is centered */
  justify-content: center; /* Optional: Center vertically if parent has a height */
  color: rgb(166, 140, 8);
  margin-top: 0vw;
}

.header {
  font-family: CustomFont;
  margin-top: 0vh;
  color: rgb(166, 140, 8)
}

.subHeaderLine2 {
  font-family: CustomFont;
  margin: 0vh;
  font-weight: 600;
  
}

.lottie-animation {
  position: absolute;
  width: 8em;
  height: 5vw;

  top: 92%;
  /* Push the animation to the bottom */

}

.mainPart {
 
  font-family: Roboto;
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  justify-content: flex-start;; /* Center vertically */
  align-items: center; /* Center horizontally */
  position: absolute;
  height: auto;
  width: 80vw;
  left: 50%;
  transform: translateX(-50%);
  /* background-color: rgba(255, 255, 255, 0.6); */
   background-color: rgba(255, 255, 255); 
  z-index: 9000;
  border-radius: 10px;
 
  transition: all 0.5s ease-out;
 

  -ms-overflow-style: none;
  top: 70vw;
}

.mainPart p {
  font-family: Roboto;
  font-size: 1.3em;
  /* Increase font size */
  line-height: 1.6;
  /* Adjust line height for better readability */
  margin: 1vw 5%;
  /* Add margin between paragraphs for spacing */
  padding-left: 10px;
  /* Add some space on the left */
  padding-right: 10px;
  /* Add some space on the right */
  text-align: justify;
  
}
.mainPart::-webkit-scrollbar {
  display: none; /* Hides scrollbar in Chrome/Safari */
}

h2 {
  font-size: 2em;
  /* Increase the size of the heading */
  margin: 1vw 5%;
  margin-top: 5vh;
  margin-bottom: 1vw;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

h1 {
  
  margin: 1.5vw 5%;
  margin-bottom: 1.5vw;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}
.main_header{
  margin-top: 4vw;
}
.image-middle {
  text-align: center;
  margin: 4vw 0;
}

.centered-text {
  display: flex;
  flex-direction: column;
  align-items: center;  /* Centers horizontally */
  justify-content: center;  /* Centers vertically */
 
  text-align: center;
}

.image {
  width: 80%;
  height: auto;
  border-radius: 8px;
}

.e-widget {

  width: 2000px;
  /* Change this to your desired width */
  transform: scale(0.2);
}

.loading-screen {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  z-index: 9999;
}



.logo,
.header,
.subHeaderLine1,
.subHeaderLine2,
.lottie-animation,
.mainPart,
.mofo1,
.mofo2,
.mofo3,
.mofo4,
.mofo5,
.mofo6,
.mofo7,
.mofo8,
.mofo9,
.mofo10,
.mofo11,
.mofo12,
.mofo13,
.mofo14 {
  will-change: transform;
}

.layer0,
.layer1,
.layer2,
.layer3 {
  will-change: background-position;
}


.loading-screen {
  background-image: url('/images/mofos/originalgreeknft1.png');
  background-size: contain;
  /* Ensures the image covers the whole element */
  font-family: Roboto;
  background-repeat: no-repeat;
  /* Prevents the image from repeating */
}

/* .e-widget {
  width: 80%;
  max-width: none;
  box-sizing: border-box;
} */