@media (max-width: 400px) {
  .base__background {
    z-index: -1;
    margin: 0;
    width: 400px;
    height: 100%;
    background-color: #f7f1e7;
  }
  .dark__bg {
    position: absolute;
    background-color: #a0876e;
    width: 100%;
    height: 550px;
    top: 700px;
    opacity: 50%;

    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 50%,
      black 100%
    );
  }
  .img__background {
    position: absolute;
    width: 1440px;
    left: -100px;
    opacity: 20%;

    mask-image: linear-gradient(to bottom, black 35%, transparent 100%);
  }
  .background__frame {
    z-index: 0;
    position: absolute;
    width: 400px;
    height: 5000px;
    overflow: hidden;
    margin: 0;
  }
  .color__background {
    position: relative;
    background-color: #f6cdb6;
    width: 2200px;
    height: 1100px;
    top: 2000px;
    transform: rotate(-10deg);
  }
  .yellow__background {
    position: relative;
    background-color: #f8f4d9;
    width: 4000px;
    height: 1150px;
    top: 1250px;
    transform: rotate(-170deg);
  }
  .lightGreen__background {
    position: relative;
    background-color: #d7e0b7;
    width: 3000px;
    height: 500px;
    top: 600px;
    transform: rotate(-6deg);
  }
  .decor__background {
    position: relative;
    justify-items: center;
  }
  .wooden__bg {
    opacity: 25%;
    position: absolute;
    height: 460px;
    mask-image: linear-gradient(to top, black 10%, transparent 55%);
  }
  .about__floatbackground {
    background-color: #9ba58d;
    display: flex;
    position: relative;
    border-radius: 30px;
    width: 360px;
    height: 460px;
    left: 20px;
    top: 100px;
    box-shadow: inset 5px 5px 50px rgba(0, 0, 0, 0.212);
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.445));
    overflow: hidden;
  }
}