@import "reset.css";
@import "fonts.css";
@import "ids.css";
html {
  zoom: 90%;
  overflow-x: hidden;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff5da;
}
.dw {
  font-size: 320px;
  font-weight: 900;
  position: absolute;
}
.dropdot {
  font-size: 300px;
  font-style: italic;
  font-weight: 900;
  position: absolute;
}
.dropname {
  font-size: 48px;
  font-weight: 500;
  position: absolute;
}
.about {
  display: flex;
  width: 1209.926px;
  height: 223.873px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 5;
  left: 33%;
  top: 960px;
  transform: translate(-25%, -25%);
}
.white {
  color: #fff5da;
}
.main {
  background-color: #fff5da;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.intext {
  z-index: 5;
  color: #f2c40f;
  font-size: 200px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.indesc {
  z-index: 5;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.page {
  width: 1920px;
  height: 1080px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.abouttext {
  width: 1209.926px;
  height: 223.873px;
  font-style: italic;
}
.aboutme {
  font-size: 40px;
  font-style: italic;
  font-weight: 900;
}
.mtbox {
  display: flex;
  width: 709px;
  height: 341px;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  left: 10%;
  top: 20%;
  transform: translate(-15%, -25%);
}
.history {
  width: 810px;
  height: 617px;
  position: absolute;
  top: 100 px;
  left: 250px;
  margin-top: 130px;
}
.limondisc {
  width: 1169px;
  height: 192px;
  text-align: left;
  margin: 20px;
  font-size: 64px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}
.hand {
  position: absolute;
  left: 1450px;
  top: 350px;
  transform-origin: center bottom;
  flex-shrink: 0;
  color: #2c2929;
  font-size: 350px;
  font-weight: 900;
  line-height: normal;
  animation: rotate 3s ease-in-out infinite;
}
.mibox {
  position: absolute;
  left: 2600px;
  top: 250px;
  transform: translate(-15%, -25%) scale(-1.2, 1.2);
  width: 484.513px;
  height: 666.234px;
  flex-shrink: 0;
}
.Mounth {
  color: #2c2929;
  font-size: 150px;
  font-weight: 550;
  line-height: normal;
  position: absolute;
  left: 1150px;
  top: 525px;
  animation: talk 1s ease-in-out infinite;
}
.leftletters {
  transform-origin: left;
  animation: lt 5s ease-in-out infinite;
}
@keyframes lt {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(10.817deg);
  }
  100% {
    transform: rotate(0);
  }
}
.drop {
  position: relative;
  top: 0px;
  animation: dr 20s ease-in-out infinite;
}
@keyframes dr {
  0% {
    top: 0px;
  }
  3% {
  }
  6% {
  }
  9% {
  }
  11% {
  }
}
.cheas {
  position: absolute;
  left: -50px;
  top: 50px;
  transform-origin: right;
  animation: cheas 20s ease-in-out infinite;
}
@keyframes cheas {
  0% {
    transform: rotate(0);
  }
  3% {
    transform: rotate(10.817deg);
  }
  6% {
    transform: rotate(0);
  }
  9% {
    transform: rotate(10.817deg);
  }
  11% {
    transform: rotate(0);
  }
}
.rightletters {
  transform-origin: left;
  animation: rt 5s ease-in-out infinite;
}
@keyframes rt {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-10.817deg);
  }
  100% {
    transform: rotate(0);
  }
}
.chess1 {
  transform-origin: left;
  animation: cs1 3s ease-in-out infinite;
}
@keyframes cs1 {
  0% {
    transform: rotate(80deg);
  }
  50% {
    transform: rotate(140.817deg);
  }
  100% {
    transform: rotate(80deg);
  }
}
.chess2 {
  transform-origin: left;
  animation: cs2 3s ease-in-out infinite;
}
@keyframes cs2 {
  0% {
    transform: rotate(140deg);
  }
  50% {
    transform: rotate(190.817deg);
  }
  100% {
    transform: rotate(140deg);
  }
}
.chess {
  transform-origin: left;
  animation: cs 3s ease-in-out infinite;
}
@keyframes cs {
  0% {
    transform: rotate(-80deg);
  }
  50% {
    transform: rotate(-140.817deg);
  }
  100% {
    transform: rotate(-80deg);
  }
}
@keyframes talk {
  0% {
    top: 525px;
    transform: scale(1, 1) rotate(0);
  }
  50% {
    top: 505px;
    transform: scale(1, 0.1) rotate(-20deg);
  }
  100% {
    top: 525px;
    transform: scale(1, 1) rotate(0);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(18.817deg);
  }
  100% {
    transform: rotate(0);
  }
}
footer {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 250px;
  background: #2c2929;
}
.glifstext {
  font-size: 150px;
  font-style: normal;
  font-weight: 400;
}
.yellow {
  color: #f2c40f;
}
.red {
  color: #f2310f;
}
.italic {
  font-style: italic;
}
.exampltext {
  font-weight: 700;
}
.iPizza {
  font-size: 38px;
  font-weight: 700;
}
.ipasta {
  font-size: 48px;
  font-style: italic;
  font-weight: 300;
}
h1 {
  z-index: 10;
  color: #2c2929;
  text-align: right;
  font-size: 128px;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
}
h2 {
  z-index: 10;
  color: #2c2929;
  font-size: 128px;
  font-weight: 700;
  text-align: center;
}
p {
  color: #2c2929;
  font-size: 48px;
  font-weight: 300;
  line-height: 1.01;
}