create.css

:root {
    --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
      "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
      "Source Han Sans CN", sans-serif;
  }
  .main-container {
    overflow: hidden;
  }
  
  .main-container,
  .main-container * {
    box-sizing: border-box;
  }
  
  #myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
  }
  
  input,
  select,
  textarea,
  button {
    outline: 0;
  }
  
  .main-container {
    position: relative;
    width: 884.066px;
    height: 538px;
    margin: 100px auto;
  }
  .frame {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    position: absolute;
    width: 884.066px;
    height: 538px;
    top: 0;
    left: 0;
    padding: 10px 10px 10px 10px;
    background: #c9b7f196;
    overflow: hidden;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  }
  .rectangle {
    position: absolute;
    width: 562.481px;
    height: 538px;
    top: 0;
    left: 321.585px;
    background: #f4efffa3;
    border: 1px solid #000000;
    z-index: 10;
    border-radius: 40px 0 0 40px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  }
  
  .create {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 41px;
    top: 97px;
    left: 418px;
    color: #000000;
    font-family: Roboto, var(--default-font-family);
    font-size: 40px;
    font-weight: 600;
    line-height: 41px;
    text-align: left;
    text-transform: capitalize;
    white-space: nowrap;
    z-index: 19;
  }
  .pngwing {
    position: absolute;
    width: 373.038px;
    height: 284.888px;
    top: 153.401px;
    left: 23.973px;
    background: url(./assets/images/2b9bb843798ea3eb0a00d7f6eacedff29ab35469.png)
      no-repeat center;
    background-size: cover;
    z-index: 11;
  }
  
  .rectangle-div {
    position: absolute;
    width: 209.322px;
    height: 31.228px;
    top: 176.411px;
    left: 598.147px;
    background: #d9d9d9;
    z-index: 12;
    border-radius: 15px;
    padding-left: 60px;
    font-size: 16px;
    border-color: #d9d9d9;
  }
  .rectangle-div-2 {
    position: absolute;
    width: 164.301px;
    height: 31.228px;
    top: 176.411px;
    left: 415.137px;
    background: #d9d9d9;
    z-index: 14;
    border-radius: 15px;
    padding-left: 47px;
    font-size: 16px;
    border-color: #d9d9d9;
  }
  ::placeholder {
    color: rgb(0, 0, 0);
    font-family: Roboto, var(--default-font-family);
    font-size: 15px;
    font-weight: 400;
    line-height: 13px;
    white-space: nowrap;
    z-index: 13;
  }
  
  .rectangle-4 {
    position: absolute;
    width: 392.333px;
    height: 31.776px;
    top: 224.623px;
    left: 415.137px;
    background: #d9d9d9;
    z-index: 14;
    overflow: hidden;
    border-radius: 15px;
    padding-left: 47px;
    font-size: 16px;
    border-color: #d9d9d9;
    padding-right:47px;
    
  }
  
  .rectangle-8 {
    position: absolute;
    width: 198.213px;
    height: 28.489px;
    top: 280.505px;
    left: 415.721px;
    background: #d9d9d9;
    z-index: 15;
    border-radius: 15px;
    padding-left: 47px;
    font-size: 16px;
    border-color: #d9d9d9;
    padding-right:47px;
  }
  
  
  
  .sign-in {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 30.68px;
    top: 325.978px;
    left: 598.147px;
    color: #ffffff;
    font-family: Roboto, var(--default-font-family);
    font-size: 48px;
    font-weight: 500;
    line-height: 30.68px;
    text-align: left;
    white-space: nowrap;
    z-index: 9;
  }
  .group-b {
    position: absolute;
    width: 389.41px;
    height: 43.281px;
    top: 427.88px;
    left: 418.06px;
    cursor: pointer;
    font-size: 0px;
    background: transparent;
    border: none;
    z-index: 21;
    background: url(./assets/images/c8af0b9c-e494-4905-9ed0-d9ea92fb4b69.png)
      no-repeat center;
    background-size: cover;
    z-index: 22;
    border-radius: 20px;
    border-color: transparent;
  }
  .sign-in-c {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    color: #ffffff;
    font-family: Roboto, var(--default-font-family);
    font-size: 25px;
    font-weight: 500;
    line-height: 29.297px;
    text-align: center;
    white-space: nowrap;
    z-index: 23;
  }
  
  .group-e {
    position: absolute;
    width: 388.194px;
    height: 43.281px;
    top: 356.658px;
    left: 419.814px;
    cursor: pointer;
    font-size: 0px;
    background: url(./assets/images/fc09bf97-5855-4d3a-82d0-d6c0a7c2f19b.png)
      no-repeat center;
    background-size: cover;
    z-index: 25;
    border-radius: 20px;
    border-color: transparent;
  }
  .sign-up {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #ffffff;
    font-family: Roboto, var(--default-font-family);
    font-size: 25px;
    font-weight: 500;
    line-height: 29.297px;
    text-align: center;
    white-space: nowrap;
    z-index: 26;
  }