CSS como criar design pixelizado para um form

[Henry07]

Eu estou trabalhando na construção de um site, e a temática desse site é retrogame pixealizado e tal, o deesign do site, pede que os forms sejam pixealizados, mas não consigo criar esse design com css, e não sei fazer de outra forma, quero a ajuda de vocês para elaborar esse design, não precisa ser necessariamente em css, contanto que consigo chegar no resultado esperado o modelo do design é esse vou deixar o design da pagina toda tmb

o meu codigo css atual é esse pode ser que esteja meio bagunçado

"

html, body{

    height: 100%;

    margin: 0;

    padding: 10px;

    box-sizing: border-box;

}

 

body{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    font-family: 'Press Start 2P', sans-serif;

    font-size: 12px;

    background: linear-gradient(

    to bottom,

    #431188 0%,

    #530356 50%,

    #3c0299 100%) fixed;

    color: white;

    overflow-x: hidden;

}

 

body::before {

  content: "";

  position: fixed;

  top: 0;

  left: -600px;

  width: 180%;

  height: 75%;

  overflow: hidden;

  background-image:

    linear-gradient(transparent 95%, rgba(255, 0, 255, 0.3) 96%),

    linear-gradient(to right, transparent 95%, rgba(255, 0, 255, 0.3) 96%);

  background-size: 100px 100px;

  transform: perspective(800px) rotateX(-50deg);

  transform-origin: top;

  pointer-events: none;

  z-index: -1;

  mask-image: linear-gradient(to bottom, white 60%, transparent 100%);

  -webkit-mask-image: linear-gradient(to bottom, white 60%, transparent 100%);

}

 

body::after {

  content: "";

  position: fixed;

  bottom: 0;       /* fixar na parte inferior */

  left: -600px;

  width: 180%;

  height: 75%;

  background-image:

    linear-gradient(transparent 95%, rgba(255, 0, 255, 0.3) 96%),

    linear-gradient(to right, transparent 95%, rgba(255, 0, 255, 0.3) 96%);

  background-size: 100px 100px;

  transform: perspective(800px) rotateX(50deg);  /* rotacionar para baixo */

  transform-origin: bottom;

  pointer-events: none;

  z-index: -1;

  mask-image: linear-gradient(to top, white 60%, transparent 100%);

  -webkit-mask-image: linear-gradient(to top, white 60%, transparent 100%);

}

   

.box{

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: stretch;

    margin: 20px auto;

    background-color: #d684ff;

    padding: 15px;

    width: 100%;

    max-width: 800px;

    box-sizing: border-box;

    border-left: 30px solid #f6e620;

    border-right: 30px solid #5ce1e6;

}

 

.box form{

    width: 100%;

}

/* fieldset{

    flex: 1 1 auto;

    position: relative;

    padding: 15px 15px 15px;

    margin-top: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    border: 3px solid maroon;

    border-radius: 15px;

 

    min-width: 0;

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;

} */

 

legend{

    text-align: center;

    box-sizing: border-box;

    border: 1px solid maroon;

    border-radius: 5px;

    padding: 10px;

    background-color: maroon;

    color: white;

    margin: 0 auto;

}

 

.titulo-secao{

    text-align: center;

    margin: 0 auto;

    margin-bottom: 25px;

    margin-top: 30px;

}

 

}"