@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,500;1,500&display=swap');

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      width: 100%;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .character_section{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .component_container {
      width: 40vw;
      height: 40vw;
      display: flex;
      justify-content: center;
      border: 1px dashed;
      position: relative;
      background: #ffa500;
      border-radius: 50%;

  }

  .component_container .input_container {

      position: absolute;
      right: 10%;
      top: 65%;
      text-align: center;
      font-family: Montserrat-ital;
      font-size: 1.5vw;
      z-index: 100;

  }

  .component_container .character_container {
      position: absolute;
      width: 80%;
      height: 50%;
      left: 2vw;
      top: 10%;
      z-index: 100;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
  }

  .input_container input {
      width: 20vw;
      height: 4vw;
      padding: 1vw;
      border: none;
      font-size: inherit;
      font-family: inherit;
      border-radius: 20px;
      z-index: 100;
      box-shadow: #64646f33 0px 7px 29px 0px;

  }

  .input_container input:focus {
      outline: none;
      border: 2px solid #00eaff;

  }

  .component_container .character.first .body::after,
  .component_container .character.second .body::after {
      position: absolute;
      content: '';
      border: 1px solid;
      transform: translate(-50%, -50%);
      transition: all 0.5s
  }

  .component_container .character.first .body::after {
      background: #ffc0cb;
      width: 35%;
      height: 0;
      top: 70%;
      left: 50%;
  }

  .component_container .character.second .body::after {
      background: #b9b901;
      width: 15%;
      height: 20%;
      top: 75%;
      left: 50%;
      border-radius: 50%;
  }

  .component_container:hover .character.first .body::after,
  .component_container:hover .character.second .body::after {
      border-radius: 10px;
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
  }

  .component_container:hover .character.first .body::after {
      width: 35%;
      height: 17%;

  }

  .component_container:hover .character.second .body::after {
      width: 35%;
      height: 20%;

  }

  .component_container .character.first .body .eyes .eye {
      border-top: 0.5vw solid;
      transition: border-top 0.1s;
  }

  .component_container .character.second .body .eyes .eye {
      border-bottom: 0.5vw solid;
      transition: border-bottom 0.1s;
  }

  .component_container:hover .character.first .body .eyes .eye {
      border-top: 1px solid;
  }

  .component_container:hover .character.second .body .eyes .eye {
      border-bottom: 1px solid;
  }

  .character.first {
      width: 30%;
      height: 80%;
      position: relative;
      display: flex;
  }

  .character.first .body,
  .character.second .body {
      width: 100%;
      height: 100%;
      border: 1px solid;
      position: relative;
      box-shadow: #ffffff1a 0px 1px 1px 0px inset, #32325d40 0px 50px 100px -20px, #0000004d 0px 30px 60px -30px;
  }

  .character.first .body {
      background: #800080;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;

  }


  .character.first .body .eyes,
  .character.second .body .eyes {
      width: 8vw;
      height: 4vw;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;

  }

  .character.first .body .eyes .eye,
  .character.second .body .eyes .eye {
      width: 3vw;
      height: 3vw;
      border: 1px solid;
      border-radius: 50%;
      background: #ffffff;
      position: relative;

  }

  .character.first .body .eyes .eye::after,
  .character.second .body .eyes .eye::after {
      position: absolute;
      content: '';
      width: 60%;
      height: 60%;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }

  .character.first .body .eyes .eye::after {
      background: #282828;
  }

  .character.second .body .eyes .eye::after {
      background: #0000ff;
  }

  .character.first .left_hear,
  .character.first .right_hear {
      width: 1vw;
      height: 6vw;
      background: #800080;
      position: absolute;
      border: 1px solid;
      top: 40%;
  }

  .character.first .left_hear,
  .character.second .left_hear {
      border-top-left-radius: 50%;
      border-bottom-left-radius: 50%;

  }

  .character.first .left_hear {
      left: -9%;
  }

  .character.second .left_hear {
      left: -6%;
  }

  .character.first .right_hear,
  .character.second .right_hear {
      border-top-right-radius: 50%;
      border-bottom-right-radius: 50%;
  }

  .character.first .right_hear {
      right: -9.4%;
  }

  .character.second .right_hear {
      right: -6.5%;
  }

  .character.second {
      width: 45%;
      height: 45%;
      position: relative;
      display: flex;
  }

  .character.second .body {
      background: #ffff00;
      border-top-left-radius: 35%;
      border-top-right-radius: 35%;
  }

  .character.second .left_hear,
  .character.second .right_hear {
      width: 1vw;
      height: 4vw;
      background: #ffff00;
      position: absolute;
      border: 1px solid;
      top: 40%;
  }

  .component_container .grass_container {
      width: 100%;
      height: 100%;
      display: flex;
      position: relative;
  }

  .grass_container .grass {
      position: absolute;
  }

  .grass_container .background.grass {
      top: -20%;
      width: 80%;

  }

  .grass_container .front.grass {
      bottom: 12%;
      left: 10%;
      width: 40%;
      z-index: 110;
  }

  .grass_container .background.grass:first-child {
      left: -14%;
  }

  .grass_container .background.grass:last-child {
      right: -14%;
  }

  .input_container .input_container_text {
      overflow: hidden;
      font-weight: 700;
      color: #ffffff;
  }
  @media screen and (max-width:645px) {
        .component_container:hover .character.first .body::after,
        .component_container:hover .character.second .body::after {
            border-radius: 2px;
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
        }
    
  }