:root {
  --dark-gray:  #b8c1cb;
  --light-gray: #e8eef4;

  --gray-green:        #c3cdc0;
  --darker-gray-green: #bbc9ba;

  --cyan-green:        #defdf1;
  --darker-cyan-green: #cfe7d9;

  --light-dark-green:   #79a06b;
  --lighter-dark-green: #558d3d;
  --dark-green:         #427d23;
}

body {
  margin: 0;
  height: 100vh;
  width:  100vw;
}

body > :only-child {
  position:  absolute;
  transform: translate(-50%, -50%);
  top:  50%;
  left: 50%;
}

.registration-container {
  background-color: var(--cyan-green);
  /* Made to look like in the screenshot */
  border-top:    1px solid var(--dark-gray);
  border-bottom: 1px solid var(--dark-gray);
  border-left:   3px solid var(--light-gray);

  box-sizing: border-box;
  width: 30.2%; /* ~585px on 1920px width */
}

.registration-form {
  border:    1px solid var(--dark-green);
  font-size: 17px;
  /* I wanted to make it as pixel-perfect as possible */
  margin:  3.64em 4.58em 4.88em 4.29em;
  padding: 1.82em;
}

.registration-form > :not(:last-child) {
  margin-bottom: 0.7em;
}

.registration-input {
  background-color: white;
  border: 2px solid var(--gray-green);
  border-radious: none;
  display:   block;
  font-size: inherit;
  padding: 0.41em;
  width:   100%;
}

.registration-input:hover {
  border-color: var(--light-dark-green);
}

input[type="submit"].registration-input {
  background-color: var(--darker-cyan-green);
  border-color:     var(--darker-gray-green);
  color:            var(--lighter-dark-green);
}

input[type="submit"].registration-input:hover {
  background-color: var(--lighter-dark-green);
  border-color:     var(--darker-cyan-green);
  color:            var(--darker-cyan-green);
}