@import url("base.css");

.about {
  position: relative;
  width: 100%;
  height: 100vh;
}

.canvas-3d {
  position: absolute;
  top: 50%;
  left: 80%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 30%;
  height: 30vw;
  border-radius: 100%;
}

.about-content {
  position: absolute;
  z-index: 1000;
  left: 10%;
  top: 50%;
  width: 40%;
  transform: translateY(-50%);
}

h1 {
  color: #ffffff;
  font-size: 4.5vw;
  font-weight: 400;
  margin-bottom: 20px;
}

.txt {
  color: #ffffff;
  font-size: 1.5vw;
}

.about-content>div {
  margin-bottom: 2vw;
  line-height: 1.5vw;
}

@media only screen and (max-width: 850px) {
  .about {
    position: relative;
    width: 100%;
    height: 100vh;
  }

  .canvas-3d {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    z-index: 4000;
  }

  .canvas-3d:hover {
    cursor: pointer;
  }

  .about-content {
    width: 80%;
    text-align: center;
    position: absolute;
    z-index: 1000;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
  }

  h1 {
    color: #ffffff;
    font-size: 10vw;
    font-weight: 400;
    margin-bottom: 20px;
  }

  .txt {
    color: #ffffff;
    font-size: 3vw;
  }

  .about-content>div {
    margin-bottom: 2vw;
    line-height: 3vw;
  }
}